# DataTable

Source: /tuil/docs/reference/components/tables/data-table
Locale: en

DataTable component API, behavior, and executable example.





{/* Generated by tooling/docs/generate-reference.ts. */}

<PublishedStory storyId="component-acceptance" variant="Table" />

## API and events [#api-and-events]

Render typed rows and columns with terminal-width fitting, virtualization, sorting, selection, and cell activation.

```tsx
export function DataTable<TData>({
  table,
  height = 10,
  width = 80,
  focusMode = "cell",
  frozenColumns,
  minColumnWidth = 4,
  maxColumnWidth = 40,
  staticLimit = 1_000,
  onActivate,
  ...props
}: DataTableProps<TData>): ReactNode;
```

### Props, functions, and events [#props-functions-and-events]

| Member           | Type                                                                                                                                                                                                                                                                                                                     | Required | Description                                                                                                                                                                                                                                                                                                                                                        | Related types                                                                                                                                                                                |
| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `table`          | `TanStackTable<TData>`                                                                                                                                                                                                                                                                                                   | Yes      | The `table` member uses the `TanStackTable<TData>` contract.                                                                                                                                                                                                                                                                                                       | —                                                                                                                                                                                            |
| `height`         | `number \| undefined`                                                                                                                                                                                                                                                                                                    | No       | The `height` member uses the `number \| undefined` contract.                                                                                                                                                                                                                                                                                                       | —                                                                                                                                                                                            |
| `width`          | `number \| undefined`                                                                                                                                                                                                                                                                                                    | No       | The `width` member uses the `number \| undefined` contract.                                                                                                                                                                                                                                                                                                        | —                                                                                                                                                                                            |
| `focusMode`      | `"row" \| "cell" \| undefined`                                                                                                                                                                                                                                                                                           | No       | The `focusMode` member uses the `"row" \| "cell" \| undefined` contract.                                                                                                                                                                                                                                                                                           | —                                                                                                                                                                                            |
| `frozenColumns`  | `number \| undefined`                                                                                                                                                                                                                                                                                                    | No       | The `frozenColumns` member uses the `number \| undefined` contract.                                                                                                                                                                                                                                                                                                | —                                                                                                                                                                                            |
| `minColumnWidth` | `number \| undefined`                                                                                                                                                                                                                                                                                                    | No       | The `minColumnWidth` member uses the `number \| undefined` contract.                                                                                                                                                                                                                                                                                               | —                                                                                                                                                                                            |
| `maxColumnWidth` | `number \| undefined`                                                                                                                                                                                                                                                                                                    | No       | The `maxColumnWidth` member uses the `number \| undefined` contract.                                                                                                                                                                                                                                                                                               | —                                                                                                                                                                                            |
| `staticLimit`    | `number \| undefined`                                                                                                                                                                                                                                                                                                    | No       | The `staticLimit` member uses the `number \| undefined` contract.                                                                                                                                                                                                                                                                                                  | —                                                                                                                                                                                            |
| `onActivate`     | `((row: TData, columnId: string) => void \| Promise<void>) \| undefined`                                                                                                                                                                                                                                                 | No       | The `onActivate` member uses the `((row: TData, columnId: string) => void \| Promise<void>) \| undefined` contract.                                                                                                                                                                                                                                                | —                                                                                                                                                                                            |
| `variant`        | `string \| undefined`                                                                                                                                                                                                                                                                                                    | No       | The `variant` member uses the `string \| undefined` contract.                                                                                                                                                                                                                                                                                                      | —                                                                                                                                                                                            |
| `size`           | `"sm" \| "md" \| "lg" \| undefined`                                                                                                                                                                                                                                                                                      | No       | The `size` member uses the `"sm" \| "md" \| "lg" \| undefined` contract.                                                                                                                                                                                                                                                                                           | —                                                                                                                                                                                            |
| `unstyled`       | `boolean \| undefined`                                                                                                                                                                                                                                                                                                   | No       | The `unstyled` member uses the `boolean \| undefined` contract.                                                                                                                                                                                                                                                                                                    | —                                                                                                                                                                                            |
| `className`      | `string \| undefined`                                                                                                                                                                                                                                                                                                    | No       | The `className` member uses the `string \| undefined` contract.                                                                                                                                                                                                                                                                                                    | —                                                                                                                                                                                            |
| `layout`         | `Partial<Omit<LayoutNodeInput, "children" \| "id" \| "semantics">> \| undefined`                                                                                                                                                                                                                                         | No       | The `layout` member uses the `Partial<Omit<LayoutNodeInput, "children" \| "id" \| "semantics">> \| undefined` contract.                                                                                                                                                                                                                                            | —                                                                                                                                                                                            |
| `id`             | `string \| undefined`                                                                                                                                                                                                                                                                                                    | No       | The `id` member uses the `string \| undefined` contract.                                                                                                                                                                                                                                                                                                           | —                                                                                                                                                                                            |
| `testId`         | `string \| undefined`                                                                                                                                                                                                                                                                                                    | No       | The `testId` member uses the `string \| undefined` contract.                                                                                                                                                                                                                                                                                                       | —                                                                                                                                                                                            |
| `role`           | `SemanticRole \| undefined`                                                                                                                                                                                                                                                                                              | No       | The `role` member uses the `SemanticRole \| undefined` contract.                                                                                                                                                                                                                                                                                                   | [`SemanticRole`](/tuil/docs/reference/packages/core/api/semantic-role)                                                                                                                            |
| `label`          | `string \| undefined`                                                                                                                                                                                                                                                                                                    | No       | The `label` member uses the `string \| undefined` contract.                                                                                                                                                                                                                                                                                                        | —                                                                                                                                                                                            |
| `description`    | `string \| undefined`                                                                                                                                                                                                                                                                                                    | No       | The `description` member uses the `string \| undefined` contract.                                                                                                                                                                                                                                                                                                  | —                                                                                                                                                                                            |
| `disabled`       | `boolean \| undefined`                                                                                                                                                                                                                                                                                                   | No       | The `disabled` member uses the `boolean \| undefined` contract.                                                                                                                                                                                                                                                                                                    | —                                                                                                                                                                                            |
| `readOnly`       | `boolean \| undefined`                                                                                                                                                                                                                                                                                                   | No       | The `readOnly` member uses the `boolean \| undefined` contract.                                                                                                                                                                                                                                                                                                    | —                                                                                                                                                                                            |
| `selected`       | `boolean \| undefined`                                                                                                                                                                                                                                                                                                   | No       | The `selected` member uses the `boolean \| undefined` contract.                                                                                                                                                                                                                                                                                                    | —                                                                                                                                                                                            |
| `checked`        | `boolean \| undefined`                                                                                                                                                                                                                                                                                                   | No       | The `checked` member uses the `boolean \| undefined` contract.                                                                                                                                                                                                                                                                                                     | —                                                                                                                                                                                            |
| `expanded`       | `boolean \| undefined`                                                                                                                                                                                                                                                                                                   | No       | The `expanded` member uses the `boolean \| undefined` contract.                                                                                                                                                                                                                                                                                                    | —                                                                                                                                                                                            |
| `valueText`      | `string \| undefined`                                                                                                                                                                                                                                                                                                    | No       | The `valueText` member uses the `string \| undefined` contract.                                                                                                                                                                                                                                                                                                    | —                                                                                                                                                                                            |
| `slots`          | `Partial<SlotComponents<&#123; root: import("ink").BoxProps; header: import("ink").BoxProps; headerCell: import("ink").TextProps; body: import("ink").BoxProps; row: import("ink").BoxProps; cell: import("ink").TextProps; overflow: import("ink").TextProps; empty: import("ink").TextProps; &#125;>> \| undefined`    | No       | The `slots` member uses the `Partial<SlotComponents<&#123; root: import("ink").BoxProps; header: import("ink").BoxProps; headerCell: import("ink").TextProps; body: import("ink").BoxProps; row: import("ink").BoxProps; cell: import("ink").TextProps; overflow: import("ink").TextProps; empty: import("ink").TextProps; &#125;>> \| undefined` contract.        | [`BoxProps`](/tuil/docs/reference/packages/ink/api/box-props), [`SlotComponents`](/tuil/docs/reference/packages/theme/api/slot-components), [`TextProps`](/tuil/docs/reference/packages/ink/api/text-props) |
| `slotProps`      | `Partial<SlotProps<&#123; root: import("ink").BoxProps; header: import("ink").BoxProps; headerCell: import("ink").TextProps; body: import("ink").BoxProps; row: import("ink").BoxProps; cell: import("ink").TextProps; overflow: import("ink").TextProps; empty: import("ink").TextProps; &#125;, object>> \| undefined` | No       | The `slotProps` member uses the `Partial<SlotProps<&#123; root: import("ink").BoxProps; header: import("ink").BoxProps; headerCell: import("ink").TextProps; body: import("ink").BoxProps; row: import("ink").BoxProps; cell: import("ink").TextProps; overflow: import("ink").TextProps; empty: import("ink").TextProps; &#125;, object>> \| undefined` contract. | [`BoxProps`](/tuil/docs/reference/packages/ink/api/box-props), [`SlotProps`](/tuil/docs/reference/packages/theme/api/slot-props), [`TextProps`](/tuil/docs/reference/packages/ink/api/text-props)           |

`onActivate`, `onSelectionChange`, `onToggleSelection`, and `onSortColumn` expose table intent.

Callback props run after the documented input is accepted. Callbacks are not cancellable unless their return type or description states otherwise.

## Interaction and capabilities [#interaction-and-capabilities]

Arrow keys navigate cells or rows; Space toggles selection; Enter activates; configured keys sort columns.

The published manifest records keyboard, focus, pointer, theme, terminal, semantic, event, and dependency requirements.

## Complete import [#complete-import]

```tsx
import { DataTable } from "@/components/tuil/data-display/complex-data";
```