react-datatable

Use this path when your app is not one of the named framework setups.

Confirm the requirements

Your app needs React, TypeScript, Tailwind CSS 4, and a CSS file that imports Tailwind:

@import "tailwindcss";

Choose a source target

Pick the directory where copied source should live. Common choices are:

src/react-datatable
app/react-datatable
resources/js/react-datatable

Run the installer

Pass the target explicitly:

pnpm dlx @react-datatable/cli install --token <license-token> --framework manual --target src/react-datatable

npx @react-datatable/cli install --token <license-token> --framework manual --target src/react-datatable

yarn dlx @react-datatable/cli install --token <license-token> --framework manual --target src/react-datatable

bunx @react-datatable/cli install --token <license-token> --framework manual --target src/react-datatable

Use --no-install when you want to copy source first and install dependencies yourself.

Add Tailwind source scanning

If the installer cannot detect your Tailwind entry file, add this to your global CSS manually:

@source "./react-datatable";

Adjust the path relative to the CSS file.

Create a table component

Create a component in your app, for example src/components/CustomersTable.tsx:

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 from your app entry

For example, in src/App.tsx:

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

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

Install core dependencies manually

If you used --no-install, install the runtime dependencies:

pnpm add @dnd-kit/core @dnd-kit/modifiers @dnd-kit/sortable @dnd-kit/utilities @phosphor-icons/react @radix-ui/react-alert-dialog @radix-ui/react-checkbox @radix-ui/react-dialog @radix-ui/react-dropdown-menu @radix-ui/react-label @radix-ui/react-popover @radix-ui/react-slot @radix-ui/react-switch @radix-ui/react-tooltip @tanstack/react-table class-variance-authority clsx cmdk date-fns react-day-picker tailwind-merge zod zustand

npm install @dnd-kit/core @dnd-kit/modifiers @dnd-kit/sortable @dnd-kit/utilities @phosphor-icons/react @radix-ui/react-alert-dialog @radix-ui/react-checkbox @radix-ui/react-dialog @radix-ui/react-dropdown-menu @radix-ui/react-label @radix-ui/react-popover @radix-ui/react-slot @radix-ui/react-switch @radix-ui/react-tooltip @tanstack/react-table class-variance-authority clsx cmdk date-fns react-day-picker tailwind-merge zod zustand

yarn add @dnd-kit/core @dnd-kit/modifiers @dnd-kit/sortable @dnd-kit/utilities @phosphor-icons/react @radix-ui/react-alert-dialog @radix-ui/react-checkbox @radix-ui/react-dialog @radix-ui/react-dropdown-menu @radix-ui/react-label @radix-ui/react-popover @radix-ui/react-slot @radix-ui/react-switch @radix-ui/react-tooltip @tanstack/react-table class-variance-authority clsx cmdk date-fns react-day-picker tailwind-merge zod zustand

bun add @dnd-kit/core @dnd-kit/modifiers @dnd-kit/sortable @dnd-kit/utilities @phosphor-icons/react @radix-ui/react-alert-dialog @radix-ui/react-checkbox @radix-ui/react-dialog @radix-ui/react-dropdown-menu @radix-ui/react-label @radix-ui/react-popover @radix-ui/react-slot @radix-ui/react-switch @radix-ui/react-tooltip @tanstack/react-table class-variance-authority clsx cmdk date-fns react-day-picker tailwind-merge zod zustand

Verify the app

Run your normal typecheck and build commands.

Manual