Why SVAR Svelte DataGrid Stands Out

Get Started in Minutes

SVAR DataGrid is built entirely in Svelte with full TypeScript support, no wrappers, no bloat. Add a feature-rich data table to your Svelte app with just a few lines of code.

<script>
    import { Grid, Willow } from "@svar-ui/svelte-grid";

    const data = [
        { id: 1, name: "Alice", role: "Developer", status: "Active" },
        { id: 2, name: "Bob", role: "Designer", status: "Away" },
    ];

    const columns = [
        { id: "name", header: "Name", width: 150 },
        { id: "role", header: "Role", width: 120 },
        { id: "status", header: "Status", width: 100 },
    ];
</script>

<Willow>
    <Grid {data} {columns} />
</Willow>

Advanced filtering & sorting

Multi-column sorting and built-in header filters make it easy to manage complex datasets. For advanced filtering scenarios with and/or logic, seamlessly integrate SVAR Svelte Filter with the datagrid data.

Handling large datasets

SVAR Svelte DataGrid offers lightning-fast performance with large datasets, providing a responsive user experience. Features like virtual scrolling, dynamic loading, and pagination help manage data efficiently.

See the demo

Flexible data editing

Allow users to edit information directly within the table cells or add a standalone edit form with multiple fields and validation options. To simplify saving CRUD changes to the server side, a pre-built RestDataProvider is available.

Responsive design

SVAR Svelte DataGrid automatically adjusts to fit the available space, ensuring optimal use of screen real estate. It also supports a customizable responsive mode and touchscreen interactions.

Advanced Features of Svelte DataGrid

Easily integrate and display hierarchical data within the table, providing a straightforward way to represent parent-child relationships when needed. You can programmatically collapse or expand all rows at once via API.

The datagrid can adjust the columns width to header text, cell content, or page size. You can also enable collapsible columns for a compact view or pin columns to the left so the key information remains visible while scrolling.

You can enable built-in context menu to let users quickly copy, delete, edit, or add rows to the data table. Customize the context menu by adding your own actions for fast, desktop-style interactions.

Make working with data tables safer and less stressful - undo/redo feature lets you reverse accidental changes and speed up the work with data. You can easily implement this Svelte grid in use cases like dashboards, admin panels, and spreadsheets.

Users can select either one or multiple rows in the table for bulk or targeted actions. For clearer and more visible selection, use checkbox selection across datagrid rows. If needed, row reordering with simple drag-and-drop can be turned on.

SVAR Svelte DataGrid is compatible with WAI-ARIA standard. Special markup allows content to be read by screen readers. An extended list of hotkeys allows for smoother and more efficient keyboard navigation, ensuring accessibility and efficiency when working with large datasets.

Get Started

Latest Updates

Version 2.6

March 18, 2026

What's new

Multiselect in-cell editor

Ability to register custom editors

AI-powered filter with FilterQuery

Fixed initialization with SvelteKit

Version 2.4

December 12, 2025

What's new

Built-in toolbar

Custom row height

Customizable sorting

More actions for context menu

Version 2.3

September 19, 2025

What's new

TypeScript definitions

The package migrated to
@svar-ui/svelte-grid

Minor fixes

Frequently Asked Questions

SVAR Svelte DataGrid is a high-performance, ready-to-use table component built 100% in Svelte for maximum performance and seamless integration: no wrappers or heavy dependencies. Compatible with the latest Svelte 5. The DataGrid is optimized for data-intensive applications, offering virtual scrolling, dynamic loading, pagination, sorting, filtering, tree-data, inline editing, context menus, keyboard navigation, and responsive design - all under the free, open-source MIT license.

Yes, it provides multi-column sorting, in-cell editing, keyboard shortcuts, and undo/redo, similar to spreadsheet apps. It also offers print support with customizable settings for paper size, orientation (landscape/portrait), and print resolution.

Yes, TypeScript definitions for SVAR Svelte DataGrid are available since v2.3.

SVAR Svelte DataGrid supports virtual scrolling, making it highly responsive even with tens of thousands of rows. It also supports dynamic loading and pagination to handle large datasets efficiently.

Install via npm: npm install @svar-ui/svelte-grid.
Then import the DataGrid component, initialize it with its main properties, and add your data. Here are some helpful resources:

Getting started guide
Demos (with links to the source code on GitHub)

SVAR DataGrid supports server-side data operations through REST APIs using the built-in RestDataProvider or custom event handlers. The RestDataProvider automatically handles CRUD operations and provides data loading via REST endpoints. For custom implementations or server-side filtering/sorting, you can use event callbacks to integrate with any backend. A Go backend example is available on our GitHub.

Feature-Rich Svelte DataGrid

Why SVAR Svelte DataGrid Stands Out

Get Started in Minutes

Advanced filtering & sorting

Handling large datasets

Flexible data editing

Responsive design

Svelte DataGrid Live Demo

Advanced Features of Svelte DataGrid

Tree data view

Frozen and collapsible columns

Built-in context menu

Undo/redo support

Row selection & reordering

Accessibility & keyboard navigation

Professional support

Latest Updates

Frequently Asked Questions

Resources

How to start guide

Community forum

GitHub repository