Custom Components
Override table components and derive row, header, and cell props.
Overview
Use customization hooks when the table needs to fit an existing product shell without forking the core behavior. DataTable lets you override structural components and derive props from row, header, and cell state.
Component Overrides
Pass custom structural components through the components prop.
<DataTable
columns={columns}
data={data}
components={{
HeaderContent: ({ header, children }) => (
<div className="flex items-center gap-2">
{children}
{header.id === "status" ? <StatusSummary /> : null}
</div>
),
}}
/>Available override targets:
TableTableHeaderTableBodyTableRowTableHeadTableCellTableCaptionHeaderContentCellContentLoadingStateErrorState
Dynamic Props
Use prop factories when the structure stays the same but the styling or attributes depend on row or cell data.
<DataTable
columns={columns}
data={data}
rowProps={(row) => ({
className: row.original.status === "Active" ? "bg-green-50/50" : undefined,
})}
headProps={(header) => ({
className: header.id === "amount" ? "text-right" : undefined,
})}
cellProps={(cell) => ({
className: cell.column.id === "email" ? "text-fg-2" : undefined,
})}
/>API Reference
| Prop | Type | Description |
|---|---|---|
components | DataTableComponents<TData> | Override table subcomponents and state rows |
className | string | Class name for the root table wrapper |
tableProps | React.ComponentProps<typeof Table> | Props for the root table element |
headerProps | React.ComponentProps<typeof TableHeader> | Props for the header wrapper |
bodyProps | React.ComponentProps<typeof TableBody> | Props for the body wrapper |
rowProps | (row: Row<TData>) => React.ComponentProps<typeof TableRow> | Derive props for each row |
headProps | (header: Header<TData, unknown>) => React.ComponentProps<typeof TableHead> | Derive props for each header cell |
cellProps | (cell: Cell<TData, unknown>) => React.ComponentProps<typeof TableCell> | Derive props for each body cell |
caption | ReactNode | Accessible table caption |