Utility
Terminal
Installation
$ pnpm dlx shadcn@latest add @termcn/ink/data-grid
Usage
import { DataGrid } from "@/components/ui/data-grid";<DataGrid
data={[
{ name: "Alice", role: "Engineer", status: "Active" },
{ name: "Bob", role: "Designer", status: "Away" },
]}
columns={[
{ key: "name", header: "Name", width: 12 },
{ key: "role", header: "Role", width: 12 },
{ key: "status", header: "Status", width: 10 },
]}
/>API Reference
DataGrid
| Prop | Type | Default |
|---|---|---|
data | T[] | required |
columns | DataGridColumn<T>[] | required |
pageSize | number | 10 |
onRowSelect | (row: T) => void | - |
onCellEdit | (row: T, key: string, value: string) => void | - |
borderColor | string | - |
borderStyle | "single" | "double" | "round" | "bold" | "single" |
showRowNumbers | boolean | false |
filterPlaceholder | string | - |
DataGridColumn
| Prop | Type | Default |
|---|---|---|
key | keyof T & string | required |
header | string | required |
width | number | - |
align | "left" | "right" | "center" | "left" |
render | (value: unknown, row: T) => string | - |
filterable | boolean | - |
sortable | boolean | - |
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.