SvGrid

SvGrid

What is SvGrid about?

SvGrid delivers a modern, native Svelte 5 data‑grid solution. It is built from the ground up for Svelte 5, offering a headless engine that can be composed freely together with a full <SvGrid /> component for quick integration. The core is MIT‑licensed and includes no feature gating, watermark, or row‑count limits.

How to use SvGrid?

1. Scaffold a new project – npm create @svgrid@latest creates a Vite + Svelte 5 app with SvGrid pre‑configured.
2. Add to an existing app – npm install @svgrid/grid.
3. Import and render:

   <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} />
   

4. Enable additional behavior by setting props (e.g., sortable, filterable, editable, groupable).
5. For advanced scenarios, compose the headless core via the exported factories such as createCoreRowModel, createSortedRowModel, etc.

Key features of SvGrid

• Row & column virtualization – smooth scrolling with 100k × 100 grids; a 1 M‑row demo is available.
• Excel‑style filtering – menu, inline row, locale‑aware text match, set/value‑list, range operators.
• Rich inline editing – 14 built‑in editor types plus a cellEditor slot for custom UI.
• Selection & clipboard – cell‑range drag, Shift‑arrow, TSV copy/paste, fill‑handle, row selection.
• Hierarchy & grouping – row grouping with aggregation, tree data, master/detail, full‑width detail rows.
• Layout controls – column pinning, sticky header/first column, drag‑to‑reorder, programmable sizing.
• Data operations – find (Ctrl+F), undo/redo (Ctrl+Z), transaction API, optimistic updates, server‑side row model with push‑down of sort/filter/group.
• Accessibility – WAI‑ARIA grid roles, full keyboard navigation, RTL support, high‑contrast theme.
• Bundle size – ≈7.5 KB gzipped for the headless core; ≈42 KB gzipped for the full render component.
• AI‑native MCP server – enables Claude, Cursor, Zed to answer context‑aware questions about the library.

Use cases of SvGrid

• Enterprise dashboards needing massive data tables with smooth scrolling and real‑time updates.
• Admin panels where users must filter, sort, edit, and group records directly in the UI.
• Analytics applications that require server‑side row models for push‑down operations on large datasets.
• Internal tools built with Svelte 5 that benefit from a headless data‑grid to maintain full design control.
• AI‑assisted development where the MCP server supplies accurate, version‑pinned documentation to LLM‑based assistants.

FAQ from the SvGrid

• Is there a license fee for the core grid? No. @svgrid/grid is MIT‑licensed and free for any use, including commercial.
• Where can I find the enterprise features? They are packaged in @svgrid/enterprise (Excel/PDF export, pivot designer, AI helpers) and require a commercial license.
• How do I get the MCP server running? Use the provided npx command (see serverConfig below). The server works with Claude, Cursor, and Zed.
• Can I customize the UI theme? Yes. Tailwind integration is provided; design tokens are exposed via --sg-* CSS variables.
• What are the system requirements? Node ≥ 18 and pnpm ≥ 10 (workspace pins pnpm@10.33.2).
• How do I contribute? Open issues or pull requests on the GitHub repository. The core grid accepts community contributions under the MIT license.
• Is there support for row dragging across multiple grids? Not yet – row dragging is limited to within a single grid (roadmap item).

SvGrid

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

A modern data grid built from the first line for Svelte 5 runes, not a React grid wrapped in a Svelte shim. A headless engine you can compose plus a full <SvGrid /> render component you can drop in. MIT core, MCP server for AI assistants, 150+ live demos.

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

---

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

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} />

That is a real, working, accessible grid. Sorting, filtering, virtualization, cell selection, and inline editing all wire up the moment you turn on the matching prop.

What's in the box

• Row + column virtualization. 100k × 100 stays smooth; there's a 1M-row demo too.
• Filtering. Excel-style filter menu, inline filter row, locale-aware text matching, set / value-list filter, between operator on numbers and dates.
• Editing. 14 built-in editorTypes (text, number, date, datetime, time, select, rich-select with typeahead, textarea, color, checkbox, list, chips, rating, password) plus 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.
• Hierarchy. Row grouping with aggregation, tree data, master/detail, full-width detail rows.
• Layout. Row + column pinning, sticky header + first column, header drag-to-reorder, column sizing API.
• Operations. Find in grid (Ctrl+F), undo / redo (Ctrl+Z), transaction API, optimistic updates, server-side row model with sort / filter / group pushdown.
• A11y. WAI-ARIA grid roles, full keyboard navigation, RTL, high-contrast theme.
• Bundle. ~7.5 KB gzipped headless core, ~42 KB gzipped full render component (Svelte stays a peer).

The MIT community core has zero feature gating, no license key, no watermark, no row-count cap.

Two packages

Package	License	What it adds
@svgrid/grid	MIT	The full data grid, free for commercial use
@svgrid/enterprise	Commercial	Export to Excel / PDF / CSV / TSV / HTML, paginated print, pivot tables with drag-and-drop Designer + drill-through, AI helpers
@svgrid/mcp	Commercial	MCP server for Claude / Cursor / Zed

OSS projects get the Enterprise pack free. See Pricing.

AI-native

SvGrid ships an MCP (Model Context Protocol) server so Claude, Cursor, and Zed give accurate, version-pinned answers about every prop, method, and event in the library plus all 150+ demo sources as context.

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

A published llms.txt / llms-full.txt is also available for retrieval-augmented setups.

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 at github.com/sv-grid/sv-grid/issues.
• Need commercial or priority support? It is included with Enterprise. OSS projects under an OSI-approved license get an Enterprise OSS key for free.

---

Repository layout

This is a pnpm workspace monorepo:

packages/grid/            @svgrid/grid        - MIT data grid
packages/enterprise/      @svgrid/enterprise  - paid feature pack
packages/mcp/             @svgrid/mcp         - MCP server
packages/create-sv-grid/  @svgrid/create      - scaffolder
examples/                                     - 150+ live demos
website/                                      - svgrid.com source
docs/                                         - markdown docs

Requirements

• Node.js ≥ 18
• pnpm (the workspace pins pnpm@10.33.2 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:types         # type-check every package

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.
• 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.

What's not built yet

Honest list:

• Column spanning (colSpan on cell context). On the roadmap, large effort.
• Built-in row dragging across grids. Demos cover the in-grid case; cross-grid is not in the engine.
• Variable row height on the <SvGrid> render component. The headless virtualizer does it today.
• Engine-level formula language. There's a working in-grid formula engine in a demo, but it hasn't graduated into the package.
• 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.

License

This repository ships under mixed licensing. Only @svgrid/grid is open source - everything else is commercial.

Package	License	LICENSE file
packages/grid	MIT	LICENSE
packages/enterprise	Commercial	LICENSE
packages/mcp	Commercial	LICENSE
website	Proprietary	LICENSE

@svgrid/grid (MIT) can be used freely, including for commercial work. The Enterprise feature pack, the MCP server, 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.