DataTable#

A table with a cursor, a scrolling viewport and a sort. Columns are typed accessors, so the data stays your own objects and the table never has to be re-flattened to re-sort it.

Import#

import { DataTable } from '@sigx/terminal';

Usage#

import { component, defineApp, DataTable } from '@sigx/terminal';

const COLUMNS = [
    { key: 'host', label: 'Host', get: (r) => r.host },
    { key: 'turns', label: 'Turns', get: (r) => String(r.turns), align: 'right' },
    { key: 'p99', label: 'p99', get: (r) => `${r.p99}ms`, align: 'right' },
];

const App = component(() => {
    return () => (
        <DataTable
            title="Hosts"
            columns={COLUMNS}
            rows={hosts.value}
            identity={(r) => r.host}
            sortable
            height={20}
        />
    );
});

Prefer Table when you have a static grid of strings and want none of this.

Three behaviours worth knowing#

Shrinking takes space from the rightmost columns. The left column is nearly always the identity, and a table whose identities are truncated to make room for a latency figure is unusable. Truncation is always marked with …, never silent.

Sorting breaks ties on identity. A dashboard re-sorts every poll, and rows with equal values would otherwise swap places each time — motion that reads as activity when nothing changed. Pass identity for a stable key; the row index is the fallback.

The cursor clamps and the window moves by one. Holding ↓ stops at the bottom rather than wrapping, and stepping past the edge scrolls one row, not a screenful.

Keys#

While focused:

Props#

See also#

• Table — the static string grid.
• Shell — the dashboard frame that supplies width/height.