Free, Fast, and Powerful React DataGrid

A high-performance, responsive data grid for your React apps. Comes with a built-in context menu, tree data, frozen columns, and more!

Licensed under MIT

Also available for:

Yet another React datagrid?

True, but why not try something new? Lightweight, easy to use, and open source — plus it handles large
datasets at lightning speed. Give it a try and see for yourself!

Top Features of SVAR React DataGrid

Tree Data

SVAR React DataGrid enables seamless incorporation and visualization of hierarchical data within the table. It allows you to create a tree-like table structure with expandable/collapsible rows.

Optimized for large datasets

With virtual scrolling, dynamic loading, and paging support, our table is designed to provide users with a responsive and seamless experience, ensuring smooth performance even when handling large amounts of data.

Intuitive in-cell editing

Enjoy live data editing workflow through in-cell editing. Multiple in-cell editors available, including text field, dropdown, checkbox, date picker, rich select, and more.

Easy-to-use context menu

Add right-click context menu functionality to your table with built-in row operations (add, edit, delete). You can also implement your own menu items through a simple API.

feature background

Tree Data

SVAR React DataGrid enables seamless incorporation and visualization of hierarchical data within the table. It allows you to create a tree-like table structure with expandable/collapsible rows.

Tree Data

Optimized for large datasets

With virtual scrolling, dynamic loading, and paging support, our table is designed to provide users with a responsive and seamless experience, ensuring smooth performance even when handling large amounts of data.

Optimized for large datasets

Intuitive in-cell editing

Enjoy live data editing workflow through in-cell editing. Multiple in-cell editors available, including text field, dropdown, checkbox, date picker, rich select, and more.

Intuitive in-cell editing

Easy-to-use context menu

Add right-click context menu functionality to your table with built-in row operations (add, edit, delete). You can also implement your own menu items through a simple API.

Easy-to-use context menu

Try It Yourself

This demo showcases tree data visualization, in-cell editors in the Status and Due columns, and the ability to toggle between light and dark themes.

Other Features of React DataGrid

Pinned & collapsible columns

Keep important information always in view by pinning columns to the left while scrolling. For a more compact display, allow users to collapse or hide any columns that aren't needed at the moment.

Responsive design and flexible sizes

The data grid automatically adapts to available space, optimizing page layout without manual adjustments. You can also easily customize column widths and allow users to resize columns for efficient space use.

Multi-column sorting

Implement sorting logic with minimal code and let users organize table data by clicking column headers. Table rows can be sorted across multiple columns simultaneously.

Multi-row selection

Choose between single or multiple row selection options for targeted actions. SVAR DataGrid helps to compare and analyze selected data points, recognize patterns, and perform calculations based on the selected data.

Effortless keyboard navigation

Use keyboard inputs to navigate through your React data table with ease. Whether you're working with large datasets or complex table structures, keyboard navigation enhances accessibility and efficiency, making data entry easy and fast.

RestDataProvider for easy data updates

SVAR React DataGrid comes with RestDataProvider, a built-in helper that automatically handles CRUD operations by mapping user actions to REST API endpoints. Sync table data with your backend through standard HTTP requests.

Get Help at Every Step

Resources