Installation

npm

npm install react-data-table-component

yarn

yarn add react-data-table-component

Requirements

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 are using Next.js App Router and need styles available during SSR to avoid a flash of unstyled content, import the stylesheet explicitly in your root 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"`. Optionally import `react-data-table-component/css` in `layout.tsx` to avoid a flash of unstyled content on first SSR load.
Next.js Pages Router	Works out of the box
Remix	Works out of the box
Astro	Use `client:load` or `client:visible` directive

Next.js App Router: layout.tsx (optional)

Optional: import the stylesheet once in your root layout so styles are present in the initial SSR HTML.

// app/layout.tsx
import 'react-data-table-component/css';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

Next.js App Router: using the table

The bundle declares its own "use client" boundary, so you can import <DataTable> directly from a Server Component file. No wrapper needed.

// app/users/page.tsx (Server Component, no directive needed).
import DataTable from 'react-data-table-component';
import { getUsers } from '@/lib/db';

export default async function UsersPage() {
  const users = await getUsers();
  return <DataTable columns={columns} data={users} />;
}