Row Selection Table Block for React

The block remembers the last box you pressed. When you press another with Shift held, every row from the remembered one to this one is ticked, or cleared if the box you pressed ended up unticked, whichever way round they are in the table. A press without Shift moves the remembered box and changes only that row. The same works from the keyboard: focus a box and press Shift+Space.

It ticks every row, or clears them all when every row is ticked. When only some rows are ticked it shows a dash instead of a tick, which is the standard way to say "some of these"; pressing it then ticks the rest. It is named "Select all plants", and each row's box is named "Select" followed by the plant, so a screen reader never hears an unlabelled checkbox.

Prices are typed in cents and the line adds the ticked rows with a small helper, so it always equals what the rows show and never meets a rounding error. The line is the only live region: it is announced each time the selection changes, and a range adds a sentence naming the first and last plant for screen readers.

The Pot and Stock columns fold into a line under the plant's name, so nothing scrolls sideways at 320 pixels, and every box and the total stay on the first screen. The total line wraps under the heading.

It is a real table with a caption, column headers and the plant's name as each row header, and the boxes are real checkboxes with visible focus. Selected rows are marked by a tint, a bar and the count, never by colour alone. The table's region is focusable so a keyboard can scroll it if it is ever wider than its frame.

The selection is plain state in the demo: nothing is saved or sent. To act on it, read the chosen ids and call your own code, or see the bulk actions table for a version with an action bar, select across pages and Undo. Wire pick to your own selection store if rows come from a server.