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 and theme defaults

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

@import "./react-datatable/styles/datatable.css";
@source "./react-datatable";

Adjust the paths relative to the CSS file. Skip the datatable.css import when your app already provides the required shadcn-compatible :root, .dark, and @theme inline tokens.

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 (
    <div className="h-[560px] overflow-hidden rounded-lg border border-border">
      <Datatable tableKey="customers" columns={columns} data={rows} getRowId={(row) => row.id} />
    </div>
  )
}

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

Start the app

Run your app's normal dev command and open the local URL in your browser.

If your setup uses Vite, that is usually:

pnpm run dev

npm run dev

yarn dev

bun run dev

Manual