Feature-rich and customizable data grid React component
react-data-grid is a performance-focused React component for rendering large tabular datasets using virtualization techniques. Instead of rendering thousands of DOM nodes, it only renders visible rows and columns in the viewport, making it capable of handling datasets with tens of thousands of rows without performance degradation. The library provides essential grid features like column resizing, multi-column sorting, cell editing, and row selection while maintaining a minimal dependency footprint.
The package exists because many data grid solutions are either too heavy (bundling unnecessary features) or too opinionated (forcing specific UI frameworks). react-data-grid takes a different approach by providing a lean core with extensibility through custom cell renderers and formatters. It's built with TypeScript from the ground up, offering strict typing for row data, column definitions, and event handlers.
Developers building admin dashboards, data analysis tools, and enterprise applications use react-data-grid when they need full control over grid behavior without the weight of commercial solutions. With 286k weekly downloads, it's become a go-to choice for teams that value bundle size and need to implement custom business logic around tabular data. The library works seamlessly with React 19+ and supports modern patterns like hooks for state management and immutable data updates.
import { useState } from 'react';
import DataGrid from 'react-data-grid';
import 'react-data-grid/lib/styles.css';
interface Row {
id: number;
name: string;
email: string;
status: 'active' | 'inactive';
revenue: number;
}
const columns = [
{ key: 'id', name: 'ID', width: 80, frozen: true },
{ key: 'name', name: 'Name', width: 200, resizable: true },
{
key: 'email',
name: 'Email',
width: 250,
editable: true
},
{
key: 'status',
name: 'Status',
width: 120,
renderCell({ row }) {
return (
<span style={{
color: row.status === 'active' ? 'green' : 'gray',
fontWeight: 'bold'
}}>
{row.status.toUpperCase()}
</span>
);
}
},
{
key: 'revenue',
name: 'Revenue',
width: 150,
renderCell({ row }) {
return `$${row.revenue.toLocaleString()}`;
}
}
];
function UserGrid() {
const [rows, setRows] = useState<Row[]>([
{ id: 1, name: 'Alice Johnson', email: 'alice@example.com', status: 'active', revenue: 45000 },
{ id: 2, name: 'Bob Smith', email: 'bob@example.com', status: 'inactive', revenue: 32000 },
{ id: 3, name: 'Carol White', email: 'carol@example.com', status: 'active', revenue: 58000 }
]);
const [selectedRows, setSelectedRows] = useState(new Set<number>());
return (
<div style={{ height: '500px' }}>
<DataGrid
columns={columns}
rows={rows}
rowKeyGetter={(row) => row.id}
onRowsChange={setRows}
selectedRows={selectedRows}
onSelectedRowsChange={setSelectedRows}
defaultColumnOptions={{ sortable: true, resizable: true }}
/>
{selectedRows.size > 0 && (
<div style={{ marginTop: '10px' }}>
Selected: {selectedRows.size} row(s)
</div>
)}
</div>
);
}Admin Dashboards with Editable Data: Building internal tools where users need to view and edit records inline, such as inventory management systems or user administration panels. The onRowsChange callback makes it straightforward to handle edits and sync changes back to your API.
Financial Data Tables: Displaying trading data, portfolio holdings, or transaction histories where performance matters and users need to sort by multiple columns simultaneously. Virtualization ensures smooth scrolling even with thousands of rows.
Data Export/Import Workflows: Creating interfaces where users can paste data from Excel, edit it in the grid, and prepare it for validation before submission. The built-in copy/paste and cell dragging features reduce friction in data entry tasks.
Analytics and Reporting Tools: Rendering query results or metrics tables with grouping and summary rows, allowing users to drill down into aggregated data. Custom cell renderers let you visualize trends with inline sparklines or conditional formatting.
Real-time Data Monitoring: Displaying logs, metrics, or event streams where rows update frequently. The component's controlled row state pattern makes it easy to integrate with WebSocket or polling-based updates without full re-renders.
npm install react-data-gridpnpm add react-data-gridbun add react-data-grid