High-Performance Data Grid for Svelte 5
A virtualized, feature-rich data grid built with Svelte 5 runes. Handle thousands of rows with ease while maintaining smooth 60fps performance.
npm install svelte-datagridApp.svelte
<script>
import { DataGrid } from 'svelte-datagrid';
const columns = [
{ key: 'id', header: 'ID', width: 80 },
{ key: 'name', header: 'Name', width: 200 },
{ key: 'email', header: 'Email', width: 250 }
];
const data = [
{ id: 1, name: 'Alice', email: 'alice@example.com' },
{ id: 2, name: 'Bob', email: 'bob@example.com' }
];
</script>
<DataGrid {data} {columns} selectable filterable />Everything You Need
Blazing Fast
Virtualized rendering handles 100K+ rows at 60fps. Only visible rows are rendered.
Svelte 5 Native
Built with modern runes ($state, $derived) for optimal reactivity and performance.
Backend Agnostic
Works with local data, REST APIs, PostgreSQL, or any custom data source.
Full Featured
Selection, sorting, filtering, editing, resizing, reordering - all included.
Fully Themable
CSS custom properties for complete control over every aspect of styling.
Accessible
ARIA grid pattern implementation with full keyboard navigation support.
Ready to Get Started?
Install the package and build your first grid in minutes.