## Overview [#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 [#component-overrides]
Pass custom structural components through the `components` prop.
```tsx
(
{children}
{header.id === "status" ? : null}
),
}}
/>
```
Available override targets:
* `Table`
* `TableHeader`
* `TableBody`
* `TableRow`
* `TableHead`
* `TableCell`
* `TableCaption`
* `HeaderContent`
* `CellContent`
* `LoadingState`
* `ErrorState`
## Dynamic Props [#dynamic-props]
Use prop factories when the structure stays the same but the styling or attributes depend on row or cell data.
```tsx
({
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 [#api-reference]
| Prop | Type | Description |
| ------------- | ---------------------------------------------------------------------------- | ------------------------------------------- |
| `components` | `DataTableComponents` | Override table subcomponents and state rows |
| `className` | `string` | Class name for the root table wrapper |
| `tableProps` | `React.ComponentProps` | Props for the root table element |
| `headerProps` | `React.ComponentProps` | Props for the header wrapper |
| `bodyProps` | `React.ComponentProps` | Props for the body wrapper |
| `rowProps` | `(row: Row) => React.ComponentProps` | Derive props for each row |
| `headProps` | `(header: Header) => React.ComponentProps` | Derive props for each header cell |
| `cellProps` | `(cell: Cell) => React.ComponentProps` | Derive props for each body cell |
| `caption` | `ReactNode` | Accessible table caption |