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 500+ 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, SvGrid Base 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
• SvGrid Base (Suite edition): a table database on the grid, with typed fields, saved views, forms and records

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: prices start at $299 per developer (Indie, for freelancers and companies under $1M yearly revenue), Enterprise is $599 per developer for the enterprise grid and Enterprise Suite $999 per developer with the Spreadsheet, SvGrid Base and SvGrid Studio on top, both for unlimited apps, as a perpetual license with one year of updates and support. A 30-day free Enterprise trial includes email 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 500+ 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 a headless-only table library?

SvGrid ships both layers. The headless engine (createSvGrid) drives your own markup, like a headless table library does, and the <SvGrid /> render component gives you virtualization, Excel-style filters, cell selection and inline editing in one prop pass, so you do not build the DOM layer yourself. Both are Svelte 5 native. The Compare page has side-by-side pages for the libraries people usually evaluate.

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 and Scheduler 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. The Enterprise Suite edition also includes the Excel-style Spreadsheet, SvGrid Base (a table database with views, forms and records) and SvGrid Studio.

How much does @svgrid/enterprise cost?

Prices start at $299 per developer. Every license covers unlimited deployed apps in your organisation. Self-serve: Indie ($299/dev) has every Enterprise grid feature for freelancers and companies under $1M yearly revenue, without support; Enterprise ($599/dev) is the enterprise grid - Server-Side Row Model, export and print, import, pivot, the Kanban board and Scheduler views; Enterprise Suite ($999/dev) adds the Excel-style Spreadsheet, SvGrid Base and SvGrid Studio. 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). To evaluate first, start a 30-day free trial from this page or the pricing page: the download has both packages and every demo to run offline, and includes 30 days of email support.