About this block

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.

When to use

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

• App shell
• Query language bar

After

• Data table
• Results density toggle

What you can display

One strong use is the issue backlog grouped by status. Other grouping surfaces:

• Grouped by assignee. Each team member becomes a header with their open task count.
• Grouped by priority. Urgent and High float to the top, Low collapses by default.
• Project group headers. Cross-project views where each project name is the grouping dimension.

Tip: keep grouping and sort independent controls; users often want to group by status but sort by updated date within each group.