SVELTE 4 & 5 VERSIONS

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.

Accessibility

SVAR Svelte DataGrid is compatible with WAI-ARIA standards, providing screen reader support and comprehensive keyboard navigation. This helps you create data tables accessible and intuitive for a wider audience.

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.

In-cell 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.

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

Header filters

SVAR DataGrid supports customizable header filters and includes two built-in options: text and rich select. You can also integrate external filter controls using SVAR Core components or custom HTML elements.

Rows reordering

Our Svelte datagrid allows you to enable intuitive drag-and-drop row reordering, with optional drag handlers for flexible user interaction with table data.

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.

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.