Extensible
Svelte DataGrid

Get Started View Demos

Also available for:

Vue

React

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.

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.

Open Fullscreen Demo

Svelte DataGrid Demo Preview

For the best experience, view this page on a desktop device to enjoy the live demo, as it looks great on larger screens!

All the Essentials of Svelte DataGrid

Sorting data

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 pace and efficiency. Keyboard navigation facilitates seamless data entry in tables when working with large datasets or complex table structures.

Context menu support

DataGrid's context menu allows users to access additional functionality and options. Users can quickly copy, delete, and add rows. You can also customize the context menu by adding your own options to it.