shadcn.io is not affiliated with official shadcn/ui
Grouped Rows Table Block for Radix UI
A pantry stock table regrouped by a Group by toggle (supplier, category or none), with group rows that fold, count their items, add up their value and stick under the column heads.
Installation
Overview
Let people look at the same rows in different groups, with this grouped rows table for React with Radix UI. A Toggle Group says Group by Supplier, Category or None, and one native table of fourteen pantry items regroups at once. Each group is a tbody that opens with a row spanning the table, a th with scope="colgroup" holding a button that folds it, the number of items and the group's value, added up from its rows. The group row sticks under the column heads while the frame scrolls, Expand all and Collapse all work on the groups of the mode you are in, and each mode remembers which of its groups you folded. The frame keeps its height, and all four columns stay on a phone because the group rows span them. It's built from Toggle Group, Button and Guides. For stock, menus, rosters and any list worth viewing more than one way.
FAQ
How does Group by work?
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.
Where do the group values come from?
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.
Does each mode really remember its folds?
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.
What sticks when I scroll?
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.
Is it accessible?
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.