DetailList#

Aligned label/value pairs — the detail pane beside a table, or the header block of a status screen.

Import#

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

Usage#

<DetailList
    rows={[
        { label: 'Host', value: silo.host },
        { label: 'Activations', value: String(silo.activations) },
        { label: 'p99', value: `${silo.p99}ms`, tone: silo.p99 > 500 ? 'danger' : undefined },
    ]}
/>

Labels are fitted to one width so the values form a column. That alignment is the only reason to reach for this over hand-written text — and it is measured in display cells, so a label containing wide glyphs still lines up.

Props#

See also#

• DataTable — the table this often sits beside.