Dynamic Grouping in Grids

Grid control supports multiple levels of grouping and aggregation.

Group by:

Name	Continent	Browser	OS	Visits
Vincenza Cremin	Africa	Opera	iOS	37
Guido Marks	North America	Internet Explorer	Ubuntu	58
Grayson Bayer	South America	Chrome	Android	22
Carey Kerluke	South America	Firefox	Android	97
Ebba Oberbrunner	Europe	Edge	Mac OS	52
Linda Durgan	Asia	Internet Explorer	Mac OS	84
Bernice Collier	Africa	Safari	iOS	22
Samanta Kemmer	North America	Internet Explorer	Mac OS	89
Johnathan Fisher	South America	Firefox	Windows	84
Micah Conroy	South America	Edge	Ubuntu	78
Titus Hahn	Europe	Opera	iOS	14
Cloyd Stracke	Asia	Firefox	Windows	55
Addison Macejkovic	South America	Edge	Ubuntu	96
Juwan Willms	Antarctica	Edge	Mac OS	11
Filomena Kozey	Antarctica	Firefox	Android	64
Lavina Bartell	Europe	Firefox	Android	34
Triston Casper	South America	Opera	Mac OS	45
Cecelia Koelpin	Antarctica	Chrome	Ubuntu	94
Candace Cummings	Africa	Safari	Android	66
Alphonso Green	South America	Safari	Ubuntu	1
Lina Reichert	Europe	Firefox	Mac OS	80
Queen West	North America	Safari	Mac OS	11
Skylar Graham	South America	Firefox	Android	82
Glen Emmerich	Asia	Opera	Mac OS	22
Raina Cummings	North America	Opera	Android	43
Karolann Hermann	Africa	Opera	iOS	85
Clarissa Gusikowski	Asia	Edge	Android	65
Trevor Fadel	Asia	Firefox	iOS	49
Ibrahim Powlowski	Africa	Opera	Windows	64
Clotilde Langworth	South America	Opera	Windows	84
Durward Raynor	North America	Safari	Ubuntu	100
Nick Rowe	South America	Edge	Mac OS	71
Holden Gleichner	North America	Safari	Ubuntu	99
Loren Tremblay	Australia	Opera	Android	92
Deonte Schaden	Asia	Chrome	Ubuntu	22
Chelsey Ward	Australia	Safari	iOS	40
Dianna Goodwin	Asia	Edge	Android	69
Zola Braun	North America	Firefox	Windows	22
Leta Romaguera	Africa	Firefox	iOS	99
Lavern Larson	Australia	Edge	iOS	90
Armando Jast	Antarctica	Firefox	Android	10
Gavin Morissette	Europe	Safari	Mac OS	9
Elroy Lubowitz	Africa	Opera	Ubuntu	9
Oran Gibson	North America	Opera	iOS	69
Kristina Pfeffer	Australia	Firefox	Mac OS	64
Keenan Weimann	Australia	Safari	Mac OS	61
Kameron Shanahan	Asia	Safari	Windows	60
Hubert Mayert	Australia	Firefox	Mac OS	67
Hyman Konopelski	North America	Safari	Mac OS	3
Rene Hermann	Asia	Internet Explorer	Windows	64
Adolph Hahn	Asia	Internet Explorer	Android	36
Derick Hettinger	South America	Chrome	Ubuntu	11
Pearl Batz	South America	Firefox	Mac OS	87
Raymundo Mohr	South America	Opera	Mac OS	41
Rodger Kerluke	North America	Internet Explorer	iOS	90
Harrison Swift	Australia	Firefox	Windows	60
Tressa Nicolas	Asia	Chrome	Android	7
Gino Herman	Australia	Opera	iOS	36
Ladarius Koss	Australia	Firefox	iOS	39
Gail Crooks	Australia	Firefox	Mac OS	9
Sandra Dibbert	Antarctica	Opera	Ubuntu	97
Loyal Shields	Africa	Chrome	Android	63
Brook Hessel	Antarctica	Firefox	Windows	28
Kristofer White	Antarctica	Opera	Ubuntu	50
Lemuel Boyle	South America	Chrome	Ubuntu	85
Bennie Abernathy	Africa	Internet Explorer	Ubuntu	31
Isac Rowe	Africa	Firefox	iOS	76
Audreanne Murray	Australia	Opera	Ubuntu	52
Casper Kassulke	South America	Firefox	Mac OS	78
Oma Glover	North America	Opera	Ubuntu	66
Pauline Mueller	Africa	Safari	Android	87
Stanley Dibbert	Asia	Opera	iOS	27
Joyce Schultz	Australia	Chrome	Ubuntu	37
Sheldon Jacobson	South America	Safari	iOS	83
Favian Turner	Asia	Opera	Mac OS	15
Imogene Okuneva	South America	Opera	Windows	76
Julie Stehr	North America	Internet Explorer	Mac OS	90
Nigel Monahan	Asia	Opera	Ubuntu	33
Hunter Roob	Africa	Safari	Mac OS	12
Austin Mayert	Australia	Opera	Ubuntu	72
German Kovacek	Antarctica	Internet Explorer	Ubuntu	78
Fern Powlowski	South America	Safari	Mac OS	30
Isidro Hyatt	Australia	Safari	iOS	6
Cornelius Bins	South America	Opera	iOS	17
Lafayette Roberts	South America	Safari	Windows	2
Mikayla Auer	South America	Firefox	Mac OS	35
Amaya Friesen	South America	Safari	Ubuntu	11
Lukas Pouros	Asia	Firefox	Windows	14
Kieran Brown	Australia	Firefox	Windows	52
Ayden Feest	Africa	Safari	iOS	78
Maurice Bogisich	South America	Safari	iOS	51
Duncan Luettgen	Antarctica	Chrome	Mac OS	24
Omer Purdy	Africa	Internet Explorer	Mac OS	62
Weldon Schmitt	Antarctica	Internet Explorer	Android	52
Aglae Leannon	Australia	Internet Explorer	Android	84
Ressie Goldner	North America	Safari	Mac OS	7
Harmony Stanton	North America	Safari	Windows	55
Retta Muller	South America	Chrome	Ubuntu	48
Bradford Walker	North America	Internet Explorer	Ubuntu	81
Josiane Altenwerth	Australia	Chrome	Mac OS	22
100 items	7 continents	6 browsers	5 OSes	5191

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