Baseline Comparison Table Block for React

Edit BODIES and GROUPS. A spec gives either numbers (one figure per body, in the bodies' order, with its unit written for one and for many, or money for a price) or words (one word per body). figureOf, relationOf and trendOf draw the first and second lines from them and the baseline, so adding a spec is one entry. Differences are derived, never typed, so they can't drift from the figures.

A number is compared with the baseline's: the gap is shown with its sign and unit ("+12 MP", "-90 g", "-$900") and an arrow that points up or down, or "Same" with an equals sign when it is zero. A word is "Same" when it matches the baseline's and "Different" when it doesn't. The baseline's own cells say "Baseline". Nothing is coloured: direction is an arrow, a sign and a word, so it reads in any theme and without colour.

Each second line carries a hidden phrase after the visible one ("+12 MP", then "more than Grove 33"), so the sign and arrow don't have to be guessed. The table has a caption that names the baseline, the spec name is each row's header and each body's name is its column header. The polite line says which body is the baseline whenever it changes.

The band stacks, with the menu full width, and the table scrolls sideways inside its labelled, focusable region while the spec names stay pinned at the start, so a figure is never separated from its name. Group names stay in view too. The page itself never scrolls sideways.

No. Every cell has two lines, a value and a relation, so a cell is the same size whichever body is the baseline, and the baseline badge in the heads is always drawn, hidden on the others, so the head doesn't change either. Only the tint and the second lines change.

The specs are example figures typed into the file, and the baseline is one useState; nothing is fetched or saved. To use real data, load the bodies and specs, keep the baseline in your page state or the URL so a comparison can be shared, and leave the drawing alone.