Feature-Rich Svelte DataGrid

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

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.

feature background

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!

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.

Frequently Asked Questions

What is SVAR Svelte DataGrid and what makes it special?

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.

Does SVAR Svelte DataGrid offer Excel-like features?

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.

Does SVAR Svelte DataGrid support TypeScript?

TypeScript support is not available yet, but we plan to add it in a future release.

How well does SVAR Svelte DataGrid handle large datasets?

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.

How to add a data grid to a Svelte app using SVAR DataGrid?

Install via npm (`npm install wx-svelte-grid`), import the Grid component, initialize it with its main properties, and add your data. Here are some helpful resources:

Is there an example of backend integration for SVAR Svelte DataGrid?

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.

Get Help at Every Step

Resources