SVAR Logo
LicensesContact
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

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.

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.

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.

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.

Handling large datasets

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.

Advanced filtering & sorting

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.

Flexible data editing

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.

Responsive design
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.

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

December 12, 2025

What's new

Built-in toolbar

Custom row height

Customizable sorting

More actions for context menu

Read More

Version 2.3

September 19, 2025

What's new

TypeScript definitions

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

Minor fixes

Read More

Version 2.2

July 17, 2025

What's new

Undo/redo feature

Responsive mode

In-cell editors for columns

Advanced filtering

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

Visit quickstart

icon

Community forum

Visit forum

icon

GitHub repositories

Visit github