Grouping

Cards group as table rows do. GroupBy or GroupLevels names the columns, and each group's header goes above its cards, the width of the list, with the group's name, how many records it holds and its subtotals. Cards have no column headers to drag, so with AllowGrouping the strip above the cards groups them from its Add grouping menu, and lets users change the grouping or take it away.

Contacts as Cards, in Groups

The contacts start grouped by gender and, within each, by age in ranges of five years — type another size on the age's chip, or clear it to group by each age. Add a level from the strip's Add grouping menu, such as the company, which goes outside the age ranges — a range, like a date, can only be the innermost level. On the strip, the arrow on each chip reverses the order of its groups, and the X takes that level away. Each group's header shows how many contacts it holds and their average age; click a header to collapse the group. The toolbar's Totals button picks those figures for the headers and under the cards: each column's that fit it — a sum, average, minimum or maximum of a number, the earliest or latest of a date, a count of anything. Switch to table rows from the toolbar to see the same groups there.

React example Blazor example React TypeScript AccountAndContactCustomViews.ts Razor AccountAndContactCustomViews.cs