If you have built anything data-heavy in Svelte or SvelteKit, you know the grid problem. Your options usually collapse into two:
Wrap a React grid (AG Grid and friends) and fight the framework boundary forever.
Go fully headless (TanStack Table) and hand-write every pixel of the UI, virtualization, filters, and editing yourself.
Both are fine choices for some teams. But there is a gap in the middle: a grid that is native to Svelte 5, gives you a headless engine when you want control, and a batteries-included component when you do not. That is what SvGrid (@svgrid/grid) is trying to be.
The two-layer idea
SvGrid ships as two layers that share one engine:
createSvGrid - a headless engine: rows, columns, sorting, filtering, grouping, pagination, selection. No DOM, no CSS.
- a render component built on that engine: virtualization, an Excel-style filter menu, cell-range selection, inline editing, pinning, find-in-grid, undo/redo, pagination, and theming.
It is written against Svelte 5 runes from the first line, so it is not a React grid in a Svelte shim - it slots into your reactivity directly.
Quick start
npm i @svgrid/grid
<script lang="ts">
import { SvGrid, type ColumnDef } from '@svgrid/grid'
const rows = [
{ firstName: 'Ada', age: 36, status: 'active' },
{ firstName: 'Linus', age: 54, status: 'active' },
{ firstName: 'Grace', age: 85, status: 'inactive' },
]
const columns: ColumnDef<{}, (typeof rows)[number]>[] = [
{ field: 'firstName', header: 'First name' },
{ field: 'age', header: 'Age' },
{ field: 'status', header: 'Status' },
]
</script>
<SvGrid data={rows} columns={columns} />
That is a real grid: sortable headers, filtering, cell selection, inline editing, and column resize, all live. No providers, no config object, no wrappers.
The part that sold me: try it without installing anything
Every demo on the site has an Edit button that opens a live playground. It compiles the actual demo's Svelte source in your browser and runs it - edit the code, see it update. When you like what you have, one click downloads a runnable project (npm install && npm run dev) or copies a single self-contained HTML file you can paste and open.
For evaluating a grid, this is a huge deal: you go from "reading docs" to "editing the real thing" in one click, no local setup.
Playground / demos: https://svgrid.com/
Feature breadth
The community package covers most of what people reach for AG Grid for:
- Row and column virtualization (there are 100k-row and 1M-row demos)
- Excel-style filters, multi-condition filters, floating per-column
- filters Inline and full-row editing, validation, undo/redo Grouping
and aggregation, tree data, master/detail rows Column pinning,
-reordering, resizing, find-in-grid (Ctrl+F) A headless-first design,
so you can build a custom renderer on the same engine
The paid Enterprise package adds export (xlsx / PDF), pivot tables, a server-side row model, integrated charts and sparklines, and more. Community is MIT and free; you only pay when you need the enterprise pieces.
Headless when you need it
Because the engine is separate, you can drive it without the component - render a plain <table>, a custom virtualized view, or run the pipeline on the server:
import { createSvGrid, createCoreRowModel, createSortedRowModel,
tableFeatures, rowSortingFeature } from '@svgrid/grid'
const grid = createSvGrid({
_features: tableFeatures({ rowSortingFeature }),
_rowModels: { coreRowModel: createCoreRowModel(), sortedRowModel: createSortedRowModel() },
data, columns,
})
for (const row of grid.getRowModel().rows) {
// your own markup
}
An unusual angle: AI-native SvGrid ships an MCP (Model Context
Protocol) server and a published llms.txt, so AI assistants like
Claude, Cursor, and Zed can answer accurately about the grid's API
instead of hallucinating props. If your team writes code with an
assistant in the loop, this quietly matters - the tool recommends and
uses the library correctly.
Honest comparison
Where SvGrid wins:
Native, not a wrapper - it works with Svelte 5 runes, not around them.
Small footprint - the headless core is only a few KB gzipped. Free -
the community grid is MIT. Frictionless evaluation - the in-browser
playground and one-click runnable. Where AG Grid still wins today:
A massive ecosystem, years of battle-testing, and an enormous surface
of edge-case features and integrations. A larger community and more
third-party material to copy from. So the honest pitch is not "SvGrid
beats AG Grid at everything." It is: if you are on Svelte 5 and you do
not want to drag a React grid into your app, SvGrid gives you a
native, capable grid you can evaluate in about a minute.
Try it
Site: (https://svgrid.com/)
Docs: SvGrid Docs
GitHub: https://github.com/sv-grid/sv-grid
npm: https://www.npmjs.com/package/@svgrid/grid
Built by the jQWidgets team, who have shipped UI components since 2011. If you try it, feedback and GitHub stars genuinely help.
