SvGrid - the Svelte data grid. Headless-first. Render-ready.
SvGrid is a Svelte data grid: a headless engine you can compose plus a full-featured render component you can drop in, written for Svelte 5 runes from the first line rather than a React grid wrapped in a Svelte shim. Call it a Svelte datagrid, a Svelte grid or a Svelte table; it is one component, <SvGrid>, from the npm package @svgrid/grid.
Sorting, Excel-style filtering, grouping, virtualization, inline editing and accessibility ship free under the MIT License, with 400+ production-quality examples. The paid @svgrid/enterprise pack adds the Kanban board, Scheduler and Spreadsheet views of the same grid, the Server-Side Row Model, Excel / PDF export, import, print, pivot tables and SvGrid Studio.
What the free Svelte data grid includes
- Headless engine (createSvGrid) you drive with your own markup, plus a drop-in <SvGrid> render component
- Sorting, Excel-style filters, a filter row, find-in-grid, row grouping with aggregation, tree data, master/detail
- Row + column virtualization: 100,000 rows by 100 columns stay smooth, and there is a 1,000,000-row demo
- Inline editing with typed editors, validation, undo / redo, and cascade formulas
- Cell-range selection, copy / paste, a fill handle, and the sort / filter / page intents to wire your own backend
- WAI-ARIA grid roles, full keyboard navigation, right-to-left layout, 20 themes on CSS custom properties
- AI-native: a bundled MCP server plus llms.txt so Claude, Cursor and Zed answer accurately, and natural-language filter / smart-paste helpers
- Vitest behavioral tests, Playwright end-to-end specs, TypeScript strict mode
What @svgrid/enterprise adds
- Kanban board view: the same rows as cards in lanes, drag-and-drop, swimlanes, WIP limits, a card drawer
- Scheduler / calendar view: month, week, day, agenda and timeline views, resources, booking rules
- Spreadsheet: an Excel-style shell (<SvSheet>) with a ribbon, formula bar, sheet tabs, a formula engine, cell formats, merged cells, comments, data validation, conditional formatting, AutoFilter and sheet protection
- Server-Side Row Model: lazy grouping and tree data per level, server-side pivot, transactions, select-all across unloaded rows, and SQL / REST / Supabase sources (flat paging and infinite scroll are free)
- Excel (xlsx) and PDF export, styled HTML export, a paginated printable view, Excel / CSV import
- Pivot tables with a drag-and-drop Pivot Designer, no-code alert rules, and SvGrid Studio for grid-powered CRUD screens
Two packages
npm install @svgrid/grid is the full data grid under the MIT License, including commercial use, with no license key and no row-count cap. npm install @svgrid/enterprise plugs into it: Enterprise - Single App is $599 per developer and Enterprise - Multi App $999 per developer, a perpetual license with one year of updates and support. Pricing and the full feature matrix.
How SvGrid compares
- SvGrid vs AG Grid
- SvGrid vs TanStack Table
- SvGrid vs MUI X DataGrid
- SvGrid vs Handsontable
- SvGrid vs SVAR Svelte DataGrid
- SvGrid vs svelte-headless-table
Guides
- The best Svelte data grids in 2026
- Render your first Svelte data grid in under 5 minutes
- What makes a Svelte data grid fast
- Choosing the most accessible Svelte data grid
- Open-source vs commercial Svelte data grids
- What is a headless data grid?
Get started · Browse 400+ demos · Documentation · All comparisons · Blog · Pricing
Svelte data grid FAQs
Can I build Svelte data grids for free with SvGrid?
Yes. The @svgrid/grid package is free under the MIT License, including commercial use. No license key, no row-count cap, no enterprise upsell pop-ups.
Is SvGrid a Svelte data grid, a Svelte datagrid, or a Svelte table?
All three names describe the same component. <SvGrid> renders tabular data with sorting, Excel-style filters, grouping, virtualization, cell selection and inline editing, which is what 'data grid' and 'datagrid' both mean; used read-only with a few columns it is simply a Svelte table. It is written for Svelte 5 runes, not ported from a React or Angular grid, and the headless engine underneath (createSvGrid) works with your own markup when you want no rendered component at all.
How fast is SvGrid?
It renders 100,000 rows x 100 columns smoothly thanks to row + column virtualization - only the visible window is in the DOM. The headless engine has its own performance test suite tracking the row pipeline.
Can I customize the style of my data grid?
Yes. Re-theme via the --sg-* CSS custom properties (full Tailwind integration documented in the Tailwind guide). Custom cell renderers, header components, and editors all accept any Svelte component or snippet.
Is SvGrid compatible with my framework?
SvGrid is Svelte 5 only by design - it uses runes ($state / $derived / $effect) and snippets, not Svelte 4 stores, and pays no abstraction tax for cross-framework support. For React, Angular, Vue, or vanilla web components, the same team ships htmlelements.com. If part of your stack is on another framework, @svgrid/grid-wc packages the grid as a <sv-grid> custom element with typed React, Vue and Angular wrappers - see the Web Components docs for what it can and cannot do.
Does SvGrid work with AI tools and assistants?
Yes. It ships an MCP (Model Context Protocol) server so Claude, Cursor, Zed, and other assistants answer accurately about the grid, plus a published llms.txt / llms-full.txt for retrieval. There are AI demos (natural-language filter, smart paste) in the gallery.
How is SvGrid different from TanStack Table?
SvGrid is Svelte-5-native with a built-in <SvGrid /> render component - virtualization, Excel-style filters, cell selection, and inline editing work in one prop pass. TanStack Table is multi-framework and headless-only, so you build the DOM layer yourself. See the Compare page for a side-by-side matrix.
What is the difference between @svgrid/grid and @svgrid/enterprise?
@svgrid/grid is the full grid: sorting, filtering, grouping, virtualization, inline editing, master/detail, tree, accessibility, the sort / filter / page intents for your own backend, and built-in AI helpers (natural-language filter, smart-fill, chart-this). Free under the MIT License. @svgrid/enterprise is a paid companion that adds the Kanban board, Scheduler and Excel-style Spreadsheet views, the Server-Side Row Model with SQL / REST / Supabase sources, export (Excel, PDF, CSV, TSV, HTML), a printable view, and pivot tables, plus direct support.
How much does @svgrid/enterprise cost?
Three Enterprise license tiers. Self-serve: Enterprise - Single App ($599/dev) covers one deployed app; Enterprise - Multi App ($999/dev) covers unlimited deployed apps in your organisation. Buy once, keep forever - the optional yearly renewal pays for new updates and support, and you can cancel anytime and keep every version released during your paid term. For 50+ seats, MSA / NDA / on-prem / multi-year terms, Enterprise - Custom is a tailored quote (talk to sales).