react-datatable

Use this path for Laravel apps with Vite, React, TypeScript, and Tailwind CSS.

Create or open a Laravel app

If you need a new Laravel app, create it first:

laravel new my-app
cd my-app

Then add the frontend stack you use for React. The important pieces for react-datatable are Vite, React, TypeScript, Tailwind CSS, and a browser entry under resources/js.

Confirm the Vite config

Make sure vite.config.ts includes the Laravel and React plugins your app uses.

Confirm the CSS entry

Laravel Vite apps usually load Tailwind from resources/css/app.css:

@import "tailwindcss";

Install react-datatable

Install the source under resources/js:

pnpm dlx @react-datatable/cli install --token <license-token> --framework laravel --target resources/js/react-datatable

npx @react-datatable/cli install --token <license-token> --framework laravel --target resources/js/react-datatable

yarn dlx @react-datatable/cli install --token <license-token> --framework laravel --target resources/js/react-datatable

bunx @react-datatable/cli install --token <license-token> --framework laravel --target resources/js/react-datatable

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

Create a table component

Create resources/js/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 resources/js/app.tsx:

import { createRoot } from "react-dom/client"
import { CustomersTable } from "./components/CustomersTable"

const element = document.getElementById("app")

if (element) {
  createRoot(element).render(<CustomersTable />)
}

Start the app

Run the Laravel + Vite dev workflow from the app root and open the local app in your browser:

php artisan servepnpm run dev

php artisan servenpm run dev

php artisan serveyarn dev

php artisan servebun run dev

Laravel