SVAR Logo
DemosLicensesContact
Get Started
 
 
 
 
 
 
 
 

Feature-Rich Svelte DataGrid

A lightweight, Svelte 5 compatible datagrid that works fast with large datasets. Now with TypeScript support! Easily integrate Svelte data tables with sorting, filtering, in-cell editing, and more.

Get Started
View Demos

Licensed under MIT

Also available for:

Why SVAR Svelte DataGrid Stands Out

Native Svelte component

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>

Sorting & advanced filtering

SVAR Svelte DataGrid supports flexible multi-column sorting. For filtering, you can use built-in header filters or integrate the data grid with SVAR Svelte Filter for complex queries with nested fields and AI-powered natural language search.
SVAR picture

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

rocket

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.
#
Star on GitHub

Svelte DataGrid Live Demo

Try selection with checkboxes, tree data, in-cell editors in columns Status and Due, and switch between light and dark themes. For the best experience, view this page on a desktop device to enjoy the live demo, as it looks great on larger screens!

Open Fullscreen Demo

Advanced Features of Svelte DataGrid

Tree data view

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.

Frozen and collapsible columns

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.

Built-in context menu

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.

Undo/redo support

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.

Row selection & reordering

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.

Accessibility & keyboard navigation

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

Professional support

Need custom features or integration help? Our experienced team provides priority support, custom development, and consulting services.

Contact Us

Latest Updates

Version 2.7

June 4, 2026

What's new

Multiselect column filter

Tooltip improvements

Pixel-based scroll control

Bug fixes

Read More

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

Read More

Version 2.4

December 12, 2025

What's new

Built-in toolbar

Custom row height

Customizable sorting

More actions for context menu

Read More

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:
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.

Resources

icon

How to start guide

Quick start

icon

Community forum

Visit forum

icon

GitHub repository

Visit github