Dynamic Grouping in Grids

Grid control supports multiple levels of grouping and aggregation.

Group by:

Name	Continent	Browser	OS	Visits
Marcos Buckridge	Australia	Safari	Android	69
Chyna Schowalter	Africa	Safari	Windows	9
Fredy Marquardt	North America	Safari	Ubuntu	45
Justen Lesch	Asia	Edge	Ubuntu	96
Susana Gleichner	Australia	Safari	Ubuntu	52
Rosanna Bernhard	Asia	Safari	Ubuntu	18
Raleigh Kemmer	North America	Opera	iOS	66
Maynard Hand	Asia	Firefox	Ubuntu	64
Mariam Towne	South America	Edge	Mac OS	12
Elouise Connelly	Africa	Internet Explorer	Android	61
Margie Mayert	South America	Safari	Windows	28
Monserrate Friesen	Antarctica	Internet Explorer	Ubuntu	34
Hillard Swaniawski	Europe	Chrome	Ubuntu	18
Alyce Funk	North America	Firefox	Android	82
Davon Murray	Australia	Opera	Mac OS	38
Chaim Fay	North America	Safari	Mac OS	98
Marilie Parisian	Africa	Safari	Ubuntu	47
Christiana Schamberger	Africa	Opera	Android	16
Alexys Schroeder	Asia	Internet Explorer	Ubuntu	65
Carlo Mann	Africa	Firefox	Android	33
Eugenia Wolff	Africa	Safari	Mac OS	11
Chad Oberbrunner	North America	Edge	iOS	26
Etha Rogahn	North America	Safari	Mac OS	97
Tatyana Braun	North America	Firefox	Android	25
Jayson Hickle	Europe	Opera	Ubuntu	64
Rubye Baumbach	Europe	Safari	Windows	66
Durward Homenick	Australia	Opera	Mac OS	73
Haven Krajcik	South America	Opera	Windows	6
Opal Schinner	Africa	Firefox	Android	26
Dorothy Pagac	Australia	Edge	Ubuntu	67
Susanna Anderson	Asia	Firefox	iOS	2
Eudora Heathcote	Europe	Safari	Windows	71
Tracy Bode	South America	Firefox	Windows	97
Hester Fahey	Asia	Internet Explorer	iOS	90
Chloe Brakus	Africa	Firefox	Ubuntu	62
Gussie Brekke	Australia	Edge	Android	7
Beaulah Waters	Europe	Safari	Ubuntu	66
Toy Carter	South America	Edge	Windows	50
Kristian Von	Antarctica	Opera	Windows	5
Name Wilkinson	Antarctica	Internet Explorer	Mac OS	59
Leo Lebsack	South America	Opera	Windows	7
Norval Boehm	Australia	Firefox	Android	65
Ursula Bashirian	South America	Firefox	Ubuntu	61
Billy Rodriguez	North America	Internet Explorer	Ubuntu	45
Celestine Roob	Asia	Firefox	Ubuntu	68
Andy Bogan	South America	Opera	Ubuntu	76
Tyrell Brekke	South America	Edge	Mac OS	34
Vida Robel	South America	Firefox	Android	34
Tod Dicki	Africa	Opera	Android	68
Jasmin West	South America	Chrome	Mac OS	93
Braden Reichert	North America	Firefox	iOS	25
Reese Rodriguez	Europe	Chrome	Ubuntu	96
Fabiola Wiza	Australia	Chrome	Ubuntu	91
Natalia Langworth	Asia	Safari	Android	69
Yoshiko Ziemann	Australia	Firefox	Mac OS	27
Alvena McDermott	Antarctica	Chrome	Mac OS	88
Chris Morissette	Antarctica	Opera	iOS	40
Kristoffer Hahn	North America	Opera	Ubuntu	97
Carlo Harvey	Asia	Firefox	Android	66
Hailee Schamberger	North America	Edge	Android	72
Ambrose Morar	North America	Safari	Android	10
Triston Cronin	Africa	Firefox	Android	74
Watson Okuneva	Africa	Internet Explorer	Ubuntu	26
Xavier Cummings	Africa	Safari	Mac OS	56
Mustafa Marquardt	South America	Safari	Ubuntu	89
Wendell Ebert	North America	Chrome	Ubuntu	83
Caroline Stokes	South America	Edge	Android	79
Destin Hettinger	Antarctica	Opera	Windows	31
Bailey Gerlach	Europe	Internet Explorer	Mac OS	90
Gabriella Wuckert	South America	Firefox	Windows	71
Antonina Douglas	Antarctica	Opera	Windows	31
Ashtyn Lowe	Antarctica	Opera	Android	30
Therese Lehner	Africa	Firefox	Mac OS	41
Coty Hammes	North America	Edge	Mac OS	35
Lee Osinski	Africa	Internet Explorer	Android	4
Dominic Zboncak	Australia	Internet Explorer	Android	9
Jonas Hayes	Asia	Internet Explorer	Windows	90
Danika Friesen	Australia	Internet Explorer	Mac OS	63
Tierra Streich	Africa	Opera	Mac OS	22
Donavon Erdman	Antarctica	Opera	Windows	35
Giuseppe Mitchell	Antarctica	Opera	iOS	52
Dedric Hand	South America	Opera	Android	8
Laron Barton	Antarctica	Firefox	Android	71
Laurie Hand	Europe	Chrome	Mac OS	68
Israel Ernser	North America	Firefox	Ubuntu	35
Elyssa Turcotte	South America	Chrome	Mac OS	53
Destin Kessler	Asia	Internet Explorer	Android	78
Jed Fisher	Asia	Edge	Ubuntu	89
Alvina Walker	Australia	Internet Explorer	Ubuntu	43
Sophia Kohler	Australia	Firefox	Ubuntu	21
Gino Rippin	South America	Edge	Ubuntu	16
Dulce Swaniawski	Africa	Safari	Mac OS	27
Johnpaul Adams	Africa	Opera	Ubuntu	38
Addison Gerlach	South America	Internet Explorer	Mac OS	98
Grant Powlowski	Australia	Firefox	Windows	99
Brown Zulauf	Asia	Firefox	Android	70
Roman Kozey	North America	Opera	Android	91
Violet Emmerich	Africa	Internet Explorer	Android	56
Jeffery Gaylord	Asia	Firefox	Ubuntu	73
Adrian Gulgowski	Africa	Firefox	Ubuntu	86
100 items	7 continents	6 browsers	5 OSes	5284

Controller Index

<div style="margin-bottom: 10px" ws>
    Group by:
    <LookupField
        records-bind="$page.grouping"
        options-bind="$page.groupableFields"
        multiple={true}
    />
</div>

<Grid
    records-bind='$page.records'
    style={{width: "100%"}}
    groupingParams-bind="$page.grouping"
    onGetGrouping={(groupingParams) => [
        {key: {}, showFooter: true},
        ...(groupingParams || []).map(x => x.id)
    ]}
    columns={[{
        header: 'Name',
        field: 'fullName',
        sortable: true,
        aggregate: 'count',
        footer: {expr: '({$group.$level} > 1 ? {$group.$name:s|TOTAL} + " - " : "") + {$group.fullName} + " " + {$group.fullName:plural;item}'}
    }, {
        header: 'Continent',
        field: 'continent',
        sortable: true,
        aggregate: 'distinct',
        aggregateAlias: 'continents',
        footer: {tpl: '{$group.continents} {$group.continents:plural;continent}'}
    }, {
        header: 'Browser',
        field: 'browser',
        sortable: true,
        aggregate: 'distinct',
        aggregateAlias: 'browsers',
        footer: {tpl: '{$group.browsers} {$group.browsers:plural;browser}'}
    }, {
        header: 'OS',
        field: 'os',
        sortable: true,
        aggregate: 'distinct',
        aggregateAlias: 'oss',
        footer: {tpl: '{$group.oss} {$group.oss:plural;OS}'}
    }, {
        header: 'Visits',
        field: 'visits',
        sortable: true,
        aggregate: "sum",
        align: "right"
    }]}
/>

Copied!Cx Fiddle

Documentation

Dynamic Grouping in Grids