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.