Table

Installation

bunnpmpnpmyarn
$ pnpm dlx shadcn@latest add @termcn/table
Copy

Usage

Copyimport { Table } from "@/components/ui/table";

Copy<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.

Selectable rows

Use selectable with onSelect to choose a row with the arrow keys and Enter.

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.

Column