DataTable
Flexible data table for displaying ERP ledger streams, employee rosters, transaction logs, and any tabular data with custom column renderers.
Installation
$ npx shadcn@latest add data-tablePreview
Ledger StreamView all
Spain Office - Madrid HQ
VAT/IVA Tax Filing Q1
+€412,980.00
USA Office - New York Branch
Software License Acquisition
+$124,500.00
Dubai Office - Marina Plaza
Local compliance deposit pending
AED 1,500,000
Usage (React/TSX)
import { DataTable, Column } from "@/components/ui/data-table"
// Define your data type
interface Employee {
name: string;
role: string;
location: string;
status: string;
}
// Define columns with custom renderers
const columns: Column<Employee>[] = [
{ key: "name", header: "Name" },
{ key: "role", header: "Role" },
{ key: "location", header: "Location" },
{ key: "status", header: "Status" },
]
// Use in your component
<DataTable
columns={columns}
data={employees}
title="Talent Roster"
action={<a href="/roles">Manage Roles</a>}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| columns | Column<T>[] | — | Column definitions with key, header, and optional render function. |
| data | T[] | — | Array of row data objects. |
| title | string | — | Optional table title in the header. |
| action | ReactNode | — | Optional action element in the header (e.g., 'View all' link). |
| className | string | — | Additional CSS classes to apply. |