Utility
Terminal
Installation
$ pnpm dlx shadcn@latest add @termcn/ink/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
Selectable rows
Use selectable with onSelect to choose a row with the arrow keys and Enter.
Terminal
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 | - |
maxRows | number | 20 |
borderColor | string | - |
Column
| Prop | Type | Default |
|---|---|---|
key | keyof T & string | required |
header | string | required |
width | number | - |
align | "left" | "right" | "center" | "left" |
Notes
Accessibility
termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.
- Keyboard: Arrow keys move the current item or viewport;
Home/Endmove to the boundaries;PageUp/PageDownmove by a page;Enter/Spaceselect or expand when supported;Tab/Shift+Tableave the composite. - Focus and composition: Input is active only while the component's focus target is focused, enabled, active, and inside the topmost focus scope.
- Screen reader: Ink labels and semantic state expose the component without relying on visual styling alone.