# sv-grid

> The Svelte 5-native data grid. Headless engine + render component, AI-native, WAI-ARIA, virtualized to 100k rows.

Two npm packages: `sv-grid-community` (MIT, open source) and `sv-grid-pro` (commercial - export, import, pivot, AI helpers).

For the full text of every doc page concatenated: see [llms-full.txt](/llms-full.txt).
For a machine-readable manifest: see [docs.json](/docs.json).

## Overview

- [Changelog](https://svgrid.com/changelog): The user-facing log of what shipped. Format follows Keep a Changelog 1.1.0; versioning follows Semantic Versioning.
- [Getting Started with SvGrid](https://svgrid.com/getting-started-full): SvGrid is a modern, production-ready data grid for Svelte 5 - a headless core engine paired with a Svelte render component (<SvGrid>). It scales from a 10-row read-only table to a virtualized 100,0…
- [Getting started with SvGrid](https://svgrid.com/getting-started): SvGrid is a modern, production-ready data grid for Svelte 5 - a headless core engine paired with a Svelte render component (<SvGrid>). It scales from a 10-row read-only table to a virtualized 100,0…
- [Why headless?](https://svgrid.com/why-headless): SvGrid is **headless at the core**, with a fully-styled Svelte component shipped on top. That two-layer split is deliberate, and worth understanding before you reach for either.

## Compliance

- [Audit log integration](https://svgrid.com/compliance/audit-log): A typed, tamper-evident audit trail of every user action in the grid, in under 50 lines. Pattern works for any backend - your existing audit table, Datadog logs, an immutable ledger (DynamoDB with …
- [GDPR + data residency](https://svgrid.com/compliance/gdpr): sv-grid is **GDPR-neutral**: the library never transmits personal data, never stores it server-side, and never logs it. If your app is GDPR-compliant before adding sv-grid, adding sv-grid does not …
- [HIPAA posture](https://svgrid.com/compliance/hipaa): sv-grid is **HIPAA-neutral**: the library does not transmit, store, or process PHI on its own. If your app is HIPAA-compliant before adding sv-grid, adding sv-grid does not break that compliance.
- [Compliance](https://svgrid.com/compliance/index): sv-grid is a client-side UI library - **all data stays in the browser**, the library never makes a network call of its own, no telemetry phones home. The compliance story is therefore short, but be…
- [SOC 2 posture](https://svgrid.com/compliance/soc2): sv-grid is a UI library, not a service - so it cannot itself hold a SOC 2 report. But it can sit inside a SOC 2-audited application, and the controls below describe the line where the library's res…

## Getting started

- [1. Install](https://svgrid.com/getting-started/1-install): SvGrid is a single npm package. There is no peer dependency on a CSS framework - bring your own, or use the default theme that ships with the render component.
- [2. First grid in 60 seconds](https://svgrid.com/getting-started/2-first-grid): ```svelte <script lang="ts"> import { SvGrid, type ColumnDef } from 'sv-grid-community'
- [3. Data and columns](https://svgrid.com/getting-started/3-data-and-columns): SvGrid reads two arrays: data (your rows) and columns (the column-definition list). Everything else is opt-in.
- [4. Features](https://svgrid.com/getting-started/4-features): The grid engine is **feature-gated**. Out of the box you get the core row model (rows in their original order). To enable sorting, filtering, grouping, pagination, expansion, or selection, register…
- [5. Theme and density](https://svgrid.com/getting-started/5-theme-and-density): The render component (<SvGrid>) ships its own scoped styles. You re-theme it by declaring --sg-* CSS custom properties at any level above the grid - :root for the whole app, a wrapper <div> for one…
- [6. Going to production](https://svgrid.com/getting-started/6-going-to-production): You have a working grid. This page is the checklist that turns it into something you'd ship.
- [Starters & scaffolding](https://svgrid.com/getting-started/starters): The fastest way to a working SvGrid app. One command scaffolds a project with the grid already wired up - no copy-paste, no config archaeology.

## Help / topic pages

- [Accessibility](https://svgrid.com/help/accessibility): SvGrid implements the WAI-ARIA 1.2 grid pattern with full keyboard navigation and a screen-reader announcement layer. This page documents exactly what the grid does, where the responsibility line s…
- [Build an AI agent that drives the grid](https://svgrid.com/help/agents): This is the "AI-native data grid" story end-to-end. Three patterns, in order of how much agency you hand to the LLM:
- [AI Smart Paste](https://svgrid.com/help/ai-smart-paste): Drop any shape of contact / lead / row data into a text area - CSV, TSV, JSON, vCard, Markdown table, an email signature block, or a single line of prose - and the parser maps it into typed rows yo…
- [AI assistant - Pro](https://svgrid.com/help/ai): Bring a language model into your grid with four helpers that stay strictly model-agnostic: **natural-language filter**, **smart fill**, **summarise**, and **classify**. Ships in the paid **sv-grid-…
- [API reference](https://svgrid.com/help/api-reference): A flat index of every Stable export. Each entry links to the topic page that covers it in depth. For the formal TypeScript shapes, inspect the .d.ts files in node_modules/sv-grid-community/dist - t…
- [API stability & semver policy](https://svgrid.com/help/api-stability): The promise SvGrid makes to you about which exports you can lean on, how breaking changes are communicated, and how long deprecated APIs stick around.
- [Architecture overview](https://svgrid.com/help/architecture): A one-page mental model that should let you reason about every other topic in the docs. SvGrid is a strict three-layer system - if you know which layer a piece of code lives in, you know what it ca…
- [Performance benchmarks](https://svgrid.com/help/benchmarks): Headline numbers from the regression suite. Every figure below is from the same hardware + browser configuration, re-measured on each release; the script that produces them lives in packages/sv-gri…
- [Browser & runtime support](https://svgrid.com/help/browser-support): The shipping target matrix. If your environment isn't listed, assume unsupported until you've validated the linked feature surfaces below.
- [Integrated charts](https://svgrid.com/help/charts): SvGrid can chart its own data with no external charting library. Two pieces:
- [Real-time collaboration](https://svgrid.com/help/collaboration): Two people (or two AI agents) on the same grid: **presence** (who's here and where their cursor is) and **live edits** (a change in one client appears in every other). SvGrid packages this as a hea…
- [Columns hierarchy & manager](https://svgrid.com/help/columns-hierarchy): The pattern for grids with too many columns to fit on screen at once. A side-panel "column manager" exposes the column tree to the user: they pick what's visible, what gets collapsed into a one-cel…
- [Comparison: SvGrid vs AG Grid vs TanStack Table](https://svgrid.com/help/comparison): This is the page enterprise evaluators land on first. It is honest. The three projects solve overlapping problems and the right choice depends on your stack, your budget, and which constraints bite…
- [Conditional form schema](https://svgrid.com/help/conditional-form-schema): A pattern for declarative field-visibility and editability rules inside a grid. Instead of writing imperative if/else checks across many cell callbacks and editable props, you declare a **schema** …
- [Error reference](https://svgrid.com/help/errors): Every Error thrown by sv-grid-community or sv-grid-pro with the exact message text, the trigger condition, and the fix. If a runtime message you see isn't on this list, it's coming from your own co…
- [Data export and printing - Pro](https://svgrid.com/help/export): Export the grid to **Excel (xlsx)**, **PDF**, **CSV**, **TSV**, **HTML**, or open a printable view in a new window. Ships in the paid **sv-grid-pro** add-on; the Community build does not include th…
- [Glossary](https://svgrid.com/help/glossary): Terminology used across the docs and the source. Sorted A-Z. If a term is unclear in a topic page and isn't on this list, please file an issue.
- [Grouping & aggregation](https://svgrid.com/help/grouping-aggregation): Roll rows up by one or more columns and compute aggregates (sum, avg, count, min, max, custom) at each group level. Powered by columnGroupingFeature plus per-column aggregator config.
- [Internationalisation & RTL](https://svgrid.com/help/i18n-rtl): The grid is locale-agnostic by design: every text label is yours to translate, every formatted value goes through Intl, and right-to-left layout flips via standard CSS logical properties.
- [Data import - Pro](https://svgrid.com/help/import): The sister to data export and printing. Read an Excel file, CSV/TSV blob, or JSON array in the browser and produce a typed preview of every parsed row - including per-cell validation errors - befor…
- [SvGrid Help](https://svgrid.com/help/index): Topic-oriented documentation for SvGrid. Each page is a focused explanation of one feature with copy-paste code that runs against the shipping library - written for SvGrid, not translated from anot…
- [Use sv-grid docs as LLM context](https://svgrid.com/help/llm-grounding): This page is the "how do I make ChatGPT / Claude / Cursor write good sv-grid code?" guide. Three pre-built artefacts ship with the docs specifically so models can ground themselves in current, accu…
- [MCP server](https://svgrid.com/help/mcp-server): The sv-grid MCP server lets AI clients (Claude Desktop, Cursor, Zed, Continue, custom agents) query the documentation, scaffold column definitions, and preview exports - all grounded in the same sc…
- [Migrating from AG Grid to SvGrid](https://svgrid.com/help/migrating-from-ag-grid): If you tried AG Grid on a Svelte 5 project - via ag-grid-svelte, the old ag-grid-community/svelte, or a hand-rolled wrapper - you probably hit the same friction everyone hits: the bridge between AG…
- [Migrating from DevExtreme DataGrid (DevExpress)](https://svgrid.com/help/migrating-from-devextreme): DevExtreme DataGrid is a deep, commercial multi-framework grid from DevExpress (jQuery, React, Vue, Angular). Moving to SvGrid trades the commercial suite for a Svelte-5-native grid with an MIT cor…
- [Migrating from Glide Data Grid](https://svgrid.com/help/migrating-from-glide): Glide Data Grid is the canvas-rendered, ultra-high-performance choice for very wide datasets (100k+ rows, 100+ columns). Sv-grid renders to DOM with virtualization, which trades the absolute peak F…
- [Migrating from Grid.js](https://svgrid.com/help/migrating-from-gridjs): Grid.js is a small vanilla-JS table for search, sort, and pagination that you render into a DOM element. SvGrid does the same in a Svelte-5-native component and keeps going - virtualization, Excel-…
- [Migrating from Handsontable](https://svgrid.com/help/migrating-from-handsontable): Handsontable's mental model is "spreadsheet-in-a-page": every cell editable, formulas, copy/paste with the OS clipboard, frozen rows and columns. Sv-grid covers ~90% of the same surface; the port i…
- [Migrating from jqxGrid (jQWidgets)](https://svgrid.com/help/migrating-from-jqxgrid): jqxGrid and SvGrid come from the **same team**. jqxGrid is the mature, multi-framework grid (jQuery core with Angular, React, and Vue integrations); SvGrid is the Svelte-5-native member of the fami…
- [Migrating from Kendo UI Grid (Telerik)](https://svgrid.com/help/migrating-from-kendo-grid): Kendo UI Grid is the polished, commercial enterprise grid from Telerik / Progress, available for jQuery, React, Vue, and Angular. Moving to SvGrid trades the multi-framework commercial suite for a …
- [Migrating from MUI X DataGrid](https://svgrid.com/help/migrating-from-mui-x): MUI X DataGrid is the most common starting point for teams already on Material UI. It's a closed-source-Pro / open-source-Community split very similar to sv-grid's. The port is mostly mechanical.
- [Migrating from PrimeVue / PrimeNG / PrimeReact DataTable](https://svgrid.com/help/migrating-from-primevue-datatable): The Prime DataTable is the grid in the Prime UI suites for Vue, Angular, and React. Its columns are declared as <Column> children with field / header props - a shape that maps cleanly onto SvGrid's…
- [Migrating from React Data Grid (adazzle)](https://svgrid.com/help/migrating-from-react-data-grid): react-data-grid is a fast, Excel-like React grid with a clean column API. SvGrid mirrors its shape - virtualized DOM, typed columns, inline editing, custom cells - on Svelte 5 runes instead of Reac…
- [Migrating from Smart.Grid (Smart Web Components)](https://svgrid.com/help/migrating-from-smart-grid): Smart.Grid (htmlelements.com) and SvGrid come from the **same team**. Smart.Grid is a framework-agnostic custom element - it even works inside Svelte today - while SvGrid is the reactive, Svelte-5-…
- [Migrating from SVAR Svelte DataGrid](https://svgrid.com/help/migrating-from-svar-svelte-datagrid): SVAR Svelte DataGrid (wx-svelte-grid) is, like SvGrid, an actual Svelte-native grid rather than a wrapper, and both are MIT-licensed and free for commercial use. Because both are component-first wi…
- [Migrating from svelte-headless-table](https://svgrid.com/help/migrating-from-svelte-headless-table): svelte-headless-table popularised the headless-table pattern in the Svelte ecosystem. It is built on Svelte 4 stores and plugins (addSortBy, addColumnFilters, addPagination, ...), and it leaves the…
- [Migrating from Syncfusion Grid](https://svgrid.com/help/migrating-from-syncfusion): Syncfusion Grid is a comprehensive commercial grid across JavaScript, React, Vue, Angular, and Blazor, with a free community license for qualifying small teams. Moving to SvGrid trades the multi-fr…
- [Migrating from Tabulator](https://svgrid.com/help/migrating-from-tabulator): Tabulator is a feature-rich vanilla-JS table you instantiate against a DOM element and drive imperatively (table.setData(...), table.on('cellEdited', ...)). SvGrid covers a similar feature surface …
- [Migrating from TanStack Table](https://svgrid.com/help/migrating-from-tanstack-table): TanStack Table (formerly React Table v8) is the closest conceptual sibling to sv-grid - both are "headless data grid" libraries with explicit row-model pipelines. If you already think in createTabl…
- [Migrating from a UI-kit table (Flowbite / Skeleton / shadcn-svelte)](https://svgrid.com/help/migrating-from-ui-kit-tables): Flowbite-Svelte, Skeleton, and shadcn-svelte all ship a styled <Table> component. They are presentation components: they render the rows you pass and match your design tokens, but sorting, filterin…
- [Migrating from @vincjo/datatables](https://svgrid.com/help/migrating-from-vincjo-datatables): @vincjo/datatables is a small, ergonomic Svelte datatable helper: you wrap your data in a handler and it gives you reactive sorting, filtering, and pagination while you keep your own table markup. …
- [Missing features](https://svgrid.com/help/missing-features): This is the honest accounting of capabilities the help topics flagged as **not yet implemented** in the community build. Each entry has:
- [Mobile card view](https://svgrid.com/help/mobile-card-view): On wide screens the grid is the grid. Under a viewport breakpoint (by convention 720 px), the same $state array re-renders as touch-friendly cards. Tap a card to expand it into an edit panel; the w…
- [Observability](https://svgrid.com/help/observability): Production-grade visibility into a live grid: which rows users see, which cells they edit, what they filter for, how often the imperative API is invoked. Everything you need to wire into Sentry, Da…
- [Pivot tables - Pro](https://svgrid.com/help/pivot): A built-in pivot model that turns a flat data set into a row-axis tree, a nested column-axis header, and one aggregated cell per (row-path × col-path × measure) triple. Ships in **sv-grid-pro**.
- [Production deployment](https://svgrid.com/help/production): The checklist that turns "it works on my laptop" into "it ships". One page per concern; each concern is one paragraph + the code that matters. <div data-docs-demo="22-admin-template" data-height="5…
- [Real-time / streaming updates](https://svgrid.com/help/real-time): How to drive the grid from a WebSocket / SSE / poll. Three patterns ranked by the rate of change:
- [Recipes / Cookbook](https://svgrid.com/help/recipes): Quick patterns for the questions that come up over and over. Each recipe is paired with a live demo or a minimal snippet that runs against the shipping library.
- [Saved views & layout persistence](https://svgrid.com/help/saved-views): The pattern for "user changes sort + filters + columns; reopens the page next week; everything is where they left it." Powered entirely by your own state - the grid never writes to storage on its own.
- [Security & supply chain](https://svgrid.com/help/security): SvGrid is built for shipping into regulated environments where every dependency, every runtime call, and every network egress has to be justified before procurement signs. This page is the answer t…
- [Server-side data](https://svgrid.com/help/server-side-data): The patterns for moving sort, filter, group, and pagination off the client and onto your API. Three flavours, ranked by complexity:
- [Spreadsheet formulas](https://svgrid.com/help/spreadsheet-formulas): A minimal Excel-style formula engine that runs in the browser, with no dependencies. Cells can hold either a literal value (number, string, boolean) or a formula starting with =. When the formula r…
- [State maintenance](https://svgrid.com/help/state-maintenance): The pattern for snapshotting every dimension the user can change about the grid - sort, filters, group-by, column visibility + widths, pagination, expansion, selection, active cell - into a single …
- [Status bar](https://svgrid.com/help/status-bar): The status bar is the strip under the grid that shows live aggregates of the **selected cell range** - count, sum, average, min, max - the way Excel does at the bottom-right when you select a block…
- [Tailwind integration](https://svgrid.com/help/tailwind): SvGrid was built alongside Tailwind v4 (the gallery is the proof). The two compose cleanly because they have **non-overlapping concerns**: <div data-docs-demo="10-custom-cells-and-themes" data-heig…
- [Testing & Quality](https://svgrid.com/help/testing-and-quality): SvGrid ships with a comprehensive automated test suite. This page is the honest accounting of what we test, what we don't, and where coverage stands today.
- [Testing your grid](https://svgrid.com/help/testing): How to write tests that catch regressions before they ship. SvGrid is designed for both **fast unit tests** (Layer 2, the headless engine, runs in pure node) and **slow but accurate browser tests**…
- [Design tokens](https://svgrid.com/help/tokens): Every visual property the grid exposes for theming is a CSS custom property (--sg-*). Tokens cascade like any other CSS variable - override at :root, on a wrapper element, or per-grid; the closest …
- [Doc versioning](https://svgrid.com/help/versioning): How sv-grid documentation tracks multiple shipping major versions.
- [Web Components & Custom Elements](https://svgrid.com/help/web-components): Ship SvGrid as a framework-agnostic web component (custom element) and use the Svelte 5 data grid in React, Vue, Angular, or plain HTML - no Svelte required in the host app.

## Cells

- [Cell components](https://svgrid.com/help/cells/cell-components): For any cell whose content is more than a string, use cell: with renderSnippet or renderComponent. <div data-docs-demo="10-custom-cells-and-themes" data-height="540"></div>
- [Cell data types](https://svgrid.com/help/cells/cell-data-types): The editorType field on a column tags the column with a type. This drives three different behaviours: <div data-docs-demo="01-quick-start" data-height="540"></div>
- [Cell text selection](https://svgrid.com/help/cells/cell-text-selection): By default the grid has **cell-range selection** (drag across cells, range highlight, copy as TSV). Standard browser text-selection inside a cell is **not** the default - clicking-and-dragging acro…
- [Conditional formatting](https://svgrid.com/help/cells/conditional-formatting): Conditional formatting colors a cell by its value. SvGrid ships it as a declarative engine prop, conditionalFormats, so you describe the rules once and the grid paints every cell - no per-cell cell…
- [Expressions](https://svgrid.com/help/cells/expressions): SvGrid does not ship a formula / expression language for cells. Computed values are JavaScript - either via accessorFn or inside a cell callback. <div data-docs-demo="83-spreadsheet-formulas" data-…
- [Getting values](https://svgrid.com/help/cells/getting-values): You get cell values in three ways depending on context. <div data-docs-demo="04-selection-copy-paste" data-height="540"></div>
- [Highlighting changes](https://svgrid.com/help/cells/highlighting-changes): There is no built-in "flash on change" highlight. You build it with a diff against a frozen snapshot of the data. <div data-docs-demo="11-stock-market" data-height="540"></div>
- [Sparklines](https://svgrid.com/help/cells/sparklines): A sparkline is a tiny, word-sized chart drawn inside a single cell. SvGrid renders them as a first-class column type: set sparkline on a column whose value is an array of numbers and the grid paint…
- [Styling cells](https://svgrid.com/help/cells/styling-cells): Cells render as <td> and pick up the same CSS variable tokens as the rest of the grid. <div data-docs-demo="62-conditional-styling" data-height="540"></div>
- [Text formatting](https://svgrid.com/help/cells/text-formatting): The format field on a column produces locale-aware formatted strings without you writing a renderer. <div data-docs-demo="13-finances" data-height="540"></div>
- [Tooltips](https://svgrid.com/help/cells/tooltips): There is no built-in tooltip API on ColumnDef. Use the standard title attribute, an accessible <dialog>, or any popover library - wired through a custom cell renderer.
- [View refresh](https://svgrid.com/help/cells/view-refresh): The grid renders reactively - it does **not** have a refresh() method, because it doesn't need one. To make the grid re-display, change the data that drives it.

## Columns

- [Column definitions](https://svgrid.com/help/columns/column-definitions): A ColumnDef tells SvGrid how to read a value out of a row, how to render it, and which features apply to it. The grid below is built from a handful of ColumnDefs - look at the source to see how eac…
- [Column groups](https://svgrid.com/help/columns/column-groups): A column group is a ColumnDef whose columns array contains children. The parent renders a spanning header above its children. The pivot demo below shows three levels of grouped headers in action - …
- [Column headers - styling & height](https://svgrid.com/help/columns/column-headers): Headers are rendered as <th> inside a <thead> with role="row". Style them with regular CSS - there are no header-specific Svelte props. <div data-docs-demo="01-quick-start" data-height="540"></div>
- [Column moving (drag to reorder)](https://svgrid.com/help/columns/column-moving): There are two ways to move columns in sv-grid:
- [Column pinning](https://svgrid.com/help/columns/column-pinning): Pinning sticks a column to the **left** or **right** edge of the viewport so it does not scroll horizontally with the rest.
- [Column sizing](https://svgrid.com/help/columns/column-sizing): Each column has a pixel width. The default for all columns is the grid's columnWidth prop (default ~140 px); each column can override via its width field. <div data-docs-demo="63-column-layout-api"…
- [Column spanning](https://svgrid.com/help/columns/column-spanning): "Column spanning" lets a single body cell span across **multiple columns** - useful for full-width subtotals, group banner rows, or notes embedded inside a wide grid.
- [Column state](https://svgrid.com/help/columns/column-state): "Column state" is the bag of per-column settings that change at runtime: visibility, width, pinning, sort, filter. SvGrid keeps these as separate state slices inside the grid instance. <div data-do…
- [Custom header components](https://svgrid.com/help/columns/custom-header-components): The header field on a ColumnDef accepts a function that returns either a renderSnippet(...) or renderComponent(...). The function receives a HeaderContext so it can access the column, header, and g…
- [Columns tool panel](https://svgrid.com/help/columns/tool-panel): The tool panel is the docked sidebar - standard in enterprise grids - for managing columns without hunting through a right-click menu. Turn it on with the toolPanel prop:
- [Updating column definitions](https://svgrid.com/help/columns/updating-definitions): There are two ways to change columns after the grid has mounted:

## Editing

- [Edit components](https://svgrid.com/help/editing/edit-components): The grid ships with five inline editors. Each is selected by the column's editorType: <div data-docs-demo="66-custom-cell-editors" data-height="540"></div>
- [Full-row editing](https://svgrid.com/help/editing/full-row): "Full-row editing" means the user opens an entire row for edit (every editable cell becomes an editor simultaneously) and commits all changes at once. <div data-docs-demo="40-forms-master-detail" d…
- [Editing - overview](https://svgrid.com/help/editing/overview): Inline editing is a single prop on <SvGrid>. Try it - double-click any cell, type to replace, hit Enter to commit. Tab moves to the next editable cell:
- [Parsing values](https://svgrid.com/help/editing/parsing-values): When the user commits an edit, the editor's DOM value (a string for text / number / date inputs, a boolean for checkboxes) is parsed by parseEditorValue into the canonical value for the column's ty…
- [Provided cell editors](https://svgrid.com/help/editing/provided-editors): The grid ships nine built-in editors, selected via editorType on the column definition. Each editor renders inside the cell while editing and falls back to the default text render (or your cell sni…
- [Saving values](https://svgrid.com/help/editing/saving-values): When the user commits an edit, the new value is written into the grid's **internal data copy**. The grid does **not** mutate the array you passed in via the data prop - it keeps its own working cop…
- [Start / stop editing](https://svgrid.com/help/editing/start-stop-editing): The cell must be **focused** (the grid's active cell). Click any cell or use the arrow keys to set focus.
- [Undo / redo](https://svgrid.com/help/editing/undo-redo): There is **no built-in undo/redo stack** inside <SvGrid>. The grid emits no per-edit event for an external stack to subscribe to, so undo/redo has to be built on top of the data-snapshot approach. …
- [Validation](https://svgrid.com/help/editing/validation): There is no validate(value) callback on ColumnDef today. Validation happens by intercepting committed edits and either accepting or reverting them.

## Filtering

- [Applying filters](https://svgrid.com/help/filtering/applying-filters): "Applying" a filter means running it against the data. SvGrid applies filters **eagerly** by default: every keystroke updates the row model and the visible rows (with a 150ms debounce inside the co…
- [Custom column filters](https://svgrid.com/help/filtering/custom-column-filters): When the built-in operators and the set-filter pattern are not enough, take over the filter pipeline. <div data-docs-demo="03-excel-filters" data-height="540"></div>
- [Date filter](https://svgrid.com/help/filtering/date-filter): A column with editorType: 'date' (or 'datetime') gets the **date** filter operator set: equals, lessThan, greaterThan, **between**, isBlank. <div data-docs-demo="64-filter-between-operator" data-he…
- [Filter API](https://svgrid.com/help/filtering/filter-api): Two surfaces - pick based on whether the caller is inside or outside the component that owns the grid state. <div data-docs-demo="64-filter-between-operator" data-height="540"></div>
- [Filter conditions](https://svgrid.com/help/filtering/filter-conditions): A "filter condition" is a (column, operator, value) triple. The grid stores filter conditions in state.columnFilters. <div data-docs-demo="03-excel-filters" data-height="540"></div>
- [Floating filters](https://svgrid.com/help/filtering/floating-filters): "Floating filters" are the always-visible filter inputs that sit **between** the header row and the body - same idea as a filter row, but matched per-operator to the underlying column menu. <div da…
- [Number filter](https://svgrid.com/help/filtering/number-filter): A column with editorType: 'number' gets the **number** filter operator set: equals, greaterThan, lessThan, **between**, isBlank. The default operator is equals. <div data-docs-demo="64-filter-betwe…
- [Filtering - overview](https://svgrid.com/help/filtering/overview): Click any column header's filter icon to open the operator + value popover; numeric and date columns range-bucket their distinct values so the menu stays usable on big datasets:
- [Set filter](https://svgrid.com/help/filtering/set-filter): A "set filter" (a.k.a. value filter, list filter) shows a checklist of all distinct values in a column and lets the user pick which to include. It's what you reach for to filter status to "active O…
- [Text filter](https://svgrid.com/help/filtering/text-filter): A column with no editorType (or editorType: 'text') gets the **text** filter operator set: contains, equals, startsWith, isBlank. The default operator is contains. <div data-docs-demo="69-highlight…

## help/grouping

- [Group aggregators](https://svgrid.com/help/grouping/aggregators): When grouping is active, each group row can show a rolled-up value per column - the sum of revenue, the average score, the count of deals. SvGrid does this declaratively: set aggregate on a column …

## Rows

- [Accessing rows](https://svgrid.com/help/rows/accessing-rows): You can read the grid's current rows in three ways. <div data-docs-demo="04-selection-copy-paste" data-height="540"></div>
- [Full-width rows](https://svgrid.com/help/rows/full-width-rows): "Full-width rows" are rows whose content takes the entire grid width instead of being cell-by-cell - useful for inline editors, banner ads, section dividers, and detail-row expansions. <div data-do…
- [Row data](https://svgrid.com/help/rows/row-data): Row data is whatever you pass to <SvGrid data={...}>. It is a ReadonlyArray<TData> where TData is your row type. Any shape works; the grid does not require a base class or interface. <div data-docs…
- [Row dragging](https://svgrid.com/help/rows/row-dragging): Drag-to-reorder for rows is a common interaction (kanban-like reordering, moving items between two grids, dragging rows out to an external drop zone). <div data-docs-demo="23-bulk-actions" data-hei…
- [Row height](https://svgrid.com/help/rows/row-height): Row height is a single integer in pixels. <div data-docs-demo="10-custom-cells-and-themes" data-height="540"></div>
- [Row pagination](https://svgrid.com/help/rows/row-pagination): Pagination is opt-in. Register the feature, register the row model, then either turn it on with showPagination or drive its state from outside. <div data-docs-demo="02-sort-filter-paginate" data-he…
- [Row pinning (top / bottom)](https://svgrid.com/help/rows/row-pinning): Pin specific rows to the **top** or **bottom** of the grid so they stay visible while the rest of the data scrolls. Typical use cases:
- [Row sorting](https://svgrid.com/help/rows/row-sorting): Sorting is a feature you opt into. Try it live - click any column header to cycle none → asc → desc → none; shift-click adds the column to the sort key list (multi-sort):
- [Row spanning](https://svgrid.com/help/rows/row-spanning): "Row spanning" lets one cell's content cover **multiple rows**, the way a merged cell does in a spreadsheet.
- [Styling rows](https://svgrid.com/help/rows/styling-rows): Rows are <tr role="row"> elements inside the grid table. Style them with plain CSS. <div data-docs-demo="62-conditional-styling" data-height="540"></div>
- [Transactions](https://svgrid.com/help/rows/transactions): api.applyTransaction({ add, update, remove }) applies a batch of row mutations in a **single** data update - one re-render for the whole batch, not one per row. It's the path to use for high-freque…
- [Tree rows (expand / collapse)](https://svgrid.com/help/rows/tree-rows): SvGrid does not have a treeData prop. Tree-shaped data renders through the same data + columns pipeline as any other grid, with the tree behaviour living in *your* derived-state code. This is on pu…

## help/server

- [Server-Side Row Model (SSRM)](https://svgrid.com/help/server/server-row-model): When the data lives on the server - millions of rows in a database - the grid should hold only the page on screen and push sorting, filtering, and paging to the backend. SvGrid packages this as **o…

## help/state

- [Named views](https://svgrid.com/help/state/named-views): A "view" is a saved snapshot of the grid's state - sort, filters, column order/width/visibility, page, grouping. Named views let a user save the layout they like and switch between them. SvGrid shi…

## Pro tier

- [Pro evaluation](https://svgrid.com/pro/evaluation): The sv-grid-pro package is soft-gated; you can evaluate every feature in production-equivalent code paths without contacting sales. This page is the playbook.
- [Pro licensing](https://svgrid.com/pro/licensing): The sv-grid-pro package is **soft-gated**: every feature runs without a key, with a small unlicensed-build watermark in the bottom-right corner of the grid + a one-time console nudge. Set a key onc…
- [Pro feature pack](https://svgrid.com/pro/README): sv-grid-pro is a paid add-on for sv-grid-community. It bolts onto the same <SvGrid> you already have and adds four feature areas: data export, data import, an AI assistant, and pivot tables.
- [Pro support](https://svgrid.com/pro/support): What you get on each tier, what response time to expect, how to escalate.

## Recipes / cookbook

- [Auto-save edits with debounce](https://svgrid.com/recipes/autosave-with-debounce): Persist every cell edit to the server, debounced so a fast typer generates one save, not twenty.
- [Barcode cells in a Svelte data grid (EAN-13)](https://svgrid.com/recipes/barcode-cells): Render a real, scannable EAN-13 barcode in every row of your Svelte data grid - drawn as crisp SVG with no canvas, no eval, and no third-party dependency. This is the retail, warehouse, and invento…
- [Benchmark harness](https://svgrid.com/recipes/benchmark-harness): You're answering:
- [Between-operator filters for date ranges](https://svgrid.com/recipes/between-date-filter): "From / to" date range as one filter, not two.
- [Build your own feature plugin](https://svgrid.com/recipes/build-a-feature-plugin): You want to inject behavior that applies to *every* row or column - a computed accent class, an audit fingerprint, an inline diff badge, a per-row policy gate - without forking the grid component o…
- [Bulk-edit selected rows](https://svgrid.com/recipes/bulk-edit-selected-rows): Goal: the user selects N rows, opens a toolbar, picks a field + value, and **every** selected row updates in one click. Standard back-office workflow for status changes, reassignments, tag applicat…
- [Cell renderer patterns](https://svgrid.com/recipes/cell-renderer-patterns): Every supported shape for the cell: slot on a ColumnDef, with the trade-offs for each.
- [Chart.js sync from grid filter state](https://svgrid.com/recipes/chartjs-sync): A chart that re-renders from api.getDisplayedRows() on every filter / sort change.
- [Conditional row coloring](https://svgrid.com/recipes/conditional-row-coloring): rowClass returns a class map per row; CSS does the rest.
- [Cursor-based infinite scroll](https://svgrid.com/recipes/cursor-based-infinite-scroll): Sparse-load a 100k-row audit log without paginating. Pattern: debounce on scroll, fetch the next chunk by cursor, splice into $state.
- [Custom filter functions](https://svgrid.com/recipes/custom-filter-functions): You need any of:
- [Dependent dropdowns (cascading editors)](https://svgrid.com/recipes/dependent-dropdowns): Country → State → City. Editing one level resets downstream levels; each cell's dropdown options come from the row's upstream value.
- [Drag-drop columns to reorder](https://svgrid.com/recipes/drag-drop-columns): Re-order columns by dragging them in a side panel; live grid reflects the new order.
- [External search box with highlighted matches](https://svgrid.com/recipes/external-search): A search input outside the grid filters the visible rows AND highlights matched substrings inline.
- [Form library bridge](https://svgrid.com/recipes/form-library-bridge): You want the same row to be editable two ways:
- [Grid state inspector](https://svgrid.com/recipes/grid-state-inspector): You're stuck on one of:
- [Heatmap-tinted numeric cells](https://svgrid.com/recipes/heatmap-cells): Bucket cell values into red/amber/neutral/green tints based on per-column min/max.
- [Recipes / cookbook](https://svgrid.com/recipes/index): Copy-paste patterns for sv-grid. Every recipe is a complete, runnable snippet you can drop into your app. Each pairs with a live demo in the gallery.
- [Kanban board over the same `$state`](https://svgrid.com/recipes/kanban-from-grid-data): One <SvGrid> with columns = lanes, rows pivoted by status. HTML5 drag-drop moves cards between lanes.
- [Lazy-load expand on demand](https://svgrid.com/recipes/lazy-load-expand): Tree rows where children are fetched only when the user expands their parent.
- [Loading data from REST + GraphQL](https://svgrid.com/recipes/loading-data): Three shapes. Pick the one that matches your back-end; the grid doesn't care which.
- [1 million rows with virtualization](https://svgrid.com/recipes/million-rows): Row + column virtualization configured for very wide / very tall data.
- [Mobile card view with grid-on-desktop](https://svgrid.com/recipes/mobile-card-pivot): Same data, two layouts. Auto-pivot below 720px or force one via a toolbar switch.
- [Multi-sheet xlsx export](https://svgrid.com/recipes/multi-sheet-export): One workbook, multiple tabs - one per group / region / period.
- [NL filter wired to your LLM](https://svgrid.com/recipes/nl-filter): "show last quarter > $10k sorted by date" - one natural-language input drives setFilter + setSort.
- [Persist column layout to URL](https://svgrid.com/recipes/persist-column-layout-to-url): Goal: when a user sorts, filters, or pages the grid, the URL updates so that copy-pasting the link gives the recipient the same view. On reload the grid restores from the URL.
- [Pin first column on horizontal scroll](https://svgrid.com/recipes/pin-first-column): Wide grids where the row-label column must stay visible while the data scrolls horizontally.
- [Profiling with a live FPS HUD](https://svgrid.com/recipes/profiling-with-fps-hud): You're trying to figure out:
- [Role-based editable columns](https://svgrid.com/recipes/role-based-editing): Different user roles can edit different cells; the grid hides editors per-row via the editable callback.
- [Saved filter sets](https://svgrid.com/recipes/saved-filter-sets): Name and recall named filter combinations; round-trip via api.getFilters / setFilter.
- [Saved views (localStorage)](https://svgrid.com/recipes/saved-views): Per-user grid layouts. Each "view" snapshots column widths, pinning, sort, filter, page index, and (optionally) grouping. Switching views restores the snapshot.
- [Server-side filter with TanStack Query](https://svgrid.com/recipes/server-side-filter-with-tanstack-query): Goal: drive the grid from a real API. Sort + filter + page round-trip to the server; the response goes into TanStack Query so we get **caching, deduplication, request cancellation, retries, optimis…
- [Smart paste: CSV / TSV / free-form → typed rows](https://svgrid.com/recipes/smart-paste): Paste anything; the assistant infers columns and previews typed rows for accept/update/skip.
- [Sparkline cell renderer](https://svgrid.com/recipes/sparkline-cells): In-cell mini-charts of a value series, rendered via inline SVG.
- [Submit-time validation with error summary](https://svgrid.com/recipes/submit-time-validation): Different from per-keystroke validation. The user edits freely; on **Submit**, a row-level validator runs and highlights every invalid cell with an aria-live summary panel.
- [Testing your grid](https://svgrid.com/recipes/testing-your-grid): Three strategies for testing a grid in your app. Pick the strategy that matches the question you're answering.
- [Theme-matched xlsx export](https://svgrid.com/recipes/theme-matched-export): Excel file colours follow the same --sg-* tokens the grid renders with.
- [Theme tokens for Ant / MUI / Fluent / shadcn](https://svgrid.com/recipes/theme-presets): Map your design system's tokens to --sg-* and the grid re-skins.
- [Two-grid master / detail](https://svgrid.com/recipes/two-grid-master-detail): Goal: one grid shows the **master** (parents - orders, customers, projects, …), a second grid below shows the **detail** for whichever row is selected (line items, contacts, tasks, …).
- [Undo / redo for grid edits](https://svgrid.com/recipes/undo-redo-edits): Maintain a history stack of cell edits; Ctrl+Z / Ctrl+Y replay backwards / forwards.
- [Use SvGrid from React (custom-element bridge)](https://svgrid.com/recipes/use-svgrid-from-react): SvGrid is Svelte-5-native, but you can drop it into a React app via a thin **custom element** wrapper. The wrapper publishes one <sv-grid-element> tag, React renders it like any other DOM element, …
- [WebSocket streaming with backpressure](https://svgrid.com/recipes/websocket-streaming): Live tick stream with pause / resume / disconnect-and-replay and per-tick delta merge.

## API reference

- [Auto-generated reference](https://svgrid.com/reference/auto/index): _Generated from the published TypeScript sources. Do not edit by hand - rerun node tools/build-reference.mjs._
- [`sv-grid-community` · `core.ts`](https://svgrid.com/reference/auto/sv-grid-community-core): Auto-generated. Source: packages\sv-grid-community\src\core.ts.
- [`sv-grid-community` · `svgrid-wrapper.types.ts`](https://svgrid.com/reference/auto/sv-grid-community-svgrid-wrapper.types): Auto-generated. Source: packages\sv-grid-community\src\svgrid-wrapper.types.ts.
- [`sv-grid-pro` · `ai.ts`](https://svgrid.com/reference/auto/sv-grid-pro-ai): Auto-generated. Source: packages\sv-grid-pro\src\ai.ts.
- [`sv-grid-pro` · `export.ts`](https://svgrid.com/reference/auto/sv-grid-pro-export): Auto-generated. Source: packages\sv-grid-pro\src\export.ts.
- [`sv-grid-pro` · `import.ts`](https://svgrid.com/reference/auto/sv-grid-pro-import): Auto-generated. Source: packages\sv-grid-pro\src\import.ts.
- [`sv-grid-pro` · `install.ts`](https://svgrid.com/reference/auto/sv-grid-pro-install): Auto-generated. Source: packages\sv-grid-pro\src\install.ts.
- [`sv-grid-pro` · `pivot.ts`](https://svgrid.com/reference/auto/sv-grid-pro-pivot): Auto-generated. Source: packages\sv-grid-pro\src\pivot.ts.
- [Bundle size](https://svgrid.com/reference/bundle-size): What each feature costs in the final bundle, how to reproduce the numbers on your branch, and what to do if size matters.
- [`ColumnDef` reference](https://svgrid.com/reference/ColumnDef): A column definition is the contract between the grid and one column of data. Pass an array of these as the columns prop to <SvGrid>.
- [Features reference](https://svgrid.com/reference/features): A "feature" is a small bundle of state + helpers the grid engine checks for when wiring its row-model pipeline. Register only what you use - each feature ships about 1-2 KB gzipped and adds a small…
- [Headless engine](https://svgrid.com/reference/headless-engine): createSvGrid(options) returns a table object with:
- [API reference](https://svgrid.com/reference/index): The exhaustive surface of the published packages. For walkthroughs + patterns see Help; for first contact see Getting started.
- [Pro reference](https://svgrid.com/reference/pro): Everything that sv-grid-pro adds on top of the Community surface. Install + license: see Pro feature pack.
- [`<SvGrid>` reference](https://svgrid.com/reference/SvGrid): The render component. One <SvGrid> element per grid instance.
- [`SvGridApi` reference](https://svgrid.com/reference/SvGridApi): The imperative API exposed via <SvGrid onApiReady={(api) => ...}>. Use it for data, column, filter, sort, group, selection, and visibility operations from outside the component.