{ "markdown": "

\n \"SvGrid\"\n

\n\n# SvGrid\n\n[![npm version](https://img.shields.io/npm/v/%40svgrid%2Fgrid.svg?label=%40svgrid%2Fgrid)](https://www.npmjs.com/package/@svgrid/grid)\n[![npm downloads](https://img.shields.io/npm/dm/%40svgrid%2Fgrid.svg)](https://www.npmjs.com/package/@svgrid/grid)\n[![CI](https://github.com/sv-grid/sv-grid/actions/workflows/test.yml/badge.svg)](https://github.com/sv-grid/sv-grid/actions/workflows/test.yml)\n[![MIT License](https://img.shields.io/badge/license-MIT-brightgreen.svg)](packages/grid/LICENSE)\n[![TypeScript](https://img.shields.io/badge/types-included-blue.svg)](https://www.npmjs.com/package/@svgrid/grid)\n[![Svelte 5](https://img.shields.io/badge/svelte-5-ff3e00.svg)](https://svelte.dev)\n\n> The Svelte 5 native data grid. **Headless-first. Render-ready.**\n\n**SvGrid** is a Svelte 5 data grid and data table built from the first line for runes, not a React grid\nwrapped in a Svelte shim. It does virtual scrolling over 100k+ rows, Excel-style filtering, inline\nediting, row grouping, tree data, pivot, and server-side data, and it ships both a headless engine you\ncompose yourself and a drop-in `` component. Open source under MIT, TypeScript-first, and\nusable in SvelteKit with SSR.\n\n

\n \"A\n\n\"1m-rows\"\n\n

\n\n**Quick links:** [Website](https://svgrid.com) · [Docs](https://svgrid.com/docs/) · [375 Demos](https://svgrid.com/demos/) · [Pricing](https://svgrid.com/pricing/) · [Roadmap](https://svgrid.com/roadmap/) · [Blog](https://svgrid.com/blog/) · [Releases](https://github.com/sv-grid/sv-grid/releases) · [npm](https://www.npmjs.com/package/@svgrid/grid)\n\nWriting SvGrid with an AI assistant? It ships an MCP server that carries the real API surface and\n**checks your agent's code against it** before you see it. [Details below](#ai-native).\n\n---\n\n## Install\n\nScaffold a working Vite + Svelte 5 app with SvGrid wired up in one command:\n\n```bash\nnpm create @svgrid@latest\n```\n\nOr add it to an existing app:\n\n```bash\nnpm install @svgrid/grid\n```\n\nIn a project that already uses the [Svelte CLI](https://svelte.dev/docs/cli), the add-on\nwires it up and can drop in a working demo grid:\n\n```bash\nnpx sv add @svgrid\n```\n\n## The 30-second example\n\n```svelte\n\n\n\n```\n\nThat is a real, working, accessible table. Sorting, filtering, virtualization, cell selection, and\ninline editing all wire up the moment you turn on the matching prop.\n\n\"03-inline-edit\"\n\n## See it running\n\nEvery demo below opens in the browser, and each one has an **Edit in StackBlitz** button that turns\nit into a live, editable Vite + Svelte 5 project. Nothing to install to try any of this.\n\n| | | |\n|:--:|:--:|:--:|\n| [\"Trading](https://svgrid.com/demos/00-trading-desk/) | [\"1](https://svgrid.com/demos/78-million-rows/) | [\"Spreadsheet](https://svgrid.com/demos/83-spreadsheet-formulas/) |\n| **[Trading desk](https://svgrid.com/demos/00-trading-desk/)**
10,000 securities on a 500 ms feed | **[1 million rows](https://svgrid.com/demos/78-million-rows/)**
sort, filter, group and edit, all on | **[Spreadsheet + formulas](https://svgrid.com/demos/83-spreadsheet-formulas/)**
formula cells in a real grid |\n| [\"Kanban](https://svgrid.com/demos/343-kanban-board/) | [\"Scheduler](https://svgrid.com/demos/363-scheduler-intro/) | [\"Cell](https://svgrid.com/demos/80-cell-types-showcase/) |\n| **[Kanban board](https://svgrid.com/demos/343-kanban-board/)**
the same grid, board mode | **[Scheduler](https://svgrid.com/demos/363-scheduler-intro/)**
calendar views off the same data | **[Cell types](https://svgrid.com/demos/80-cell-types-showcase/)**
every editor in one grid |\n\nAll [375 demos](https://svgrid.com/demos/) are browsable by category.\n\n## Shipped with it\n\n> \"We were looking for an Excel-like library using SvelteKit. Then I explored your library a lot,\n> mostly everything about SvGrid: cell selection, grabbing cells, updating values in cells. So we\n> used it for an accounting application. It was so easy to integrate. We even built our custom\n> theme, by updating the svgrid.css file which includes all the classes. **We found no issues yet,\n> everything just worked for us.**\"\n>\n> \"\" **[Sikandar Bhide](https://github.com/SikandarJODD)** - built an accounting app on SvelteKit\n\n## Quick facts\n\n| | |\n|---|---|\n| **Package** | `@svgrid/grid` |\n| **License** | MIT, free for commercial use |\n| **Requires** | `svelte@^5` (peer dependency), Node 16+ |\n| **Bundle (gzip)** | ~2.5 KB headless core, ~83 KB full `` + ~9.5 KB CSS |\n| **Types** | Bundled, no `@types/` package needed |\n| **SSR** | Server-renders header + a viewport window of rows; verified in CI by `pnpm ssr:check` |\n| **Demos** | 375 at [svgrid.com/demos](https://svgrid.com/demos/) |\n| **AI grounding** | [MCP server](https://www.npmjs.com/package/@svgrid/mcp), [llms.txt](https://svgrid.com/llms.txt), [Agent Skill](https://svgrid.com/docs/help/skill/) |\n\nRe-derive the numbers yourself: `pnpm size` and `pnpm demos:count`.\n\n## What's in the box\n\n- **Virtual scrolling.** Row + column windowing; 100k x 100 stays smooth, and there's a 1M-row demo.\n- **Filtering.** Excel-style filter menu, inline filter row, locale-aware text matching, set / value-list filter, between operator on numbers and dates.\n- **Editing.** 15 built-in `editorType`s (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. `registerBuiltinEditors()` adds `otp`, `duration` and `richtext`; `` paints sanitized HTML / Markdown in a cell; and a `cellEditor` snippet slot takes anything else.\n- **Selection.** Cell-range click+drag and Shift+arrows, copy/paste as TSV, Excel-style fill handle, drag a selected range by its border to move it (`moveCells`), edge auto-scroll while dragging, row selection.\n- **Views.** Row grouping with aggregation, tree data, master/detail, full-width detail rows, spreadsheet mode with formulas, plus Kanban board and scheduler/calendar views.\n- **Layout.** Row + column pinning, sticky header + first column, header drag-to-reorder, opt-in drag handles for row and column sizing (`rowResize` / `columnResize`, each loaded only when enabled), keyboard-accessible column sizing, responsive mode for mobile.\n- **Operations.** Find in grid (Ctrl+F), undo / redo (Ctrl+Z), transaction API, optimistic updates, server-side row model with sort / filter / group pushdown.\n- **AI helpers, free.** Natural-language filter, smart fill, summarize, classify, anomaly detection, and \"chart this\". Model-agnostic: you register one provider, nothing is bundled.\n- **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.\n- **Accessibility and i18n.** WAI-ARIA grid roles, full keyboard navigation, RTL, high-contrast theme, and every string in the grid chrome overridable through `localeText`.\n- **Production concerns.** TypeScript types, CSP / Trusted-Types safe rendering, SSR-friendly, themeable via `--sg-*` CSS custom properties.\n\nThe MIT community core has zero feature gating: no license key, no watermark, no row-count cap.\n\n## Which package do I need?\n\n| You want to | Install | License |\n|---|---|---|\n| A data grid in a Svelte 5 / SvelteKit app | `@svgrid/grid` | MIT |\n| Excel / PDF export, import, pivot tables, print, advanced filter builder, no-code alert rules, selection action bar, record detail + bulk edit, Kanban + scheduler renderers | `+ @svgrid/enterprise` | Commercial |\n| The grid in React, Vue, Angular, or plain HTML | `@svgrid/grid-wc` | MIT |\n| To copy one UI component into your app, shadcn-style | `npx @svgrid/ui add ` | MIT |\n| Accurate SvGrid answers from Claude / Cursor / Zed | `@svgrid/mcp` | MIT |\n| A generated CRUD app from your database schema | `@svgrid/studio` | Commercial |\n| To port an existing `svelte-headless-table` app | `npx @svgrid/migrate` | MIT |\n| To add the grid via the Svelte CLI | `npx sv add @svgrid` | MIT |\n\nOSS projects under an [OSI-approved license](https://opensource.org/licenses) get the Enterprise pack\nfree. See [Pricing](https://svgrid.com/pricing/).\n\n## Coming from another grid?\n\n| | SvGrid | AG Grid Community | TanStack Table |\n|---|---|---|---|\n| **Svelte 5 runes native** | Yes | No, JS core + wrapper | Adapter only |\n| **Ships a renderer** | Yes, plus headless | Yes | No, headless only |\n| **Bundle (gzip)** | ~2.5 KB headless / ~83 KB full | ~340 KB | ~12-14 KB |\n| **Virtualization built in** | Yes | Yes | Bring your own |\n| **Master/detail, tree, range selection** | Free | Enterprise only | Build it yourself |\n| **License** | MIT core, commercial pack | MIT core, commercial pack | MIT |\n\nMulti-framework teams are better served by AG Grid or TanStack Table; SvGrid is deliberately\nSvelte-first. Full detail and migration guides:\n[SvGrid vs AG Grid vs TanStack Table](https://svgrid.com/docs/help/comparison/) ·\n[Migrating from AG Grid](https://svgrid.com/docs/help/migrating-from-ag-grid/) ·\n[Migrating from Handsontable](https://svgrid.com/docs/help/migrating-from-handsontable/)\n\nUsing SvelteKit? [SvGrid with SvelteKit](https://svgrid.com/docs/getting-started/sveltekit/) covers server loads, URL-driven sorting, form actions and what actually server-renders.\n\n## AI-native\n\nSvGrid is built to be written *by* AI as well as used with it. Three grounding surfaces ship with the\nproject so assistants cite real props, methods, and events instead of inventing them.\n\n**MCP server** for Claude Desktop, Cursor, and Zed:\n\n```json\n{\n \"mcpServers\": {\n \"svgrid\": {\n \"command\": \"npx\",\n \"args\": [\"-y\", \"@svgrid/mcp\"]\n }\n }\n}\n```\n\nClaude Code users get both in one plugin - the house-style skill plus the\nserver whose `svgrid_check_code` tool verifies each file against the real API\nsurface before you see it:\n\n```\n/plugin marketplace add sv-grid/sv-grid\n/plugin install svgrid@svgrid\n```\n\nOr wire them up separately, with no install at all on the server side:\n\n```bash\nclaude mcp add --transport http svgrid https://mcp.svgrid.com/mcp\nnpx skills add sv-grid/sv-grid # always-on house-style rules\n```\n\n**Retrieval files** for RAG and custom agents: [llms.txt](https://svgrid.com/llms.txt) (index) and\n[llms-full.txt](https://svgrid.com/llms-full.txt) (every doc page concatenated). See\n[Use sv-grid docs as LLM context](https://svgrid.com/docs/help/llm-grounding/).\n\n\"svgridmcp\"\n\n\n## Frequently asked questions\n\n### Does SvGrid work with SvelteKit and SSR?\n\nYes. 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\nstatic builds. See [going to production](https://svgrid.com/docs/getting-started/6-going-to-production/).\n\n### Is SvGrid free for commercial use?\n\nYes. `@svgrid/grid` is MIT, with no license key, no watermark, and no row-count cap. Only the optional\n`@svgrid/enterprise` pack (export, import, pivot, print) is paid.\n\n### Does it support Svelte 4?\n\nNo. SvGrid is Svelte 5 only by design. It uses runes and snippets rather than Svelte 4 stores, which is\nwhat lets it skip the abstraction layer a cross-version grid would need.\n\n### How many rows can it handle?\n\n100k rows x 100 columns scroll smoothly on the client thanks to row and column virtualization, and only\nthe visible window is ever in the DOM. Past that, use the server-side row model, which pushes sorting,\nfiltering, and grouping to your backend.\n\n### How big is the bundle?\n\nAbout 2.5 KB gzipped for the headless core and about 83 KB for the full `` render component, plus\n9.5 KB of CSS, with Svelte excluded as a peer dependency. Charts, date/time editors, menus, and export add\nanother ~94 KB, and each of those chunks is fetched only once the feature that needs it is actually\nused - `rowResize` and `columnResize` default to off and never request their module, and a grid that\nnever opens a menu never loads one. Run `pnpm size` to re-measure.\n\n### Do I need Tailwind?\n\nNo. The render component ships its own scoped styles and re-themes through `--sg-*` CSS custom\nproperties. Tailwind is supported if you use it; see the\n[Tailwind guide](https://svgrid.com/docs/help/tailwind/).\n\n### Can I use it from React, Vue, or Angular?\n\nYes, through [`@svgrid/grid-wc`](https://www.npmjs.com/package/@svgrid/grid-wc), which wraps the grid as\na `` custom element with no build step required.\n\n### Is it accessible?\n\nIt implements the WAI-ARIA 1.2 grid pattern with full keyboard navigation, a screen-reader announcement\nlayer, RTL support, and a high-contrast theme. See\n[accessibility](https://svgrid.com/docs/help/accessibility/) for exactly where the responsibility line sits.\n\n### How do I get AI assistants to write correct SvGrid code?\n\nPoint them at the MCP server, or feed them `llms.txt`. Both are covered in the\n[AI-native](#ai-native) section above.\n\n## Who's behind it\n\nSvGrid is built by [jQWidgets](https://www.jqwidgets.com), the team behind jqwidgets.com and\n[htmlelements.com](https://www.htmlelements.com). We've been shipping UI components since 2011 to 5,000+\ncompanies including Samsung, Boeing, NVIDIA, Microsoft, Nokia, and Intel. SvGrid is our Svelte 5 native\neffort.\n\n## Support\n\nSvGrid is open core: the MIT `@svgrid/grid` is free for any use, and the project is funded by Enterprise\nlicenses, not donations.\n\n- **Found a bug or have a question?** [Open an issue](https://github.com/sv-grid/sv-grid/issues).\n- **Want to contribute?** See [CONTRIBUTING.md](CONTRIBUTING.md).\n- **Security issue?** See [SECURITY.md](SECURITY.md).\n- **Need commercial or priority support?** It is included with [Enterprise](https://svgrid.com/pricing/).\n\n## What's not built yet\n\nHonest list:\n\n- Custom filter / floating-filter component slot. Filters are configurable but not yet pluggable as your own component. Medium effort.\n- Custom tool panels. The tool panel is a fixed Columns + Filters pair. Medium effort.\n- Integrated-chart depth. 13 chart types, the wizard, \"chart selected range\", click-to-cross-filter, the PNG / SVG export toolbar, zoom + brush, combo / dual-axis, and server-side aggregation all ship. What is still missing is breadth in the panel itself: the in-panel type picker offers bar / line / area / pie only, so the other nine types are config-only via `defaultType`. Small effort.\n- Server-side pivot and a viewport row model. The server-side row model does sort / filter / group / infinite today. Large effort.\n- 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.\n- Custom calendar systems (Hijri, Buddhist, fiscal year) for the date editor. Gregorian dates / times / datetimes are built in.\n\nFull public [roadmap with effort tags](https://svgrid.com/roadmap/) and a \"recently shipped\" track record\non svgrid.com.\n\n---\n\n## Repository layout\n\nThis is a **pnpm workspace** monorepo:\n\n```\npackages/grid/ @svgrid/grid - MIT data grid + UI component suite\npackages/enterprise/ @svgrid/enterprise - paid feature pack + Studio codegen\npackages/studio/ @svgrid/studio - Studio CLI + visual designer\npackages/mcp/ @svgrid/mcp - MCP server\npackages/grid-wc/ @svgrid/grid-wc - web component\npackages/svgrid-ui/ @svgrid/ui - UI component CLI\npackages/create-sv-grid/ @svgrid/create - grid scaffolder\npackages/create-studio/ @svgrid/create-studio - Studio app scaffolder\npackages/migrate/ @svgrid/migrate - svelte-headless-table codemod\npackages/svgrid-sv/ @svgrid/sv - Svelte CLI add-on (sv add @svgrid)\nexamples/ - 375 live demos\nwebsite/ - svgrid.com source\ndocs/ - markdown docs\n```\n\n### Requirements\n\n- Node.js >= 18\n- pnpm (the workspace pins `pnpm@10.33.2` via `packageManager`; `corepack enable` will pick it up)\n\n### Develop\n\n```bash\npnpm install # install workspace deps\npnpm dev # run the demo gallery at http://localhost:5174\npnpm build # build packages/grid/dist\npnpm build:example # build the demo gallery\npnpm --filter svgrid-website dev # run the website at http://localhost:5180 (private submodule)\npnpm --filter svgrid-website build # build the website (writes website/dist)\npnpm test # run the grid test suite\npnpm test:types # type-check every package\npnpm lint # encoding + mobile-CSS + API-example checks, then eslint\npnpm size # re-measure the gzipped bundle\npnpm demos:count # re-count the live demos\npnpm ssr:check # verify the SSR output against a real server build\n```\n\n`pnpm dev` proxies to `pnpm --filter @svgrid/grid-example-gallery dev`. Inside the example, the library\nis linked via the workspace (`\"@svgrid/grid\": \"workspace:*\"`), so edits in `packages/grid/src/**` are\npicked up by Vite HMR with no rebuild.\n\n### Library entry points\n\n```ts\nimport {\n SvGrid,\n FlexRender,\n // headless core + row-model factories\n createSvGrid,\n createCoreRowModel,\n createFilteredRowModel,\n createSortedRowModel,\n createGroupedRowModel,\n createExpandedRowModel,\n createPaginatedRowModel,\n // features\n tableFeatures,\n rowSortingFeature,\n columnFilteringFeature,\n columnGroupingFeature,\n rowExpandingFeature,\n rowPaginationFeature,\n rowSelectionFeature,\n // cell renderers\n renderSnippet,\n renderComponent,\n} from '@svgrid/grid'\n```\n\n### Documentation\n\n- [Getting started](docs/getting-started.md) - end-to-end walkthrough.\n- [Why headless?](docs/why-headless.md) - what the headless core gives you and when to reach for it.\n- [Tailwind integration](docs/help/tailwind.md) - re-theming via `--sg-*` tokens, dark-mode wiring.\n- [Bundle size](docs/reference/bundle-size.md) - measured numbers and how to reproduce them.\n- [Help index](docs/help/index.md) - topic pages for columns, rows, cells, filtering, editing.\n- [Missing features](docs/help/missing-features.md) - honest gap list.\n\n### Website\n\n`website/` contains the public marketing + docs site (Vite + Svelte 5). Published to GitHub Pages via\n[.github/workflows/deploy-website.yml](.github/workflows/deploy-website.yml) on every push to `main`. See\n[website/README.md](website/README.md) for routes, base-path config, and the one-time Pages setup.\n\n## License\n\nThis repository ships under **mixed licensing**. The grid, the web component, the UI CLI, the MCP\nserver, the migration codemod, the Svelte CLI add-on, and the two scaffolders are open source; the\nEnterprise pack, Studio, and the website are commercial.\n\n| Package | License | LICENSE file |\n|---|---|---|\n| [packages/grid](packages/grid/) | **MIT** | [LICENSE](packages/grid/LICENSE) |\n| [packages/grid-wc](packages/grid-wc/) | **MIT** | [LICENSE](packages/grid-wc/LICENSE) |\n| [packages/svgrid-ui](packages/svgrid-ui/) | **MIT** | [LICENSE](packages/svgrid-ui/LICENSE) |\n| [packages/create-sv-grid](packages/create-sv-grid/) | **MIT** | [LICENSE](packages/create-sv-grid/LICENSE) |\n| [packages/create-studio](packages/create-studio/) | **MIT** | [LICENSE](packages/create-studio/LICENSE) |\n| [packages/migrate](packages/migrate/) | **MIT** | [LICENSE](packages/migrate/LICENSE) |\n| [packages/svgrid-sv](packages/svgrid-sv/) | **MIT** | [LICENSE](packages/svgrid-sv/LICENSE) |\n| [packages/enterprise](packages/enterprise/) | Commercial | [LICENSE](packages/enterprise/LICENSE) |\n| [packages/mcp](packages/mcp/) | **MIT** | [LICENSE](packages/mcp/LICENSE) |\n| [packages/studio](packages/studio/) | Commercial | [LICENSE](packages/studio/LICENSE) |\n| [website](website/) | Proprietary | [LICENSE](website/LICENSE) |\n\nThe MIT packages can be used freely, including for commercial work. The Enterprise feature pack,\nStudio, and the marketing + docs website are proprietary: source is visible for evaluation and for\npaying customers, but visibility does not grant a license. See the\n[SvGrid pricing page](https://svgrid.com/pricing/) for Enterprise purchases.\n\n## Trademark\n\nSvGrid™ and sv-grid™ are trademarks of jQWidgets Ltd. The licenses above apply to the source\ncode only; they grant no rights to the **SvGrid** / **sv-grid** names or logos. You may build on and\nredistribute the MIT-licensed code, but you may not reuse the project's name or branding in a way that\nimplies endorsement by, or affiliation with, jQWidgets Ltd, nor redistribute it under a confusingly\nsimilar name.\n\n---\n\nIf SvGrid saved you some work, a star helps other Svelte developers find it.\n", "bytes": 22961, "sha": "2cecbadcbc47a82e0b3d408197dce4c1a90d5e670cae189eeccb8a07574abb32", "repo_slug": "sv-grid/sv-grid", "fonte": "repo", "truncated": false, "api": "https://agentalog.com/api/listings/mcp_com_svgrid_svgrid_1bc5e945/readme" }