Feature-Rich Svelte DataGrid

Add fully featured, responsive data grids to your Svelte apps. Lightning-fast, customizable, easy to start with.

Licensed under MIT

Also available for:

Advanced Features of SVAR Svelte DataGrid

Tree data view

Easily integrate and display hierarchical data within the table, providing a straightforward way to manage and represent parent-child relationships when needed.

Handling large datasets

SVAR Svelte DataGrid is optimized for performance with large datasets, providing a responsive user experience. Features like virtual scrolling, dynamic loading, and paging help manage data efficiently.

Context menu support

You can enable built-in context menu to allow users to quickly copy, delete, and add rows to the data table. You can also customize the context menu by adding your own options to it.

Responsive design

SVAR Svelte DataGrid automatically adjusts to fit the available space, simplifying layout management and ensuring optimal use of screen real estate. Touchscreen support is also included.

feature background

Tree data view

Easily integrate and display hierarchical data within the table, providing a straightforward way to manage and represent parent-child relationships when needed.

Tree data view

Handling large datasets

SVAR Svelte DataGrid is optimized for performance with large datasets, providing a responsive user experience. Features like virtual scrolling, dynamic loading, and paging help manage data efficiently.

Handling large datasets

Context menu support

You can enable built-in context menu to allow users to quickly copy, delete, and add rows to the data table. You can also customize the context menu by adding your own options to it.

Context menu support

Responsive design

SVAR Svelte DataGrid automatically adjusts to fit the available space, simplifying layout management and ensuring optimal use of screen real estate. Touchscreen support is also included.

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.

All the Essentials of Svelte DataGrid

Sorting and filtering

You can enable sorting feature for specific columns and arrange table rows depending on selected criteria: words or numbers. Use sorting by multiple columns to organize complex datasets.

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.

Inline editing

With various in-cell editors, you can streamline the data editing process and allow users to edit information directly within the table cells. To save changes to the server side, you can use our pre-built RestDataProvider.

Optimized performance

SVAR Svelte DataGrid supports the dynamic creation and loading of table content, ensuring smooth and efficient data handling. It greatly improves the overall responsiveness of the table, especially when dealing with large datasets.

Single and multiple row selection

There are options for selecting either one or multiple rows in the table for targeted actions. Users can compare and analyze selected data points, identify patterns and perform calculations based on the selected data.

Keyboard navigation

Users can navigate through the table using keyboard inputs, enhancing accessibility and efficiency. Keyboard navigation facilitates seamless data entry in tables when working with large datasets or complex table structures.

Get Help at Every Step

Resources