react-datatable

Use this path for a Vite app with React, TypeScript, and Tailwind CSS.

Create or open a Vite React app

If you need a new app, create one with the React + TypeScript template:

pnpm create vite my-app --template react-tscd my-apppnpm install

npm create vite@latest my-app -- --template react-tscd my-appnpm install

yarn create vite my-app --template react-tscd my-appyarn install

bun create vite my-app --template react-tscd my-appbun install

Configure Tailwind CSS

Install Tailwind for Vite when your app does not have it yet:

pnpm add -D tailwindcss @tailwindcss/vite

npm install -D tailwindcss @tailwindcss/vite

yarn add -D tailwindcss @tailwindcss/vite

bun add --dev tailwindcss @tailwindcss/vite

Add the Tailwind Vite plugin to vite.config.ts:

import tailwindcss from "@tailwindcss/vite"
import react from "@vitejs/plugin-react"
import { defineConfig } from "vite"

export default defineConfig({
  plugins: [react(), tailwindcss()],
})

Make sure src/index.css imports Tailwind:

@import "tailwindcss";

Install react-datatable

Run the installer from the app root:

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

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

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

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

The default target is src/react-datatable.

Create a table component

Create src/components/CustomersTable.tsx and import from the copied source:

import { Datatable, type DatatableColumn } from "../react-datatable"

type Customer = { id: string; company: string; status: string }

const rows: Customer[] = [
  { id: "1", company: "Acme Inc.", status: "Active" },
  { id: "2", company: "Globex", status: "Trial" },
  { id: "3", company: "Initech", status: "Active" },
  { id: "4", company: "Umbrella", status: "Paused" },
  { id: "5", company: "Stark Industries", status: "Active" },
]

const columns: DatatableColumn<Customer>[] = [
  { id: "company", accessorKey: "company", header: "Company", filterType: "text" },
  { id: "status", accessorKey: "status", header: "Status", filterType: "text-list" },
]

export function CustomersTable() {
  return <Datatable tableKey="customers" columns={columns} data={rows} getRowId={(row) => row.id} />
}

Render the table in `src/App.tsx`

Replace the default app content with your table component:

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

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

Verify the app

Run a production build:

pnpm run build

npm run build

yarn build

bun run build

Vite