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 · 400+ 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 desk 10,000 securities on a 500 ms feed	1 million rows sort, filter, group and edit, all on	Spreadsheet + formulas formula cells in a real grid
Kanban board the same grid, board mode	Scheduler calendar views off the same data	Cell types every editor in one grid

All 400+ 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

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?

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

@svgrid/enterprise sells in two editions, both covering unlimited production apps. Grid is the enterprise grid. Suite adds the spreadsheet and Studio. Shipping SvGrid to third parties as a component, an SDK, or an app builder they build with needs an OEM license, which is separate from developer seats. See Pricing and Section 4A of the EULA.

Open-source projects under an OSI-approved license get a Suite key free. See Pricing.

FAQ

Does SvGrid work with SvelteKit and SSR? Yes. The server HTML contains the header and a viewport-sized window of rows with real cell values, so crawlers and no-JS clients see content; the remaining rows arrive once the client measures the viewport. Verified in CI against a real server build. See going to production.

Is it free for commercial use? Yes. @svgrid/grid is MIT with no license key, watermark, or row cap. Only the optional @svgrid/enterprise pack is paid.

Does it support Svelte 4? No. SvGrid is Svelte 5 only, on runes and snippets, which is what lets it skip the abstraction layer a cross-version grid needs.

How many rows can it handle? 100k rows x 100 columns on the client, with only the visible window in the DOM. Past that, the free server-side controller pushes sorting, filtering and paging to your backend, and the Enterprise row model adds lazy grouping, tree, pivot, and transactions.

Do I need Tailwind? No. The component ships its own scoped styles and re-themes through --sg-* custom properties. Tailwind works too: Tailwind guide.

Is it accessible? WAI-ARIA 1.2 grid pattern, full keyboard navigation, a screen-reader announcement layer, RTL, and a high-contrast theme. Details in accessibility.

What's not built yet? A custom filter component slot, custom tool panels, a viewport row model over a socket, and non-Gregorian calendars. Full list with effort tags on the roadmap and in missing features.

Who's behind it

SvGrid is built by jQWidgets, the team behind jqwidgets.com and htmlelements.com. We have shipped UI components since 2011 to 5,000+ companies including Samsung, Boeing, NVIDIA, Microsoft, Nokia, and Intel. SvGrid is our Svelte 5 native effort, funded by Enterprise licenses rather than donations.

Contributing and support

• Bug or question: open an issue.
• Pull requests: CONTRIBUTING.md has the workspace layout and dev commands.
• Security: SECURITY.md.
• Commercial or priority support is included with Enterprise.

License

Mixed. @svgrid/grid, grid-wc, ui, mcp, migrate, sv, and the two create-* scaffolders are MIT (see each package's LICENSE). The Enterprise pack, Studio, and the website are commercial: the source is visible for evaluation, but visibility does not grant a license.

SvGrid™ and sv-grid™ are trademarks of jQWidgets Ltd. The licenses cover source code only and grant no rights to the names or logos.

If SvGrid saved you some work, star the repo. It is the main way other Svelte developers find it, and it tells us which parts to keep building.