SVAR React DataGrid | Data Table

Website • Getting Started • Demos

SVAR React DataGrid is a ready-to-use component that helps you integrate feature-rich and lightning-fast data tables into React apps. It efficiently handles large datasets and supports virtual scrolling, in-cell editing, sorting, filtering, and full customization to fit complex projects.

Built as a pure React component (no wrappers), it integrates naturally with modern React apps and includes full TypeScript support. The data grid supports responsive layouts, light and dark themes, and is compatible with React 18 and 19.

:sparkles: Key Features

Handling large datasets

• Virtual scrolling (rows and columns)
• Dynamic data loading
• Paging

Data editing

• In-cell editing with different cell editors (datepicker, combo, select, rich select)
• External editor for grid data
• Custom in-cell editors
• Context menu and toolbar
• Undo/redo

Columns

• Multi-column sorting
• Frozen columns
• Expandable/collapsible columns
• Hide/show columns
• Auto-sizing based on content

Rows

• Row reordering with drag-and-drop
• Tree data
• Auto-sizing to content

Cells

• Custom HTML content
• Tooltips

Filtering

• Built-in column filters
• External filter controls
• Advanced query builder (with SVAR React Filter)
• Structured queries & natural language (with SVAR React Filter)

Accessibility

• Keyboard navigation
• WAI-ARIA compliant

Data & export

• Print support
• Export to CSV
• RestDataProvider for easy backend data binding

:hammer_and_wrench: How to Use

Install SVAR React DataGrid via npm:

npm install @svar-ui/react-grid

Import the package and include the data grid component in your React file:

import { Grid } from "@svar-ui/react-grid";
import "@svar-ui/react-grid/all.css"; // required styles

const data = [
  {
    id: 1,
    email: "[email protected]",
    firstName: "Ernest",
    lastName: "Schuppe",
  },
  {
    id: 2,
    email: "[email protected]",
    firstName: "Janis",
    lastName: "Vandervort",
  },
];

const columns = [
  {
    id: "id",
    width: 50,
  },
  {
    id: "firstName",
    header: "First Name",
    footer: "First Name",
    width: 150,
  },
  {
    id: "lastName",
    header: "Last Name",
    footer: "Last Name",
    width: 150,
  },
];

export default function App() {
  return <Grid data={data} columns={columns} />;
}

See the getting started guide to quickly set up and begin using SVAR React DataGrid component in your React projects.

:speech_balloon: Need Help?

Post an Issue or use our community forum.

⭐ Show Your Support

If SVAR React DataGrid helps your project, give us a star on GitHub! It helps more developers discover this component and keeps our team motivated to ship new features.