charcell 0.1.0
navigation
linksgithubnpm
mode

Table

rows and columns, with lines between them where you want them.

usage

example

code

import { Table } from 'charcell/react';

export function TableExample() {
  return (
    <Table
      columns={[
        { key: 'rider', label: 'rider' },
        { key: 'weapon', label: 'weapon' },
        { key: 'hits', label: 'hits', align: 'end' },
      ]}
      rows={[
        { rider: 'a vulture', weapon: 'chain', hits: '4' },
        { rider: 'a vulture', weapon: 'chainsaw', hits: '1' },
        { rider: 'a rottwheeler', weapon: 'mace', hits: '4' },
      ]}
    />
  );
}

as text

at rest
┌───────────────┬──────────┬──────┐
│ rider         │ weapon   │ hits │
├───────────────┼──────────┼──────┤
│ a vulture     │ chain    │    4 │
├───────────────┼──────────┼──────┤
│ a vulture     │ chainsaw │    1 │
├───────────────┼──────────┼──────┤
│ a rottwheeler │ mace     │    4 │
└───────────────┴──────────┴──────┘
vertical bar hover
┌───────────────┬──────────┬──────┐
│ rider         │ weapon   │ hits │
├───────────────┼──────────┼──────┤
│ a vulture     │ chain    │    4 │
├───────────────┼──────────┼──────┤
│ a vulture     │ chainsaw │    1 │
├───────────────┼──────────┼──────┤
│ a rottwheeler │ mace     │    4 │
└───────────────┴──────────┴──────┘
step hover
┌───────────────┬──────────┬──────┐
│ rider         │ weapon   │ hits │
├───────────────┼──────────┼──────┤
│ a vulture     │ chain    │    4 │
├───────────────┼──────────┼──────┤
│ a vulture     │ chainsaw │    1 │
├───────────────┼──────────┼──────┤
│ a rottwheeler │ mace     │    4 │
└───────────────┴──────────┴──────┘
horizontal bar hover
┌───────────────┬──────────┬──────┐
│ rider         │ weapon   │ hits │
├───────────────┼──────────┼──────┤
│ a vulture     │ chain    │    4 │
├───────────────┼──────────┼──────┤
│ a vulture     │ chainsaw │    1 │
├───────────────┼──────────┼──────┤
│ a rottwheeler │ mace     │    4 │
└───────────────┴──────────┴──────┘
press
┌───────────────┬──────────┬──────┐
│ rider         │ weapon   │ hits │
├───────────────┼──────────┼──────┤
│ a vulture     │ chain    │    4 │
├───────────────┼──────────┼──────┤
│ a vulture     │ chainsaw │    1 │
├───────────────┼──────────┼──────┤
│ a rottwheeler │ mace     │    4 │
└───────────────┴──────────┴──────┘

props

columnsTableColumn[]
The columns, in order: { key, label, align }; align: 'end' suits numbers.
rowsTableRow[]
The records, each cell the value under its column's key, printed as text (an empty cell for null or undefined).
captionstring
Names the table for assistive technology, as its <caption>, and its scroll area, a region; the page shows it no more than the header it keeps with hideHeader.
hideHeaderboolean
Keeps the header for assistive technology only.
variant'boxed' | 'dense'= 'boxed'
boxed draws the ring and the inner strokes; dense is the bare listing, columns 2ch apart.
separators'both' | 'rows' | 'columns' | 'none'= 'both'
Which inner strokes a boxed table draws.
border'none' | 'single' | 'rounded' | 'heavy' | 'double'
The style of every side of a boxed table's ring: single, rounded, heavy, double or none.
borderX'none' | 'single' | 'rounded' | 'heavy' | 'double'
The style of a boxed table's ring's start and end sides, over border.
borderY'none' | 'single' | 'rounded' | 'heavy' | 'double'
The style of a boxed table's ring's top and bottom sides, over border.
borderTop'none' | 'single' | 'rounded' | 'heavy' | 'double'
The style of a boxed table's ring's top side, over borderY and border.
borderEnd'none' | 'single' | 'rounded' | 'heavy' | 'double'
The style of a boxed table's ring's end side, over borderX and border.
borderBottom'none' | 'single' | 'rounded' | 'heavy' | 'double'
The style of a boxed table's ring's bottom side, over borderY and border.
borderStart'none' | 'single' | 'rounded' | 'heavy' | 'double'
The style of a boxed table's ring's start side, over borderX and border.