SvGrid: a Svelte 5 native data grid (MIT core, headless + render component, MCP-ready)

SvGrid: a Svelte 5 native data grid (MIT core, headless + render component, MCP-ready)



Tópico: SvGrid: a Svelte 5 native data grid (MIT core, headless + render component, MCP-ready)
Categoria: Tutoriais | Programação & Tecnologia
Idioma Principal: Português (Conteúdo de Tecnologia)

Descrição do Conteúdo / Informações:
-------------------------------------------------------------------------
The Svelte ecosystem has matured fast in the last year, but one thing I kept hitting was the data grid problem. If you wanted a real one, your options were:

•
TanStack Table (Svelte adapter). Headless only, multi-framework. You build the entire DOM layer yourself. Beautiful primitives, but you still ship a thousand lines before you have a sortable table.

•
AG Grid via a Svelte wrapper. Production-grade, but the React shape underneath fights Svelte 5 runes the moment you try anything reactive.

•
svelte-headless-table. Lovely for small tables, not built for 100k rows with virtualization.

None of them felt right for the Svelte 5 era. So we spent the last year building one: SvGrid.

It is MIT-licensed, on npm as @svgrid/grid, and has a sibling package @svgrid/enterprise for the heavier features (export, pivot, AI helpers). Site, docs, 150+ live demos: svgrid.com.



Try it in 30 seconds


npm create sv-grid@latest

That scaffolds a working Vite + Svelte 5 app with a sortable, filterable, virtualized grid wired up.

Or drop the package straight into an existing app:

npm install @svgrid/grid



The hello-world that actually does something


<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, working, accessible grid. Sorting, filtering, cell-range selection, inline editing, virtualization all light up the moment you turn on the matching prop. No provider wrapping, no DOM you have to author yourself, no .subscribe ceremony.



Why "Svelte 5 native" matters


A data grid is, at its core, a reactivity problem. A hundred thousand cells, any of which can change, and you want to repaint only what actually moved. Svelte 5 runes ($state, $derived, $effect) give you fine-grained reactivity at exactly that scope.

Three patterns the engine uses that turned out to matter:

1. $state.raw for large arrays. Svelte's deep proxy is wonderful for forms and brutal for 100k-row tables. The row backing is $state.raw; the array reference is reactive, the contents are not. Sort-and-filter on the dataset I was profiling went from ~80ms to ~6ms.

2. $effect.pre for measure-before-paint. Virtualization needs the viewport height before the paint that uses it. With plain $effect you get one frame of "rows render at 0 height, then snap to real height." $effect.pre kills the flicker without a requestAnimationFrame hack.

3. Snippets as cell renderers. Svelte 5 snippets are first-class values. You attach one to a ColumnDef.cell and {@render cell.cell(...)} from the body component, and the args (value, row, getValue) typecheck the whole way through. No more named slots, no <svelte:fragment> dance.



What's in the free MIT core (@svgrid/grid)


•
Row + column virtualization. 100k rows by 100 cols stays smooth. There's a 1M-row demo if you want to see it break later.

•
Filtering. Excel-style filter menu, inline filter row, locale-aware text matching, set / value-list filter, between operator on numbers and dates.

•
Editing. 14 built-in editorTypes (text, number, date, datetime, time, select, rich-select with typeahead, textarea, color, checkbox, list, chips, rating, password) and a cellEditor snippet slot for anything else.

•
Selection. Cell-range click+drag and Shift+arrows, copy/paste as TSV, Excel-style fill handle.

•
Hierarchy. Row grouping with aggregation, tree data, master/detail, full-width detail rows.

•
Layout. Row + column pinning, sticky header + first column, header drag-to-reorder, column sizing API.

•
Operations. Find in grid (Ctrl+F), undo/redo (Ctrl+Z), transaction API, optimistic updates, server-side row model with sort / filter / group pushdown.

•
A11y. WAI-ARIA + full keyboard nav, RTL, high-contrast theme.

•
Bundle. ~7.5 KB gzipped for the headless core, ~42 KB gzipped for the full render component. Svelte stays a peer dependency.

The community core has zero feature gating, no license key, no watermark, no row-count cap.



The AI-native bit


This is the part I am most excited about, and the part I think is underappreciated in the component-library space.

SvGrid ships an MCP (Model Context Protocol) server. Add it to your Claude Desktop, Cursor, or Zed config and the assistant gets accurate, version-pinned answers about every prop, method, and event in the library, plus the source of all 150+ demos as context.

{
"mcpServers": {
"svgrid": {
"command": "npx",
"args": ["-y", "@svgrid/mcp"]
}
}
}

Now when you ask Cursor "give me a grid with row grouping and server-side data," it grounds the answer in actual SvGrid types and emits code that compiles, instead of hallucinating ag-grid props.

There is also a published llms.txt / llms-full.txt for retrieval-augmented setups, and the gallery has live AI demos (a natural-language filter bar that turns "EMEA over 50k active" into a typed filter expression, plus a Smart Paste that turns free-form text into typed rows).



Open core, upfront


@svgrid/grid is MIT-licensed and free for commercial use.

@svgrid/enterprise is a separately-licensed companion that adds export to Excel / PDF / CSV / TSV / HTML with branded headers, footers, and password protection; a paginated printable view; pivot tables with a drag-and-drop Designer + drill-through; and AI helpers. Per-developer pricing, perpetual license with an optional yearly renewal for updates, OSS projects get it for free.

If everything you need is in the core, you never have to touch the paid package.



Honest about what is not there yet


• Column spanning (colSpan on cell context). On the roadmap, large effort.

• Built-in row dragging across grids. Demos cover the in-grid case, but the cross-grid version is not in the engine yet.

• Variable row height on the <SvGrid> render component. The headless virtualizer does it today.

• Engine-level formula language. There is a working in-grid formula engine in a demo, but it has not graduated into the package.

• Custom calendar systems (Hijri, Buddhist, fiscal year) for the date editor. Gregorian dates / times / datetimes are all built in.

Full public roadmap with effort tags and a "recently shipped" track record: svgrid.com/roadmap.



Where to start


• Site + 150+ demos: svgrid.com

• GitHub: github.com/sv-grid/sv-grid

• npm: @svgrid/grid

• Scaffold: npm create sv-grid@latest

I would love feedback. What is the first thing that breaks when you try it, and what is the one missing feature that would stop you adopting it? I am reading every reply.