r/Frontend • u/boykom • 12h ago
SvGrid: a Svelte native data grid, MIT, plus the UI components that grew out of it
We've been heads-down on SvGrid for a while and it's finally at the point where we want it in front of people who actually ship Svelte apps.
It's written for Svelte 5 directly. Runes, no wrapper around a framework-agnostic core, no adapter layer. That was the whole reason to start.
<script lang="ts">
import { SvGrid, type GridColumns } from '@svgrid/grid'
type Person = { firstName: string; age: number; status: string }
const data: Person[] = [
{ firstName: 'Ada', age: 36, status: 'active' },
{ firstName: 'Linus', age: 54, status: 'active' },
]
const columns: GridColumns<Person> = [
{ field: 'firstName', header: 'First name' },
{ field: 'age', header: 'Age' },
{ field: 'status', header: 'Status' },
]
</script>
<SvGrid {data} {columns} sortable filterable editable />
Every capability is off by default, so a bare <SvGrid {data} {columns} /> is a plain read-only table and you opt into the rest one word at a time.
Underneath: virtualized both directions so a million rows scrolls fine, Excel-style filter menus, inline editing, grouping with aggregation, tree data, pivot, and a server-side row model that pushes sort/filter/group down to your backend instead of pretending your dataset fits in memory. SSR renders the header plus a viewport window of rows.
About 2 KB gzipped for the headless core, 77 KB for the full render component, 9 KB CSS.
The part we didn't plan. A grid needs cell editors. Cell editors need date pickers, comboboxes, tag inputs. Those need a popover layer and focus management. We looked up and had 84 components.
You can poke at any of them without making a project first:
npx @svgrid/ui try calendar
That caches a tiny Vite sandbox and opens your browser, with a theme picker so you can see it in whatever you're actually using. add writes the starter file into your app instead of the sandbox.
Licensing, since it always comes up. The grid, the UI components, the web component build and the MCP server are MIT with nothing gated. No license key, no watermark, no row cap, no console nag. We charge for Excel/PDF export, Excel import, print, and the Kanban and scheduler renderers. OSS projects get those free, just send us a repo URL.
Where it's weak. The grid has been in production a while. The UI components are much newer and haven't been beaten on anywhere near as hard. If you find something broken we'd rather hear about it than not.
Context on us: we're the jQWidgets team and we've been shipping UI components since 2011. This is the first thing we've built Svelte-first rather than framework-agnostic, and that bet is what I'd most like opinions on. Going deep on one framework buys you a much smaller API, but you'll never see us in a React thread.
Two things I'd take from this thread:
- https://svgrid.com/demos is 373 demos with source on every one, which is honestly the fastest way to work out whether it's any good. Break one and tell me which.
- What's the grid feature you keep hand-rolling because nothing ships it properly? That list is how we pick what's next.
- MCP Server
Repo: github.com/sv-grid/sv-grid
