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

Your coding agent can use it too

SvGrid ships an MCP server that carries the real API surface, every demo's source, and the full docs - and then checks the code your agent writes against that surface before you see it. Wrong prop, wrong column key, Svelte 4 syntax: it comes back with the exact replacement, not a guess. Nothing to install:

claude mcp add --transport http svgrid https://mcp.svgrid.com/mcp

Or run it locally with npx -y @svgrid/mcp, which adds the Svelte compiler pass.

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} sortable filterable editable />

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 get both in one plugin - the house-style skill plus the server whose check_svgrid_code tool verifies each file against the real API surface before you see it:

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

Or wire them up separately, with no install at all on the server side:

claude mcp add --transport http svgrid https://mcp.svgrid.com/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 78 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?

No. The render component ships its own scoped styles and re-themes through --sg-* CSS custom properties. Tailwind is supported if you use it; see the Tailwind guide.

Can I use it from React, Vue, or Angular?

Yes, through @svgrid/grid-wc, which wraps the grid as a <sv-grid> custom element with no build step required.

Is it accessible?

It implements the WAI-ARIA 1.2 grid pattern with full keyboard navigation, a screen-reader announcement layer, RTL support, and a high-contrast theme. See accessibility for exactly where the responsibility line sits.

How do I get AI assistants to write correct SvGrid code?

Point them at the MCP server, or feed them llms.txt. Both are covered in the AI-native section above.

Who's behind it

SvGrid is built by jQWidgets, the team behind jqwidgets.com and htmlelements.com. We've been shipping UI components since 2011 to 5,000+ companies including Samsung, Boeing, NVIDIA, Microsoft, Nokia, and Intel. SvGrid is our Svelte 5 native effort.

Support

SvGrid is open core: the MIT @svgrid/grid is free for any use, and the project is funded by Enterprise licenses, not donations.

• Found a bug or have a question? Open an issue.
• Want to contribute? See CONTRIBUTING.md.
• Security issue? See SECURITY.md.
• Need commercial or priority support? It is included with Enterprise.

What's not built yet

Honest list:

• Custom filter / floating-filter component slot. Filters are configurable but not yet pluggable as your own component. Medium effort.
• Custom tool panels. The tool panel is a fixed Columns + Filters pair. Medium effort.
• Integrated-chart depth. 17 chart types, the wizard, and "chart selected range" ship; the chart toolbar and the click-to-cross-filter loop do not. Large effort.
• Server-side pivot and a viewport row model. The server-side row model does sort / filter / group / infinite today. Large effort.
• A formula language of our own. createHyperFormulaSheet ships in the package so you can bring HyperFormula, and there are in-grid formula demos, but the engine itself is not ours and there is no formula bar.
• Custom calendar systems (Hijri, Buddhist, fiscal year) for the date editor. Gregorian dates / times / datetimes are built in.

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

Repository layout

This is a pnpm workspace monorepo:

packages/grid/            @svgrid/grid          - MIT data grid + UI component suite
packages/enterprise/      @svgrid/enterprise    - paid feature pack + Studio codegen
packages/studio/          @svgrid/studio        - Studio CLI + visual designer
packages/mcp/             @svgrid/mcp           - MCP server
packages/grid-wc/         @svgrid/grid-wc       - <sv-grid> web component
packages/svgrid-ui/       @svgrid/ui            - UI component CLI
packages/create-sv-grid/  @svgrid/create        - grid scaffolder
packages/create-studio/   @svgrid/create-studio - Studio app scaffolder
packages/migrate/         @svgrid/migrate       - svelte-headless-table codemod
packages/svgrid-sv/       @svgrid/sv            - Svelte CLI add-on (sv add @svgrid)
examples/                                       - 370+ live demos
website/                                        - svgrid.com source
docs/                                           - markdown docs

Requirements

• Node.js >= 18
• pnpm (the workspace pins [email protected] via packageManager; corepack enable will pick it up)

Develop

pnpm install            # install workspace deps
pnpm dev                # run the demo gallery at http://localhost:5174
pnpm build              # build packages/grid/dist
pnpm build:example      # build the demo gallery
pnpm dev:site           # run the website at http://localhost:5180
pnpm build:site         # build the website (writes website/dist)
pnpm test               # run the grid test suite
pnpm test:types         # type-check every package
pnpm size               # re-measure the gzipped bundle
pnpm demos:count        # re-count the live demos

pnpm dev proxies to pnpm --filter @svgrid/grid-example-gallery dev. Inside the example, the library is linked via the workspace ("@svgrid/grid": "workspace:*"), so edits in packages/grid/src/** are picked up by Vite HMR with no rebuild.

Library entry points

import {
  SvGrid,
  FlexRender,
  // headless core + row-model factories
  createSvGrid,
  createCoreRowModel,
  createFilteredRowModel,
  createSortedRowModel,
  createGroupedRowModel,
  createExpandedRowModel,
  createPaginatedRowModel,
  // features
  tableFeatures,
  rowSortingFeature,
  columnFilteringFeature,
  columnGroupingFeature,
  rowExpandingFeature,
  rowPaginationFeature,
  rowSelectionFeature,
  // cell renderers
  renderSnippet,
  renderComponent,
} from '@svgrid/grid'

Documentation

• Getting started - end-to-end walkthrough.
• Why headless? - what the headless core gives you and when to reach for it.
• Tailwind integration - re-theming via --sg-* tokens, dark-mode wiring.
• Bundle size - measured numbers and how to reproduce them.
• Help index - topic pages for columns, rows, cells, filtering, editing.
• Missing features - honest gap list.

Website

website/ contains the public marketing + docs site (Vite + Svelte 5). Published to GitHub Pages via .github/workflows/deploy-website.yml on every push to main. See website/README.md for routes, base-path config, and the one-time Pages setup.

License

This repository ships under mixed licensing. The grid, the web component, the UI CLI, the MCP server, the migration codemod, the Svelte CLI add-on, and the two scaffolders are open source; the Enterprise pack, Studio, and the website are commercial.

The MIT packages can be used freely, including for commercial work. The Enterprise feature pack, Studio, and the marketing + docs website are proprietary: source is visible for evaluation and for paying customers, but visibility does not grant a license. See the SvGrid pricing page for Enterprise purchases.

Trademark

SvGrid™ and sv-grid™ are trademarks of jQWidgets Ltd. The licenses above apply to the source code only; they grant no rights to the SvGrid / sv-grid names or logos. You may build on and redistribute the MIT-licensed code, but you may not reuse the project's name or branding in a way that implies endorsement by, or affiliation with, jQWidgets Ltd, nor redistribute it under a confusingly similar name.

If SvGrid saved you some work, a star helps other Svelte developers find it.