Diff Table
Changes proposed to a table, shown where they’d land. Accept or reject each one, or all at once, and old values morph into the new.
Usage
import { DiffTable } from '@wdzyi/ui';
<DiffTable
columns={[
{ key: 'plan', label: 'Plan' },
{ key: 'price', label: 'Monthly', numeric: true },
]}
rows={[
{ id: 'team', cells: { plan: 'Team', price: '$48' }, to: { price: '$54' } },
{ id: 'pro', cells: { plan: 'Pro', price: '$90' }, kind: 'added' },
{ id: 'legacy', cells: { plan: 'Legacy', price: '$20' }, kind: 'removed' },
]}
onDecisionsChange={save}
/>Part of @wdzyi/ui. See setup to install it, or copy the code above.
Props
- columnsDiffTableColumn[]
- Each has a key and a label. Mark figures numeric to set them in mono on the right, and mark minor the ones to drop first when it’s narrow.
- rowsDiffTableRow[]
- Each has an id and its cells. A change is new values for some cells in to, or a kind of added or removed. Add to it as a proposal arrives.
- workingboolean = false
- Changes are still arriving. The foot shows it working, and the decisions wait until it’s done.
- labelstring = 'Proposing changes'
- What the foot says while it works.
- captionstring = 'Proposed changes'
- Names the table for screen readers.
- decisionsRecord<string, DiffTableDecision>
- Accepted or rejected, by row id, to hold the decisions yourself. Without it, the table keeps its own.
- onDecisionsChange(decisions) => void
- Called with every decision so far whenever one is made or undone.
Notes
- Accepting a new value morphs the old one into it, with Morph Text. The strike through an old value draws itself across, one cell after another, and draws back if the value stays.
- Accept all and Reject all decide whatever is left in a ripple down the table, a row every 70ms. Undo steps back one decision at a time.
- Deciding a change moves focus to the next one still to decide, so a whole proposal can be reviewed from the keyboard.
- Under 400px wide its minor columns drop out, and under 420px the foot keeps just the count, so the buttons keep their room.
- With reduced motion, values change without the morph and rows come and go without folding.