Installation
Astro
Use this path for Astro apps that render React islands.
Create or open an Astro app
If you need a new app, create one with Tailwind CSS and React:
pnpm create astro@latest my-app -- --template with-tailwindcss --install --add react --gitcd my-appnpm create astro@latest my-app -- --template with-tailwindcss --install --add react --gitcd my-appyarn create astro my-app --template with-tailwindcss --install --add react --gitcd my-appbun create astro@latest my-app -- --template with-tailwindcss --install --add react --gitcd my-appIf the generated Tailwind setup pulls Vite 8 and npm run build fails inside @tailwindcss/vite, pin Vite to the current 7.x range:
pnpm add -D vite@^7.3.3npm install -D vite@^7.3.3yarn add -D vite@^7.3.3bun add --dev vite@^7.3.3Confirm aliases
Make sure tsconfig.json resolves @/* to src/*:
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
}
}Install react-datatable
Run the installer from the app root:
pnpm dlx @react-datatable/cli install --token <license-token> --framework astronpx @react-datatable/cli install --token <license-token> --framework astroyarn dlx @react-datatable/cli install --token <license-token> --framework astrobunx @react-datatable/cli install --token <license-token> --framework astroThe default target is src/react-datatable.
Create a React 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 <Datatable tableKey="customers" columns={columns} data={rows} getRowId={(row) => row.id} />
}Use it from src/pages/index.astro:
---
import { CustomersTable } from "@/components/CustomersTable"
---
<CustomersTable client:load />