A production-grade Svelte 5 data grid and data table built from the first line for runes, not a React grid wrapped in a Svelte shim. Virtual scrolling over 100k+ rows, Excel-style filtering, inline editing, row grouping, tree data, and server-side data. Compose the headless engine yourself, or drop in the full <SvGrid /> render component and ship. The MIT core has zero feature gating: no license key, no watermark, no row-count cap.

When it fits

• A Svelte 5 or SvelteKit app needs a data grid or data table: sorting, filtering, inline editing, grouping, paging, pinned columns, virtual scrolling, keyboard navigation.
• You want a finished component (<SvGrid>, styled and accessible from two arrays) or the same engine headless (createSvGrid) under your own markup.
• The rows are many or remote: row + column virtualization, and createServerDataSource for server-side paging, sorting and filtering.
• The host app is not Svelte: the <sv-grid> custom element in @svgrid/grid-wc runs in React, Vue, Angular or plain HTML.

Not a fit: Svelte 4 projects. SvGrid is written with runes and snippets and needs Svelte 5.

Install

Scaffold a working Vite + Svelte 5 app with SvGrid wired up:

npm create @svgrid@latest

Or add it to an existing app:

npm install @svgrid/grid

Quick start

<script lang="ts">
  import { SvGrid, type GridColumns } from '@svgrid/grid'

  type Person = { firstName: string; age: number; status: string }

  const rows: Person[] = [
    { firstName: 'Ada',   age: 36, status: 'active' },
    { firstName: 'Linus', age: 54, status: 'active' },
    { firstName: 'Grace', age: 85, status: 'inactive' },
  ]
  const columns: GridColumns<Person> = [
    { field: 'firstName', header: 'First name' },
    { field: 'age',       header: 'Age' },
    { field: 'status',    header: 'Status' },
  ]
</script>

<SvGrid data={rows} {columns} sortable filterable editable pageable />

That is a real, accessible grid with sorting, filtering, inline editing and paging. Every feature is off until its prop is set, so a grid you never configured stays small. GridColumns<Person> checks each field against the row type, so a typo is a compile error rather than a blank column.

Quick facts

| | | |---|---| | License | MIT, free for commercial use | | Requires | svelte@^5 (peer dependency), Node 16+ | | Bundle (gzip) | ~2.7 KB headless core, ~98 KB full <SvGrid> + ~10 KB CSS; charts, date pickers, menus and export load as separate chunks on first use | | Types | Bundled, no @types/ package needed | | Module format | ESM, plus a CDN build at @svgrid/grid/cdn | | SSR | Works under SvelteKit SSR and static builds | | Theming | --sg-* CSS custom properties, dark mode + high contrast |

Capabilities

• Virtual scrolling - row + column windowing; 100k x 100 stays smooth, with a 1M-row demo.
• Filtering - Excel-style filter menu, inline filter row, set / value-list filter, locale-aware matching, between operators.
• Editing - 15 built-in editorTypes (text, number, date, datetime, time, select, rich-select with typeahead, autocomplete, textarea, color, checkbox, list, chips, rating, password), plus date-native / datetime-native / time-native to opt out of the rich pickers, and a cellEditor snippet slot for anything custom.
• Selection - cell-range click+drag and Shift+arrows, copy/paste as TSV, Excel-style fill handle, row selection.
• Views - row grouping with aggregation, tree data, master/detail, full-width detail rows, and a spreadsheet layout mode (merged cells, per-cell borders). Formula cells here go through an adapter seam you point at your own hyperformula install; the built-in formula engine and <SvSheet> are in the Suite edition of @svgrid/enterprise.
• Layout - row + column pinning, sticky header + first column, header drag-to-reorder, autosize, keyboard-accessible column sizing, zebra rows, responsive mode.
• Data operations - find in grid (Ctrl+F), undo / redo, transaction API, optimistic updates, server-side data with sort / filter / paging / infinite-scroll pushdown (lazy grouping, tree, pivot and transactions on the server are in @svgrid/enterprise).
• AI helpers, free - natural-language filter, smart fill, summarize, classify, anomaly detection, and "chart this". Model-agnostic: register one provider, nothing is bundled.
• UI components - a Svelte 5 component suite ships in the package (inputs, selection, date/time, overlays, layout, feedback), standalone or as grid cell editors.
• Accessibility - WAI-ARIA grid roles, full keyboard navigation, RTL, high-contrast theme.
• Engineered for production - first-class TypeScript types, CSP / Trusted-Types safe rendering, SSR-friendly, themeable via --sg-* CSS tokens.

Headless or render-ready

SvGrid ships two layers from one package, so you can choose how much control you want:

import {
  // Drop-in render component
  SvGrid,
  // Headless engine + row-model factories
  createSvGrid,
  createCoreRowModel,
  createFilteredRowModel,
  createSortedRowModel,
  createGroupedRowModel,
  createExpandedRowModel,
  createPaginatedRowModel,
  // Feature modules
  tableFeatures,
  rowSortingFeature,
  columnFilteringFeature,
  columnGroupingFeature,
  rowExpandingFeature,
  rowPaginationFeature,
  rowSelectionFeature,
  // Cell renderers
  renderSnippet,
  renderComponent,
  type ColumnDef,
  type SvGridApi,
} from '@svgrid/grid'

• Headless - drive createSvGrid and the row-model factories, render your own markup. getGrid*A11yProps helpers keep custom markup accessible. About 2.7 KB gzipped.
• Render-ready - <SvGrid /> is a complete, accessible, themeable grid you configure with props.

Compatibility aliases are provided for the framework-neutral names: createGrid, createGridState, subscribeGrid.

AI-native

SvGrid publishes an MCP server plus llms.txt and llms-full.txt, so Claude, Cursor, and Zed answer with accurate, version-pinned APIs and all 400+ demo sources as context rather than hallucinated methods.

claude mcp add svgrid -- npx -y @svgrid/mcp
npx skills add sv-grid/sv-grid    # always-on house-style rules

A coding assistant asked for "a table with sort, filter and editing" writes its own table component unless the project says otherwise. npx sv add @svgrid and the npm create @svgrid@latest templates add a short "Tables and data grids" section to the project's AGENTS.md so it uses <SvGrid> instead; the section is on the LLM context page to paste into an existing project.

Enterprise features

The MIT core is free for any use, including commercial, with no feature gating. Sorting, filtering, editing, virtualization, server-side data (paging, infinite block scroll, sort, filter, CRUD) and the AI helpers all ship in the free package. The optional @svgrid/enterprise pack layers on the export- and analytics-heavy features teams tend to need last:

The pack sells in two editions, both covering unlimited production apps.

Grid edition:

• Excel / PDF / CSV / TSV / HTML export plus paginated print.
• Excel / CSV / TSV / JSON import with auto-mapping and per-row validation.
• Pivot tables with a drag-and-drop pivot Designer.
• Kanban board, scheduler / calendar and Gantt renderers for the board, scheduler and gantt props.
• Server-side row model for lazy grouping, tree, pivot and transactions.

Suite edition adds everything above plus:

• A real spreadsheet. <SvSheet> and the <sv-sheet> element over a built-in formula engine with cross-sheet references, named ranges, dynamic arrays and spill, iterative calculation, and dependency-graph recalculation. No hyperformula needed, and no runtime dependency.
• Spreadsheet file formats. Read and write .xlsx, .xls, .ods and .csv, with formulas, merges, frozen panes, named ranges and charts surviving the round trip.
• SvGrid Studio. The designer, the code generator and the SQL data sources.

You can evaluate both editions without asking for a key: every feature runs without one, and under a key that does not cover it, with a watermark and a console message about the Enterprise package. licenseCovers('spreadsheet') tells you which side of the line the current key is on, if you would rather hide an entry point than let it nudge.

OSS projects receive a Suite key free. See Pricing.

Also in the box

The grid is the hero, but it is not everything in the package. The component suite below already ships inside @svgrid/grid; the tools after it install separately and are entirely optional.

• SvGrid UI (MIT) - 84 Svelte 5 components already inside this package, no extra install: SvButton, SvCalendar, SvDateTimePicker, SvDockLayout, SvToaster, selects, dialogs, split panes. Import them the same way you import SvGrid. If you would rather own and edit the source, npx @svgrid/ui try calendar previews a component and copies it into your project, shadcn-style.
• @svgrid/grid-wc (MIT) - the same grid as a <sv-grid> custom element for React, Vue, Angular, or plain HTML. No build step.
• @svgrid/mcp (MIT) - MCP server that checks the code your AI writes against the real API surface, with version-pinned docs and every demo source.
• @svgrid/migrate (MIT) - codemod that ports a svelte-headless-table or TanStack Table v9 component to SvGrid, including the shadcn-svelte data table.
• @svgrid/sv (MIT) - npx sv add @svgrid add-on for the Svelte CLI.
• SvGrid Studio (commercial) - visual designer that generates a SvelteKit CRUD app from a database schema: screens, forms, API routes, auth. Code you own, no runtime.

Comparison

| | SvGrid | AG Grid Community | TanStack Table | |---|---|---|---| | Svelte 5 runes native | Yes | No, JS core + wrapper | Adapter only | | Ships a renderer | Yes, plus headless | Yes | No, headless only | | Bundle (gzip) | measured on the comparison page | measured, same page | measured, same method | | Master/detail, tree, range selection | Free | Enterprise only | Build it yourself |

Full detail: SvGrid vs AG Grid vs TanStack Table · All comparisons, with dated sources · Migrating from AG Grid

Documentation

• Getting started - end-to-end walkthrough.
• 400+ live demos - copy-paste recipes for every feature.
• Why headless? - when to compose vs. drop in.
• Theming and Tailwind - re-skin via --sg-* tokens and dark mode.
• Accessibility - the WAI-ARIA grid pattern as implemented.
• Bundle size - measured numbers and how to reproduce them.

Who's behind it

SvGrid is built by jQWidgets, shipping UI components since 2011 to 5,000+ companies including Samsung, Boeing, NVIDIA, Microsoft, Nokia, and Intel. SvGrid is our Svelte 5 native effort.

License & trademark

The source code is MIT-licensed - see LICENSE. It is free for commercial use. SvGrid™ and sv-grid™ are trademarks of jQWidgets Ltd; the license covers the code only, not the name or logo.