@svgrid/grid

@svgrid/grid

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

Website · Docs · 370+ Demos · Pricing · Roadmap

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.

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

Quick facts

License	MIT, free for commercial use
Requires	svelte@^5 (peer dependency), Node 16+
Bundle (gzip)	~2 KB headless core, ~80 KB full <SvGrid> + ~9 KB CSS
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, spreadsheet mode with formulas.
• 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 row model with sort / filter / group pushdown.
• 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 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 370+ 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

See Use sv-grid docs as LLM context.

Enterprise features

The MIT core is free for any use, including commercial, with no feature gating. Sorting, filtering, editing, virtualization, the server-side row model, 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:

• 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 and scheduler / calendar renderers for the board and scheduler props.

OSS projects receive an Enterprise key free. See Pricing.

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)	~2 KB headless / ~80 KB full	~340 KB	~12-14 KB
Master/detail, tree, range selection	Free	Enterprise only	Build it yourself

Full detail: SvGrid vs AG Grid vs TanStack Table · Migrating from AG Grid

Documentation

• Getting started - end-to-end walkthrough.
• 370+ 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.