Every grid feature you need, in one package.
FreeGrid handles 100,000 rows without breaking a sweat. Sorting, filters, grouping, pivot tables, charts and Excel import and export are all included. Free for personal use; companies license it per domain. Use it from plain JavaScript, React or Vue.
What you can use today
This table is a FreeGrid too. Click a row to open its demo.
Start in a few lines
Install the package, give the grid a container with a height, pass columns and rows.
import { createGrid } from '@freegridjs/core';
import '@freegridjs/core/styles.css';
const grid = createGrid(document.getElementById('grid'), {
columns: [
{ field: 'name', header: 'Name', pinned: 'left' },
{ field: 'country', header: 'Country', filter: 'set' },
{ field: 'total', header: 'Total', type: 'number', format: '#,##0' },
],
data: rows,
rowSelection: 'multiple',
summary: { rows: [{ label: 'Total', columns: { total: 'sum' } }] },
});import { FreeGrid } from '@freegridjs/react';
import '@freegridjs/core/styles.css';
export function Customers({ rows }) {
return (
<FreeGrid
columns={columns}
data={rows}
rowSelection="multiple"
onCellClick={e => console.log(e.row)}
style={{ height: 480 }}
/>
);
}<script setup>
import { FreeGrid } from '@freegridjs/vue';
import '@freegridjs/core/styles.css';
defineProps(['rows']);
</script>
<template>
<FreeGrid :columns="columns" :data="rows" row-selection="multiple"
:height="480" @cell-click="e => console.log(e.row)" />
</template>What's coming
Each release adds a group of features.
Questions people ask
What is FreeGrid?
FreeGrid is a JavaScript data grid for web applications. It shows and edits large tables (100,000 rows and more) with sorting, filtering, pinned columns, grouping, pivot tables, charts and Excel import and export. It works with plain JavaScript, React and Vue, and has no dependencies.
Is FreeGrid free?
FreeGrid is free for personal, educational and non-commercial use, with every feature included. Companies need a license for each domain: KRW 200,000 per domain per year, subdomains included.
How do I install FreeGrid?
Run npm i @freegridjs/core and import createGrid. React and Vue components are in @freegridjs/react and @freegridjs/vue. Without a build step, load freegrid.min.js and freegrid.css from the npm CDN at unpkg.com/@freegridjs/core.
Can FreeGrid copy and paste with Excel?
Yes. Select a range of cells and copy it into Excel, or paste cells from Excel into editable columns. The grid also exports real .xlsx and CSV files and imports them back.
How many rows can FreeGrid handle?
Row and column virtualization keeps 100,000 rows smooth in the browser. For larger data, the server-side row model loads rows in blocks as people scroll.
Which languages does FreeGrid support?
English, Korean, Chinese, Japanese, Spanish, French and German, with locale-aware number and date formats. Korean dates default to YYYY-MM-DD.