ReferenceComponentsTables
Table
Table component API, behavior, and executable example.
Loading executable example…
API and events
Render typed rows and columns with terminal-width fitting, virtualization, sorting, selection, and cell activation.
export function Table<TData>({
columns,
rows,
getRowKey,
selectedRowKeys,
defaultSelectedRowKeys = [],
onActivate,
onSelectionChange,
height = 10,
width = 80,
focusMode = "row",
frozenColumns = 0,
staticLimit = 1_000,
...props
}: TableProps<TData>): ReactNode;Props, functions, and events
| Member | Type | Required | Description | Related types |
|---|---|---|---|---|
columns | readonly TableColumn<TData>[] | Yes | The columns member uses the readonly TableColumn<TData>[] contract. | — |
rows | readonly TData[] | Yes | The rows member uses the readonly TData[] contract. | — |
getRowKey | (row: TData, index: number) => string | Yes | The getRowKey member uses the (row: TData, index: number) => string 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. | — |
selectedRowKeys | readonly string[] | undefined | No | The selectedRowKeys member uses the readonly string[] | undefined contract. | — |
defaultSelectedRowKeys | readonly string[] | undefined | No | The defaultSelectedRowKeys member uses the readonly string[] | undefined contract. | — |
onActivate | ((row: TData, column: TableColumn<TData>, rowIndex: number) => void | Promise<void>) | undefined | No | The onActivate member uses the ((row: TData, column: TableColumn<TData>, rowIndex: number) => void | Promise<void>) | undefined contract. | — |
onSelectionChange | ((selected: readonly string[]) => void | Promise<void>) | undefined | No | The onSelectionChange member uses the ((selected: readonly string[]) => void | Promise<void>) | undefined contract. | — |
staticLimit | number | undefined | No | The staticLimit member uses the number | 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 |
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<{ 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; }>> | undefined | No | The slots member uses the Partial<SlotComponents<{ 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; }>> | undefined contract. | BoxProps, SlotComponents, TextProps |
slotProps | Partial<SlotProps<{ 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; }, object>> | undefined | No | The slotProps member uses the Partial<SlotProps<{ 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; }, object>> | undefined contract. | BoxProps, SlotProps, TextProps |
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
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
import { Table } from "@/components/tuil/data-display/complex-data";