Utility
AI
Terminal
table-demo
No opentui live preview is registered for this example yet.
Installation
pnpm dlx shadcn@latest add @termcn/table
Usage
import { Table } from "@/components/ui/table";<Table
data={[
{ name: "api-server", cpu: "24%", memory: "512 MB" },
{ name: "worker", cpu: "58%", memory: "1.2 GB" },
]}
columns={[
{ key: "name", header: "Service" },
{ key: "cpu", header: "CPU", align: "right" },
{ key: "memory", header: "Memory", align: "right" },
]}
/>Examples
Sortable
Enable keyboard-driven column sorting with sortable. Use arrow keys to navigate columns and press s to sort.
Terminal
table-sortable
No opentui live preview is registered for this example yet.
Selectable rows
Use selectable with onSelect to choose a row with the arrow keys and Enter.
Terminal
table-selectable
No opentui live preview is registered for this example yet.
API Reference
Table
The table draws a fixed-width grid with Unicode box-drawing characters (ā, ā, ā, ā¦). Width follows column content; it does not stretch to the full terminal width.
| Prop | Type | Default |
|---|---|---|
data | T[] | required |
columns | Column<T>[] | required |
sortable | boolean | false |
selectable | boolean | false |
onSelect | (row: T) => void | undefined |
maxRows | number | 20 |
borderColor | string | undefined |
Column
| Prop | Type | Default |
|---|---|---|
key | keyof T & string | required |
header | string | required |
width | number | undefined |
align | "left" | "right" | "center" | "left" |