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-datagrid
App.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.

Built with Svelte 5. Open source under MIT license.