sv-grid

SvGrid

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

SvGrid is a data grid and data table for Svelte 5, written with runes from the first line rather than ported from a React grid. It virtualizes rows and columns (there is a 1 million row demo below) and ships Excel-style filtering, inline editing, row grouping, tree data, pivot, charts, and server-side data. Drop in the <SvGrid /> component, or build your own table on the headless engine from @svgrid/grid/core. MIT licensed, TypeScript-first, and it server-renders under SvelteKit.

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

If you build on Svelte 5, star the repo so it is there when you need a grid. Stars are also how other Svelte developers find it.

---

Install

npm install @svgrid/grid

Or start from a working Vite + Svelte 5 app (npm create @svgrid@latest), or add it to a Svelte CLI project with npx sv add @svgrid.

The 30-second example

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

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

  const data = $state<Row[]>([
    { firstName: 'Ada',   age: 36, status: 'active' },
    { firstName: 'Linus', age: 54, status: 'active' },
    { firstName: 'Grace', age: 85, status: 'inactive' },
  ])

  const columns: GridColumns<Row> = [
    { field: 'firstName', header: 'First name' },
    { field: 'age',       header: 'Age' },
    { field: 'status',    header: 'Status' },
  ]
</script>

<SvGrid {data} {columns} sortable filterable editable />

That is a working, accessible table. Sorting, filtering, virtualization, cell selection, and inline editing each switch on with the matching prop.

Headless or render: same engine

<SvGrid /> is a renderer over a headless state machine, and the state machine is public. Import it from @svgrid/grid/core (2.7 KB gzipped, no DOM, no CSS) when you want your own markup, a canvas renderer, or a row model you can unit-test in plain Node:

import {
  createSvGrid, createCoreRowModel, createSortedRowModel,
  tableFeatures, rowSortingFeature, sortFns,
} from '@svgrid/grid/core'

const grid = createSvGrid({
  _features: tableFeatures({ rowSortingFeature }),
  _rowModels: {
    coreRowModel: createCoreRowModel(),
    sortedRowModel: createSortedRowModel(sortFns),
  },
  columns,
  data,
})

for (const row of grid.getRowModel().rows) {
  for (const cell of row.getAllCells()) drawCell(cell)
}

Features are opt-in modules, so a grid that never groups never ships grouping. The render component uses the exact same hooks. See Why headless? and the headless table demo.

See it running

Every demo opens in the browser and has an Edit in StackBlitz button that turns it into a live Vite + Svelte 5 project. Nothing to install.

Trading desk10,000 securities on a 500 ms feed	1 million rowssort, filter, group and edit, all on	Spreadsheet + formulasformula cells in a real grid
Kanban boardthe same grid, board mode	Schedulercalendar views off the same data	Cell typesevery editor in one grid

All 500+ demos are browsable by category.

What ships free

The MIT package has no license key, no watermark, and no row-count cap.

• Virtual scrolling over rows and columns. 100k rows x 100 columns scroll smoothly; the 1M-row demo is above.
• Filtering. Excel-style filter menu, inline filter row, set filter, between operator on numbers and dates, locale-aware text matching.
• Editing. 18 built-in editorTypes from text and number to date/time pickers, rich-select with typeahead, autocomplete, chips, color, and rating, plus a cellEditor snippet for anything else.
• Selection. Cell ranges by drag or Shift+arrows, TSV copy/paste, an Excel-style fill handle, drag a range to move it.
• Views. Row grouping with aggregation, tree data, master/detail, and a spreadsheet layout mode (merged cells and per-cell borders). Formula cells in the free core 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 and column pinning, sticky header, drag-to-reorder, resizable rows and columns, a responsive mode for phones.
• Operations. Find in grid (Ctrl+F), undo/redo, a transaction API, optimistic updates, server-side sort/filter/paging and infinite scroll.
• Charts. A chart panel on the grid's rows and a standalone SvChart: 29 SVG chart types, zoom, drilldown, technical indicators, export. No charting library.
• AI helpers. Natural-language filter, smart fill, summarize, classify, anomaly detection, "chart this". You register one provider; nothing is bundled.
• A Svelte 5 UI suite in the same package (inputs, selects, date/time, overlays, layout), usable standalone or as cell editors.
• Accessibility and i18n. WAI-ARIA grid roles, full keyboard navigation, RTL, a high-contrast theme, every string overridable through localeText.
• Production. Bundled types, CSP and Trusted-Types safe rendering, SvelteKit SSR, theming through --sg-* CSS custom properties.

In production

"We were looking for an Excel-like library using SvelteKit. Then I explored your library a lot, mostly everything about SvGrid: cell selection, grabbing cells, updating values in cells. So we used it for an accounting application. It was so easy to integrate. We even built our custom theme, by updating the svgrid.css file which includes all the classes. We found no issues yet, everything just worked for us."

Sikandar Bhide - built an accounting app on SvelteKit

Quick facts

Package	@svgrid/grid, peer dependency svelte@^5
License	MIT, free for commercial use
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
SSR	Header plus a viewport window of rows in the server HTML; checked in CI by pnpm ssr:check
Demos	500+ demos, each with a StackBlitz button
AI grounding	MCP server, llms.txt, Agent Skill

Numbers are measured, not typed: pnpm size and pnpm demos:count re-derive them.

AI-native

Writing SvGrid with Claude, Cursor, or Zed? The MCP server carries the real API surface and its svgrid_check_code tool verifies generated code against it before you see it, so assistants cite real props and events instead of inventing them.

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

Claude Code gets the server plus an always-on house-style skill from one plugin:

/plugin marketplace add sv-grid/sv-grid
/plugin install svgrid@svgrid

For RAG and custom agents there is llms.txt (index) and llms-full.txt (every doc page). See Use sv-grid docs as LLM context.

Coming from another grid?

	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
Virtualization built in	Yes	Yes	Bring your own
Master/detail, tree, range selection	Free	Enterprise only	Build it yourself
License	MIT core, commercial pack	MIT core, commercial pack	MIT

Bundle sizes are measured, dated, and published on the comparison pages. Multi-framework teams are better served by AG Grid or TanStack Table; SvGrid is deliberately Svelte-first. Guides: Migrating from AG Grid · Migrating from Handsontable · SvGrid with SvelteKit

Packages

You want to	Install	License
A data grid in a Svelte 5 / SvelteKit app	@svgrid/grid	MIT
Excel / PDF export, import, pivot tables, print, advanced filter builder, alert rules, Kanban + scheduler + Gantt renderers, server-side row model	+ @svgrid/enterprise	Commercial, Grid