Grouped Rows Table Block for React

The items are typed once, each with a supplier and a category. Choosing a mode asks a helper for the groups of that mode, in the same rows, with the items inside each group sorted by name. None is one group with no row of its own, so the table is flat. The line under the table says how the rows are grouped and how many groups are folded.

They are worked out, never typed twice: the value of a group is the sum, in cents, of the values of its items, and the count beside it is the number of those items. Change an item and every group that holds it follows.

Yes. The folded groups are kept for each mode separately: fold Branwell Produce under Supplier, switch to Category and fold Dairy, then switch back and Branwell Produce is still folded. Expand all and Collapse all change only the mode you are in, and with None, where there is nothing to fold, they answer in words instead of doing nothing.

The column heads stick at the top of the frame and the group row of the group you are reading sticks directly under them, each on a solid background so the rows never show through. Scrolling happens inside the frame, which can be reached with Tab, so the page and the block keep their height.

The table has a caption, column heads and the item as each row header. A group row is a colgroup header with a button that has aria-expanded and aria-controls and is named with the group, its item count and its value. A folded group's rows are hidden from everyone, not just from the eye.

The stock is typed in the file and the folds are plain state, so nothing is saved or sent. Replace ITEMS, SUPPLIERS and CATEGORIES with your own; to group by something else, add a mode to MODES and a branch to groupsFor.