SvGrid

The Svelte 5 native data grid. Headless-first. Render-ready.

SvGrid is a Svelte 5 data grid and data table built from the first line for runes, not a React grid wrapped in a Svelte shim. It does virtual scrolling over 100k+ rows, Excel-style filtering, inline editing, row grouping, tree data, pivot, and server-side data, and it ships both a headless engine you compose yourself and a drop-in <SvGrid /> component. Open source under MIT, TypeScript-first, and usable in SvelteKit with SSR.

Quick links: Website · Docs · 370+ Demos · Pricing · Roadmap · Blog · npm

Install

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

npm create @svgrid@latest

Or add it to an existing app:

npm install @svgrid/grid

In a project that already uses the Svelte CLI, the add-on wires it up and can drop in a working demo grid:

npx sv add @svgrid

The 30-second example

<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 table. Sorting, filtering, virtualization, cell selection, and inline editing all wire up the moment you turn on the matching prop.

Quick facts

Re-derive the numbers yourself: pnpm size and pnpm demos:count.

What's in the box

• Virtual scrolling. Row + column windowing; 100k x 100 stays smooth, and there's a 1M-row demo.
• Filtering. Excel-style filter menu, inline filter row, locale-aware text matching, set / value-list filter, between operator on numbers and dates.
• 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 else.
• 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, spreadsheet mode with formulas, plus Kanban board and scheduler/calendar views.
• Layout. Row + column pinning, sticky header + first column, header drag-to-reorder, keyboard-accessible column sizing, responsive mode for mobile.
• Operations. Find in grid (Ctrl+F), undo / redo (Ctrl+Z), transaction API, optimistic updates, server-side row model with sort / filter / group pushdown.
• AI helpers, free. Natural-language filter, smart fill, summarize, classify, anomaly detection, and "chart this". Model-agnostic: you register one provider, nothing is bundled.
• UI components. A Svelte 5 component suite ships in the same package (inputs, selection, date/time, overlays, layout, feedback), usable standalone or as grid cell editors.
• Accessibility. WAI-ARIA grid roles, full keyboard navigation, RTL, high-contrast theme.
• Production concerns. TypeScript types, CSP / Trusted-Types safe rendering, SSR-friendly, themeable via --sg-* CSS custom properties.

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

Which package do I need?

OSS projects under an OSI-approved license get the Enterprise pack free. See Pricing.

Coming from another grid?

Multi-framework teams are better served by AG Grid or TanStack Table; SvGrid is deliberately Svelte-first. Full detail and migration guides: SvGrid vs AG Grid vs TanStack Table · Migrating from AG Grid · Migrating from Handsontable

Using SvelteKit? SvGrid with SvelteKit covers server loads, URL-driven sorting, form actions and what actually server-renders.

AI-native

SvGrid is built to be written by AI as well as used with it. Three grounding surfaces ship with the project so assistants cite real props, methods, and events instead of inventing them.

MCP server for Claude Desktop, Cursor, and Zed:

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

Claude Code users can skip the config file:

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

Retrieval files for RAG and custom agents: llms.txt (index) and llms-full.txt (every doc page concatenated). See Use sv-grid docs as LLM context.

Frequently asked questions

Does SvGrid work with SvelteKit and SSR?

Yes. The server HTML contains the header and a viewport-sized window of rows with their real cell values, so crawlers and no-JS clients see the content; the rest of the rows arrive once the client measures the viewport. Verified in CI against a real server build (pnpm ssr:check). It works under SvelteKit SSR and static builds. See going to production.

Is SvGrid free for commercial use?

Yes. @svgrid/grid is MIT, with no license key, no watermark, and no row-count cap. Only the optional @svgrid/enterprise pack (export, import, pivot, print) is paid.

Does it support Svelte 4?

No. SvGrid is Svelte 5 only by design. It uses runes and snippets rather than Svelte 4 stores, which is what lets it skip the abstraction layer a cross-version grid would need.

How many rows can it handle?

100k rows x 100 columns scroll smoothly on the client thanks to row and column virtualization, and only the visible window is ever in the DOM. Past that, use the server-side row model, which pushes sorting, filtering, and grouping to your backend.

How big is the bundle?

About 2 KB gzipped for the headless core and about 77 KB for the full <SvGrid> render component, plus 9 KB of CSS, with Svelte excluded as a peer dependency. Charts, date/time editors, menus, and export add another ~64 KB that loads on demand rather than up front. Run pnpm size to re-measure.

Do I need Tailwind?

Read the full README on GitHub →