Svelte DataGrid

A high-performance, virtualized data grid for Svelte 5.

Features

• Virtualized Rendering - Efficiently handles thousands of rows
• Svelte 5 Runes - Built with modern reactive primitives
• TypeScript - Full type safety out of the box
• Flexible Data Sources - Works with local data, REST APIs, or databases
• Rich Interactions - Selection, sorting, filtering, editing, and more

Quick Start

Install the package:

npm install svelte-datagrid

Create your first grid:

<script>
  import { DataGrid } from 'svelte-datagrid';

  const columns = [
    { key: 'id', header: 'ID', width: 80 },
    { key: 'name', header: 'Name', width: 200 }
  ];

  const data = [
    { id: 1, name: 'Alice' },
    { id: 2, name: 'Bob' }
  ];
</script>

<div style="height: 400px;">
  <DataGrid {data} {columns} />
</div>

Documentation Structure

This documentation follows the Diátaxis framework:

Tutorials

Learning-oriented - Step-by-step lessons for beginners

• Getting Started - Your first grid in 5 minutes
• Adding Selection - Enable row selection
• Server-Side Data - Connect to a backend

How-to Guides

Task-oriented - Practical steps to solve specific problems

• Enable Filtering - Per-column and global search
• Cell Editing - Inline cell editing
• Keyboard Navigation - Navigate with arrow keys
• Column Resizing - Resize columns by dragging
• Custom Cells - Render custom content
• Theming - Customize appearance

Reference

Information-oriented - Technical descriptions and specifications

• DataGrid Component - Main component API
• Column Definition - Column configuration
• Grid State - State management API
• Data Sources - DataSource interface
• Types - TypeScript type definitions

Concepts

Understanding-oriented - How and why things work

• Architecture - How the grid is structured
• State Management - Reactive state with Svelte 5
• Virtualization - How row virtualization works
• Performance - Optimization strategies

Quick Links