Installation
Install the package with your package manager:
npm install react-data-table-componentyarn add react-data-table-componentpnpm add react-data-table-componentbun add react-data-table-componentRequirements
| Peer dependency | Version |
|---|---|
react | >=18.0.0 |
react-dom | >=18.0.0 |
React 17 is not supported. React 18 concurrent features (useTransition,
useId) are used internally.
No CSS import needed
Styles are injected automatically when the component first renders. You do not need to import any CSS file in standard React apps (Vite, CRA, Remix, etc.).
If you render on the server and want styles in the initial HTML, import the stylesheet
once at the root of your app, for example in a Next.js App Router layout.tsx:
import 'react-data-table-component/css';TypeScript
Type declarations are bundled. No @types/ package required.
All public types are re-exported from the main entry point:
import DataTable, { type TableColumn, type TableProps } from 'react-data-table-component';Framework notes
| Framework | Notes |
|---|---|
| Vite / Create React App | Works out of the box |
| Next.js App Router | Import <DataTable> directly from any file. The bundle ships with "use client". |
| Next.js Pages Router | Works out of the box |
| Remix | Works out of the box |
| Astro | Use client:load or client:visible directive |
See SSR for a full example in each framework.