react-datatable

Use this path for Next.js projects. The installer detects App Router versus Pages Router from the project structure.

Create or open a Next.js app

If you need a new app, create one with TypeScript, Tailwind CSS, and the App Router:

pnpm dlx create-next-app@latest my-app --ts --tailwind --app --src-dircd my-app

npx create-next-app@latest my-app --ts --tailwind --app --src-dircd my-app

yarn dlx create-next-app@latest my-app --ts --tailwind --app --src-dircd my-app

bunx create-next-app@latest my-app --ts --tailwind --app --src-dircd my-app

Confirm the CSS entry

Next.js should have src/app/globals.css or app/globals.css with Tailwind imported:

@import "tailwindcss";

The installer adds the table source to Tailwind's scan path when it finds that file.

Install react-datatable

Run the installer from the app root:

pnpm dlx @react-datatable/cli install --token <license-token> --framework next-app

npx @react-datatable/cli install --token <license-token> --framework next-app

yarn dlx @react-datatable/cli install --token <license-token> --framework next-app

bunx @react-datatable/cli install --token <license-token> --framework next-app

For a Pages Router app, use:

pnpm dlx @react-datatable/cli install --token <license-token> --framework next-pages

npx @react-datatable/cli install --token <license-token> --framework next-pages

yarn dlx @react-datatable/cli install --token <license-token> --framework next-pages

bunx @react-datatable/cli install --token <license-token> --framework next-pages

The default target is src/react-datatable. Use --target react-datatable when your app does not use src/.

Create a client table component

In App Router, create src/components/CustomersTable.tsx and render the table from a client component:

"use client"

import { Datatable, type DatatableColumn } from "@/react-datatable"

type Customer = { id: string; company: string }

const rows: Customer[] = [
  { id: "1", company: "Acme Inc." },
  { id: "2", company: "Globex" },
  { id: "3", company: "Initech" },
  { id: "4", company: "Umbrella" },
  { id: "5", company: "Stark Industries" },
]

const columns: DatatableColumn<Customer>[] = [
  { id: "company", accessorKey: "company", header: "Company", filterType: "text" },
]

export function CustomersTable() {
  return <Datatable tableKey="customers" columns={columns} data={rows} getRowId={(row) => row.id} />
}

Render it on a page

For App Router, import the component into src/app/page.tsx:

import { CustomersTable } from "@/components/CustomersTable"

export default function Page() {
  return (
    <main className="p-6">
      <CustomersTable />
    </main>
  )
}

Verify the app

Run:

pnpm run build

npm run build

yarn build

bun run build