Tzezar's Datagrid
A highly extensible headless datagrid for Svelte 5 with exceptional performance. Handles hundreds of thousands of rows with built-in sorting, filtering, grouping, and virtualization.
Svelte 5TypeScriptTailwind CSSVirtualization
Overview
Built a headless datagrid library from scratch for Svelte 5, following the shadcn philosophy: you own the code, full customization freedom. It provides both a framework-agnostic core and a pre-built enhanced component.
Key Features
Headless Core:
- Column faceting, filtering, grouping, ordering, pinning, sizing, visibility
- Global search, pagination, sorting
- Row expanding, pinning, selection
- Lifecycle hooks, event system, cache manager
Enhanced Component:
- Virtualization for 100k+ rows
- Animations, cell-click-to-copy
- Data export (CSV, XML, XLSX)
- Fullscreen mode, striped rows
- Column group visibility
Technical Decisions
- Headless-first — zero styling opinions, bring your own UI
- Pipeline architecture — each feature (sort, filter, paginate) is a composable transform
- Svelte 5 runes — leveraged reactive primitives for efficient updates without boilerplate
- Tree-shakeable — only pay for features you use
Impact
Published on npm as tzezars-datagrid. Currently in maintenance mode, feature-complete and stable.
Origin
Built this because I needed a performant data table for a WMS system I was developing. Existing solutions were either too opinionated or didn’t support Svelte 5’s reactivity model well.