Table

Status: Planned — Table is designed for the upcoming @bettertui/react adapter. It is not yet available in @bettertui/core.

Table will display tabular data with optional sorting and row selection.

Planned API

import { Table } from '@bettertui/react';

const data = [
  { name: 'Alice', role: 'Engineer', status: 'Active' },
  { name: 'Bob',   role: 'Designer', status: 'Active' },
  { name: 'Carol', role: 'Manager',  status: 'Away'   },
];

function App() {
  return (
    <Table
      columns={[
        { key: 'name',   title: 'Name'   },
        { key: 'role',   title: 'Role'   },
        { key: 'status', title: 'Status' },
      ]}
      data={data}
      bordered
      selectable
      onSelect={(row) => console.log('Selected:', row)}
    />
  );
}

Planned Props

Prop	Type	Default	Description
columns	Column[]	—	Column definitions
data	Row[]	—	Row data
bordered	boolean	false	Show cell borders
selectable	boolean	false	Enable row selection
onSelect	(row: Row) => void	—	Row selection handler
sortBy	string	—	Column key to sort by
sortOrder	'asc' | 'desc'	'asc'	Sort direction

Planned Column Definition

interface Column {
  key: string;
  title: string;
  width?: number;
  align?: 'left' | 'center' | 'right';
  render?: (value: unknown, row: unknown) => string;
}

Vanilla Alternative

Build a table using Box grids until the React adapter ships:

import { Box, Text, createCliRenderer } from '@bettertui/core';

const renderer = await createCliRenderer({ exitOnCtrlC: true });

const rows = [
  ['Alice', 'Engineer', 'Active'],
  ['Bob',   'Designer', 'Active'],
];

const table = new Box(renderer, {
  flexDirection: 'column',
  border: true,
  borderStyle: 'single',
});

for (const [name, role, status] of rows) {
  const row = new Box(renderer, { flexDirection: 'row' });
  row.add(new Text(renderer, { content: name,   width: 12, fg: '#c0caf5' }));
  row.add(new Text(renderer, { content: role,   width: 12, fg: '#a9b1d6' }));
  row.add(new Text(renderer, { content: status, width: 10, fg: '#9ece6a' }));
  table.add(row);
}

renderer.root.add(table);
renderer.start();