react-datatable

Use this path for TanStack Start projects created with the TanStack CLI.

Create or open a TanStack Start app

If you need a new app, create one first:

pnpm dlx @tanstack/cli@latest create

npx @tanstack/cli@latest create

yarn dlx @tanstack/cli@latest create

bunx @tanstack/cli@latest create

Choose TanStack Start, React, and the recommended defaults so Tailwind CSS and the @/* import alias are configured.

Confirm Tailwind and aliases

The recommended TanStack Start template already includes Tailwind and a @/* alias. If your app is custom, make sure src/styles/app.css imports Tailwind and TypeScript resolves @/* to src/*.

Install react-datatable

Run the installer from the app root:

pnpm dlx @react-datatable/cli install --token <license-token> --framework tanstack-start

npx @react-datatable/cli install --token <license-token> --framework tanstack-start

yarn dlx @react-datatable/cli install --token <license-token> --framework tanstack-start

bunx @react-datatable/cli install --token <license-token> --framework tanstack-start

The default target is src/react-datatable.

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

Create a table component

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

import { createFileRoute } from "@tanstack/react-router"
import { CustomersTable } from "@/components/CustomersTable"

export const Route = createFileRoute("/")({
  component: Page,
})

function Page() {
  return <CustomersTable />
}

Start the app

Run the TanStack Start dev server and open the local URL in your browser:

pnpm run dev

npm run dev

yarn dev

bun run dev