Records Table

Usage

import { RecordsTable } from '@wdzyi/ui';

<div style={{ height: 420 }}>
  <RecordsTable
    rows={[
      { id: 'larkspur', name: 'Larkspur Labs', tags: ['AI', 'B2B'], strength: 4, last: 2 },
      { id: 'halden', name: 'Halden & Pike', tags: ['Finance'], strength: 2, last: 41, note: null },
    ]}
    labels={{ name: 'Company', note: 'Next step' }}
    onAdd={(name) => add(name)}
    actions={[{ label: 'Delete', tone: 'del', onAction: (ids) => remove(ids) }]}
  />
</div>

Part of @wdzyi/ui. See setup to install it, or copy the code above.

Props

rowsRecordsTableRow[]

Each has an id and a name, then any of tags, a strength from 0 to 4, last, the days since you were in touch, a site, an href and an icon. A column shows once a row has something for it, and then stays, so an emptied table keeps its headers.

rows[].notestring | null

A column filled in later, such as by an agent. Null is still being worked out, and shimmers until its value arrives.

columnsRecordsTableColumn[]

The columns after the name, in order, for a table that should have them before it has any rows, such as one that starts empty.

labelsRecordsTableLabels

The headers, if yours aren’t Name, Tags, Strength, Last contact, Site and Note.

noun[string, string] = ['record', 'records']

What a row is, one and many, for the count at the foot and the last row.

onAdd(name: string) => void

Shows a last row for adding one by name. Enter adds it and stays open for the next, and Escape stops.

actionsRecordsTableAction[]

What the bar can do with the ticked rows: a label, and a function given their ids. Tone del is for something that can’t be undone. The selection clears after.

onSelectionChange(ids: string[]) => void

Called with the ticked ids whenever they change.

labelstring = 'Records'

Names the table for screen readers.

Notes

• Give it a height and it scrolls inside itself, with the header pinned above and the first column to the left. A shadow says something has gone under the column, a fade on the right says there’s more, and under 520px wide the first column gives the rest some of its width.
• A column sorts its natural way first, names from A and the strongest and most recent first, then the other way, then back to the order the rows came in. Each row glides from where it was, even one already on its way.
• Under the pointer, a row’s number turns into a checkbox. Once one is ticked they all show, Shift ticks the run between, and the count at the foot makes way for the actions. The rows are one tab stop: the arrows move between them, Shift and an arrow ticks as it goes, Space ticks, Enter opens the name’s link, Ctrl or Cmd and A ticks them all, and Escape lets go.
• Empty, every header stays across its width and the body says so in its middle: a small mark, No records yet, a line of help, and New record, which opens the field for the first. In a short table the mark goes first, then the line of help.
• A row added sends a pop cue and rows taken away send erase. Ticking sends select, letting go by hand sends toggle-off, and a column an agent has finished sends success. With reduced motion, rows move without gliding and nothing shimmers.