react-datatable

Use this path for React Router framework apps.

Create or open a React Router app

If you need a new app, create one first:

pnpm create react-router@latest my-appcd my-app

npm create react-router@latest my-appcd my-app

yarn create react-router my-appcd my-app

bun create react-router@latest my-appcd my-app

The standard template includes Tailwind CSS and the ~/* import alias.

Confirm the Tailwind entry

Make sure your global CSS file imports Tailwind:

@import "tailwindcss";

Install react-datatable

React Router apps usually keep app code under app/, so target that directory:

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

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

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

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

The installer adds Tailwind source scanning and imports app/react-datatable/styles/datatable.css only when your app does not already provide the required shadcn-compatible theme tokens.

Create a table component

Create app/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 in a route

Import the component into app/routes/home.tsx or your chosen route file:

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

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

Start the app

Run the React Router dev server and open the local URL in your browser:

pnpm run dev

npm run dev

yarn dev

bun run dev