Group By Selector
Grouping control with dimension chips for Status, Assignee, and Priority that previews the resulting group headers with per-group counts and mini progress bars.
Grouping control with dimension chips for Status, Assignee, and Priority that previews the resulting group headers with per-group counts and mini progress bars.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Group By Selector sits above the Acme backlog of 38 issues and lets users pivot the list across three dimensions: Status (active), Assignee, and Priority, plus a None chip to clear grouping. The resulting group headers show as a ruled list with Badge labels and a mini progress bar scaled to the 38 total: Open 14, In Progress 9, In Review 6, Done 7, Cancelled 2.
Dimensions are one small array and groups a second typed array with variant fields so the ruled list can style active versus closed states without a conditional on each row. The progress bar turns a count into a spatial read at a glance.
Reach for this block above any list or table that benefits from ad-hoc grouping. Replace the static dimensions and groups arrays with your live data and call your sort or group API when the active chip changes.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the issue backlog grouped by status. Other grouping surfaces:
Tip: keep grouping and sort independent controls; users often want to group by status but sort by updated date within each group.