Installation
React Data Grid is available as an npm package and can be installed using any modern package manager.
Prerequisites
React Data Grid requires React 19.2+ and react-dom 19.2+ as peer dependencies.
- React ≥ 19.2
- react-dom ≥ 19.2
- A modern bundler (Vite, webpack, etc.)
Package Installation
Install react-data-grid using your preferred package manager:
npm install react-data-grid
Import Styles
After installation, import the default stylesheet in your application entry point:
import 'react-data-grid/lib/styles.css';
The stylesheet includes both light and dark mode themes that automatically adapt based on the user’s system preference via CSS color-scheme.
- Modern bundlers (Vite, webpack, Rollup, etc.)
- Server-side rendering (Next.js, Remix, etc.)
- Evergreen browsers
Vite Configuration (Important)
If you’re using Vite 8+, you need to adjust the CSS minification settings due to a bug in lightningcss with light-dark() syntax. vite.config.ts:
// vite.config.ts
import { defineConfig } from 'vite';
export default defineConfig({
build: {
cssMinify: 'esbuild'
}
});
Verify Installation
Create a simple test component to verify the installation:
import 'react-data-grid/lib/styles.css';
import { DataGrid, type Column } from 'react-data-grid';
interface Row {
id: number;
name: string;
}
const columns: readonly Column<Row>[] = [
{ key: 'id', name: 'ID' },
{ key: 'name', name: 'Name' }
];
const rows: readonly Row[] = [
{ id: 1, name: 'Test' }
];
function App() {
return <DataGrid columns={columns} rows={rows} />;
}
export default App;
Next Steps
Quick Start
Build your first functional data grid
API Reference
Explore all available props and options
Troubleshooting
TypeScript Errors
If you encounter TypeScript errors, ensure you have the latest type definitions:
npm install --save-dev @types/react @types/react-dom
CSS Not Loading
Make sure you’ve imported the stylesheet before using the DataGrid component:
import 'react-data-grid/lib/styles.css';
Bundle Size Issues
React Data Grid has zero dependencies and uses tree-shaking. Make sure your bundler supports ES modules and has tree-shaking enabled.