Utility
AI
Terminal
Installation
pnpm dlx shadcn@latest add https://termcn.dev/r/table.json
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
import { Table } from "@/registry/ui/table";
const data = [
{ downloads: 1240, name: "badge", status: "stable" },
{ downloads: 980, name: "alert", status: "stable" },
{ downloads: 2100, name: "spinner", status: "beta" },
{ downloads: 1560, name: "table", status: "stable" },
];
export default function TableSortable() {
return (
<Table
columns={[
{ header: "Component", key: "name" },
{ header: "Status", key: "status" },
{ align: "right", header: "Downloads", key: "downloads" },
]}
data={data}
sortable
/>
);
}
Selectable rows
Use selectable with onSelect to choose a row with the arrow keys and Enter.
Terminal
import { Box, Text } from "ink";
import { useState } from "react";
import { Table } from "@/registry/ui/table";
const data = [
{ id: "a", name: "Alpha" },
{ id: "b", name: "Beta" },
{ id: "c", name: "Gamma" },
];
export default function TableSelectable() {
const [picked, setPicked] = useState<string>("");
return (
<Box flexDirection="column" gap={1}>
<Table
columns={[
{ header: "ID", key: "id" },
{ header: "Name", key: "name" },
]}
data={data}
selectable
onSelect={(row) => setPicked(`${row.id}: ${row.name}`)}
/>
{picked ? (
<Text dimColor>Selected: {picked}</Text>
) : (
<Text dimColor>↑↓ move · Enter select</Text>
)}
</Box>
);
}
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" |