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

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 <Datatable tableKey="customers" columns={columns} data={rows} getRowId={(row) => row.id} />
}

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>
  )
}

Verify the app

Run:

pnpm run build

npm run build

yarn build

bun run build