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. The core is free for everyone; advanced features are free for personal projects with a key, and companies license them per domain. Use it from plain JavaScript, React, Vue, Svelte or Angular, with ready-made server code for Spring Boot and eGovFrame.
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>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, Vue, Svelte and Angular, and has no dependencies.
Is FreeGrid free?
The core grid (sorting, filters, editing, selection, pinned columns, server rows, CSV export, printing, themes and languages) is free for everyone, companies included. Advanced features such as grouping, pivot tables, charts, cell ranges and Excel and PDF export are free for 30 days on a new domain; after that they need a key. Personal, educational and non-commercial projects get a free personal key, renewed every 6 months. Companies need a license for each domain: $149 per domain per year, or $299 per domain once for a perpetual license, which includes updates within the major version bought (for example every 1.x release). One license covers the domain and all its subdomains.
How do I install FreeGrid?
Run npm i @freegridjs/core and import createGrid. React, Vue, Svelte and Angular components are in @freegridjs/react, @freegridjs/vue, @freegridjs/svelte and @freegridjs/angular. 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, Simplified and Traditional Chinese, Japanese, Vietnamese, Thai, Indonesian, Spanish, Portuguese (Brazil), French, German, Italian and Russian, with locale-aware number and date formats. Korean dates default to YYYY-MM-DD.
Does it work with Spring Boot or eGovFrame?
Yes. The grid runs in the browser, and four plain Java 8 classes (a free download in the docs) turn its requests into safe SQL for JdbcTemplate or MyBatis on Spring Boot and eGovFrame 3.x to 5.x: paging, sorting, filters, grouping and saving changes. Spring Security CSRF tokens are handled by csrfHeaders.