Working with tabular data in React might seem easy but can turn out to be a challenging task. You start with a simple feature list, but soon your app needs sorting, filtering, in-cell editing, accessibility compliance, not mentioning responsive layout and data export.
Of course, there are tons of data table libraries for React that give you most of these features. But they’re either heavy and expensive, or kind of limited in feature set.
That’s why we built SVAR React DataGrid, an open-source React datagrid component which is available under MIT license. With the recent v2.3 release, it now covers a feature set that makes it a strong competitor to the established players (AG Grid, MUI DataGrid, TanStack Table).
Key Features
Here’s what’s already built into SVAR React DataGrid (v2.3 and earlier):
React 19 and Typescript support: the essentials of modern React components
Accessibility: compatibility with WAI-ARIA standards
Performance: virtual scrolling for rows and columns, dynamic data loading - check the demo with big data
Data management: multi-column sorting, selection, editing (in-cell and via form)
Presentation: cell templates, cell tooltips, tree data, pagination.
Layout: pinned columns, colspans/rowspans, collapsible column groups, auto-sizing.
Backend/export: RestDataProvider integration, print API, CSV export.
Customization: light/dark themes, CSS variables, localization.
In other words: this is a powerful datagrid component with a solid feature set that can significantly save your development time. And what’s even better, it’s free under the MIT license - see the GitHub repository 🛠️
What’s new in v2.3
Here are the highlights of the new features added in version 2.3:
Accessibility (WAI-ARIA)
Screen reader support and upgraded keyboard navigation make SVAR React DataGrid usable with assistive tech, not just mouse clicks.
Filtering (Basic + Advanced)
Version 2.3 introduced column header filters (text, select, custom), as well as the ability to integrate SVAR React Filter for advanced filtering. You can use this query builder component to combine conditions with AND/OR logic and build complex queries with nested filter groups.
External Edit Form & Undo/Redo
Integration with SVAR React Editor allows you to edit rows data in a popup or sidebar edit form. You can undo/redo any data change with Ctrl+Z / Ctrl+Y since version 2.3, so no more fear of accidental edits.
Responsive Mode
SVAR React DataGrid v.2.3 gives you the flexibility to configure which columns appear and how the datagrid will look depending on screen size, so you can make sure your tables look good on any device.
Print Support
You can now print the entire datagrid, even off-screen rows/columns, with full control over paper size and orientation.
UX Improvements
Other notable new features include:
- Drag-and-drop row reordering.
- Custom HTML in headers/footers.
- Smarter collapsible columns (with placeholders instead of disappearing).
👉 Try live demos of all features
Get Started
Starting with v2.3, the SVAR DataGrid package is available under the @svar-ui namespace:
npm install @svar-ui/react-grid
Here is the code example that adds a simple data table on a page with SVAR React DataGrid:
import { Grid } from "@svar-ui/react-grid";
import "@svar-ui/react-grid/all.css";
const data = [
{
id: 1,
city: "Amieshire",
email: "[email protected]",
firstName: "Ernest",
lastName: "Schuppe",
companyName: "Lebsack - Nicolas",
},
{
id: 2,
city: "Gust",
email: "[email protected]",
firstName: "Janis",
lastName: "Vandervort",
companyName: "Glover - Hermiston",
},
];
const columns = [
{ id: "id", width: 50 },
{ id: "city", width: 100, header: "City", footer: "City" },
{ id: "firstName", header: "First Name", footer: "First Name", width: 150 },
{ id: "lastName", header: "Last Name", footer: "Last Name", width: 150 },
{ id: "email", header: "Email", footer: "Email" },
{ id: "companyName", header: "Company", footer: "Company" },
];
export default function App() {
return <Grid data={data} columns={columns} />;
}
Explore more
- GitHub: SVAR React DataGrid
- Full release notes: Read the blog post
- Demos: See it in action
- Documentation
Why Try SVAR DataGrid?
SVAR React DataGrid is designed to hit the sweet spot:
- Modern React-first API
- Super fast with virtual scrolling
- Feature-complete (editing, filtering, export, responsive, accessibility)
- MIT license
If you're building a project dashboard, admin panel, or any React app that works with structured data, SVAR React DataGrid v2.3 is worth a try. Explore the demos, experiment with the new features, and see how it can help you build advanced data tables faster.
SOCIAL SHARE CARD GENERATOR