FreeGrid
A fast data grid for the web with a free core and free personal keys. Docs and live demos: https://freegrid.app
- 100,000+ rows with row and column virtualization
- Pinned columns, multi-level headers, resize and drag to reorder
- Multi-sort, text / number / date / set filters, a filter row, two conditions per column and an advanced filter across columns, quick search
- Column chooser and side bar, autosize, collapsible column groups, row numbers, tooltips, density; save and restore whole views (getState / setState)
- Summary rows (top or bottom, pinned or scrolling)
- Row selection, keyboard navigation, light / dark and Korean-style themes, font settings
- 14 languages: English, 한국어, 简体中文, 繁體中文, 日本語, Tiếng Việt, ไทย, Bahasa Indonesia, Español, Português, Français, Deutsch, Italiano, Русский
- Editing (cell or whole row), validation, unique values, formulas, undo; Excel copy/cut/paste, several cell ranges, fill handle, merged cells
- Live updates by id with flashing cells (applyTransaction)
- Row grouping with group checkboxes, tree data with lazy children, master/detail, row drag between grids; pagination, server-side rows and server-side grouping
- Excel (.xlsx, several sheets, cell styles) and CSV export and import, printing; pivot tables, SVG charts and sparklines
- Server helpers for Spring Boot and eGovFrame (restDatasource, loadData, saveChanges) with Java examples
- Accessibility (ARIA grid), Shadow DOM, right-to-left, card view for phones
- Zero dependencies. React:
@freegridjs/react· Vue:@freegridjs/vue· Svelte:@freegridjs/svelte· Angular:@freegridjs/angular
npm i @freegridjs/core
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' } }] },
});
The container needs a height. Languages: import ko from '@freegridjs/core/locales/ko' and pass locale: ko.
CDN
<link rel="stylesheet" href="https://unpkg.com/@freegridjs/core@1/dist/cdn/freegrid.css">
<script src="https://unpkg.com/@freegridjs/core@1/dist/cdn/freegrid.min.js"></script>
<script>FreeGrid.createGrid(el, { columns, data, locale: 'ko' });</script>
License
The core grid (sorting, filters, editing, selection, pinned columns, pages and server rows, CSV export, printing, themes, languages) is free for everyone, companies included.
Paid features need a key after a 30-day trial per domain: row grouping and aggregation, pivot, charts, cell range selection, range copy and paste, fill handle, Excel and PDF export, workbook, server-side groups, advanced filter, side bar panels, context menu, summary rows, formulas, find, conditional formatting and merged cells. Development hosts (localhost, private networks, .local, .test) always have every feature.
- Personal, educational and non-commercial projects: a free personal key, valid 6 months and renewable any time, at https://freegrid.app/license/personal/
- Companies: KRW 200,000 per domain per year, or KRW 400,000 once (perpetual, updates within the major version bought). One key covers the domain and all its subdomains.
See https://freegrid.app/pricing/ and the LICENSE file.
기본 기능은 회사를 포함해 누구나 무료입니다. 유료 기능은 도메인마다 30일 체험 뒤 키가 필요합니다. 개인·교육·비영리 프로젝트는 무료 개인 키(6개월, 언제든 갱신)를, 회사는 도메인당 연 20만 원 또는 영구 40만 원 라이선스를 쓰며, 키 하나로 서브도메인까지 모두 쓸 수 있습니다. 자세한 내용은 https://freegrid.app/pricing/
import { setLicenseKey } from '@freegridjs/core';
setLicenseKey('FG1....'); // or createGrid(el, { licenseKey: 'FG1....', ... })