Dynamic Grouping in Grids

Grid control supports multiple levels of grouping and aggregation.

Group by:

Name	Continent	Browser	OS	Visits
Patience Durgan	Antarctica	Internet Explorer	Mac OS	80
Jessie Dooley	Africa	Safari	iOS	9
Faye Morar	Asia	Internet Explorer	Mac OS	96
Brando Bogan	North America	Chrome	Ubuntu	43
Jayce Padberg	Antarctica	Opera	iOS	17
Marjory Lockman	Africa	Opera	Android	66
Jonatan McDermott	North America	Internet Explorer	Windows	51
Brennon Hartmann	North America	Internet Explorer	iOS	41
Letitia Bosco	Asia	Safari	Mac OS	14
Clarabelle Crist	Africa	Safari	Mac OS	50
Jamal Jaskolski	Australia	Opera	Ubuntu	79
Carmen Skiles	Asia	Opera	Android	75
Stanford Lebsack	South America	Opera	Windows	60
Cordelia Abshire	South America	Internet Explorer	Ubuntu	38
Evelyn Marvin	Africa	Firefox	Windows	43
Braxton Abshire	South America	Chrome	Mac OS	45
Lina Graham	Australia	Safari	iOS	3
Gilda Brekke	Africa	Opera	Ubuntu	17
Brando Larson	Asia	Edge	iOS	66
Clifton Weimann	Antarctica	Internet Explorer	Ubuntu	14
Kenyon Kuphal	Asia	Firefox	Mac OS	13
Sam Harber	Antarctica	Safari	Android	27
Alyce Crooks	South America	Internet Explorer	iOS	20
Marcellus Bartoletti	Africa	Chrome	iOS	59
Niko Altenwerth	North America	Internet Explorer	Ubuntu	51
Randi Carroll	Australia	Opera	iOS	24
Gillian Huel	North America	Opera	iOS	56
Crystel Grant	South America	Opera	iOS	44
Estevan Goodwin	Australia	Internet Explorer	Mac OS	3
Lilla Will	Africa	Firefox	Windows	91
Ocie Cormier	Antarctica	Internet Explorer	iOS	13
Marietta Walker	Europe	Edge	Mac OS	87
Nickolas Kshlerin	Europe	Chrome	Windows	74
Laila Connelly	South America	Internet Explorer	Ubuntu	35
Angelita Gleichner	North America	Safari	Ubuntu	54
Noel Lebsack	North America	Firefox	Ubuntu	30
Halle Konopelski	Europe	Opera	Android	78
Magdalena Kris	Asia	Chrome	Ubuntu	9
Colby King	Australia	Internet Explorer	Ubuntu	7
Ursula Hegmann	South America	Edge	iOS	72
Reece Yost	North America	Opera	Mac OS	61
Llewellyn Lockman	Asia	Firefox	iOS	96
Darrin Wiza	Asia	Opera	Ubuntu	4
Jamaal Boehm	South America	Internet Explorer	Mac OS	45
Geovanni Hills	North America	Chrome	Mac OS	24
Kattie Schoen	Asia	Safari	Android	31
Joaquin Rau	South America	Internet Explorer	iOS	42
Hillary McClure	Europe	Safari	Ubuntu	74
Luna Koepp	Antarctica	Firefox	Windows	88
Foster Collins	Africa	Internet Explorer	iOS	87
Ricardo Braun	South America	Opera	iOS	19
Triston Crona	North America	Opera	Mac OS	66
Effie Schoen	North America	Opera	Android	13
Jamel Morissette	Asia	Internet Explorer	Android	14
Leda Schoen	Australia	Opera	Ubuntu	84
Corbin Sanford	South America	Safari	Mac OS	24
Angelina Christiansen	Asia	Firefox	Mac OS	92
Aubrey Kertzmann	Africa	Firefox	Android	43
Tyrique Emmerich	Europe	Edge	Android	53
Mariana Greenholt	South America	Opera	Ubuntu	38
Santos Hammes	Antarctica	Safari	Ubuntu	31
Thelma Ward	Africa	Firefox	Mac OS	48
Orin Rolfson	South America	Firefox	Windows	83
Karina Kirlin	Asia	Internet Explorer	iOS	83
Jaren Wilkinson	South America	Safari	Ubuntu	70
Amparo Ebert	Africa	Chrome	Ubuntu	18
Mikel Leuschke	Africa	Internet Explorer	Ubuntu	7
Claudie Lakin	South America	Internet Explorer	Ubuntu	48
Kenneth Koepp	Antarctica	Edge	Android	29
Justine Johns	Europe	Internet Explorer	Mac OS	96
Irma Funk	Africa	Firefox	Android	92
Jerrod Romaguera	Africa	Edge	Ubuntu	4
Torey Parisian	Antarctica	Firefox	Mac OS	83
Brandon Howe	Europe	Safari	Ubuntu	49
Haskell Bosco	South America	Edge	Windows	73
Scarlett Bode	South America	Internet Explorer	Mac OS	81
Elwyn Halvorson	Africa	Internet Explorer	Ubuntu	53
Isabelle Sipes	Asia	Opera	Android	27
Rico Price	South America	Opera	Ubuntu	10
Marco Stehr	Europe	Safari	Android	77
Lori Graham	Australia	Safari	Android	98
Jett Kovacek	Africa	Chrome	Android	18
Marie Marvin	South America	Internet Explorer	iOS	66
Theo Reilly	Africa	Chrome	Android	79
Bernice Okuneva	South America	Firefox	Android	70
Josianne Windler	South America	Opera	Android	68
Velda Windler	Africa	Chrome	Windows	57
Julian Jewess	South America	Internet Explorer	Mac OS	39
Dustin Rodriguez	Antarctica	Safari	Android	30
Albertha Dietrich	South America	Safari	Android	8
Ceasar Cole	North America	Safari	Mac OS	28
Wade Wunsch	South America	Firefox	iOS	20
Chester Reinger	South America	Internet Explorer	iOS	37
Davonte Becker	South America	Edge	Android	40
Orin Harvey	Europe	Internet Explorer	Android	92
Kaylie Cruickshank	Africa	Safari	iOS	20
Kassandra Bins	Africa	Internet Explorer	Android	28
Wilson Daugherty	North America	Chrome	Ubuntu	89
Skyla Sipes	Asia	Firefox	Mac OS	3
Conrad Zboncak	Australia	Safari	Android	75
100 items	7 continents	6 browsers	5 OSes	4779

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