Feature-Rich
React DataGrid

Easily integrate a high-performance data grid into your React apps. Flexible, responsive, and lightning fast. Use for free under the MIT license.

Also available for:

previewpreview

Yet another React data grid? True, but why not try something new? Lightweight, easy to use, and open source, SVAR React DataGrid 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 provides an easy way to display 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, SVAR React DataGrid is designed to provide users with a responsive and seamless experience, ensuring smooth performance even when handling large datasets.

Intuitive in-cell editing

Enjoy live 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 datagrid with built-in row operations (add, edit, delete). You can also implement your own menu items through a simple API.

Try It Yourself

Check expandable tree data structure, in-cell editors in the Status and Due columns, and switch between light and dark themes of SVAR React DataGrid.

React 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!

Other Features of SVAR React DataGrid

Frozen & collapsible columns

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

Frozen & collapsible columns

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.

Responsive design and flexible sizes

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-column sorting

Multi-row selection

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

Multi-row selection

Effortless keyboard navigation

Use keyboard inputs to navigate through your React datagrid with ease. Whether you're working with large datasets or complex table structures, keyboard navigation enhances accessibility and makes table interactions more convenient and intuitive.

Effortless keyboard navigation

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.

RestDataProvider for easy data updates