Table

A terminal table component for displaying tabular data with customizable styling.

Terminal

Installation

npx shadcn@latest add https://raw.githubusercontent.com/cjroth/ink-web/main/packages/ink-ui/registry/table.json

npx shadcn@latest add https://raw.githubusercontent.com/cjroth/ink-web/main/packages/ink-ui/registry/table.json

pnpm dlx shadcn@latest add https://raw.githubusercontent.com/cjroth/ink-web/main/packages/ink-ui/registry/table.json

bunx shadcn@latest add https://raw.githubusercontent.com/cjroth/ink-web/main/packages/ink-ui/registry/table.json

Usage

app/page.tsx

"use client";

import dynamic from "next/dynamic";

const Terminal = dynamic(() => import("./terminal"), {
  ssr: false,
});

export default function Home() {
  return <Terminal />;
}

app/terminal.tsx

"use client";

import { Box } from "ink";
import { InkXterm } from "ink-web";
import { Table } from '@/components/ui/table'
import "ink-web/css";
import "xterm/css/xterm.css";

const data = [
  { name: 'Alice', age: 30, city: 'NYC' },
  { name: 'Bob', age: 25, city: 'LA' },
  { name: 'Charlie', age: 35, city: 'Chicago' },
];

export default function Terminal() {
  return (
    <InkXterm focus>
      <Box flexDirection="column">
        <Table data={data} />
      </Box>
    </InkXterm>
  )
}

Props

Prop	Type	Default	Description
`data`	`T[]`	required	Array of objects to display as rows
`columns`	`(keyof T)[]`	all keys	Which columns to display
`padding`	`number`	`1`	Cell padding
`header`	`Component`	`Header`	Custom header cell component
`cell`	`Component`	`Cell`	Custom data cell component
`skeleton`	`Component`	`Skeleton`	Custom border/structure component

Examples

Basic Table

const data = [
  { id: 1, name: 'Item 1', price: 10 },
  { id: 2, name: 'Item 2', price: 20 },
];

<Table data={data} />

Specific Columns

const data = [
  { id: 1, name: 'Alice', email: 'alice@example.com', age: 30 },
  { id: 2, name: 'Bob', email: 'bob@example.com', age: 25 },
];

// Only show name and email columns
<Table data={data} columns={['name', 'email']} />

Custom Padding

<Table data={data} padding={2} />

Custom Cell Styling

import { Text } from 'ink'

const CustomCell = ({ children, column }) => (
  <Text color={column === 0 ? 'green' : undefined}>
    {children}
  </Text>
)

<Table data={data} cell={CustomCell} />

Custom Header Styling

import { Text } from 'ink'

const CustomHeader = ({ children }) => (
  <Text bold color="yellow" underline>
    {children}
  </Text>
)

<Table data={data} header={CustomHeader} />

Output Format

The table renders with box-drawing characters:

┌─────────┬─────┬─────────┐
│ name    │ age │ city    │
├─────────┼─────┼─────────┤
│ Alice   │ 30  │ NYC     │
├─────────┼─────┼─────────┤
│ Bob     │ 25  │ LA      │
└─────────┴─────┴─────────┘

Table

On this page