Dynamic Grouping in Grids

Grid control supports multiple levels of grouping and aggregation.

Group by:

Name	Continent	Browser	OS	Visits
Emery Kuphal	Asia	Firefox	Mac OS	83
Monserrate Pollich	North America	Internet Explorer	Ubuntu	21
Perry Leuschke	Australia	Firefox	Ubuntu	46
Jaclyn Bode	Asia	Edge	Windows	65
Odie Dach	North America	Edge	Android	72
Zelma McGlynn	Asia	Opera	Android	20
Eliezer Metz	Australia	Internet Explorer	Android	44
Robbie Bergnaum	South America	Chrome	Ubuntu	97
Chanel Gusikowski	North America	Edge	Ubuntu	25
Branson Kemmer	Africa	Internet Explorer	Mac OS	65
Coty Rippin	North America	Chrome	Android	100
Mikel Marks	Europe	Opera	Windows	48
Broderick Hudson	South America	Firefox	Ubuntu	28
Sandy Herman	Australia	Chrome	Ubuntu	50
Rory Willms	South America	Chrome	Android	64
Evie Funk	Australia	Opera	Android	43
Tyrell Murazik	Australia	Safari	Ubuntu	94
Lois Parisian	North America	Opera	Android	15
Jarod Walter	Asia	Internet Explorer	Android	11
Astrid Barton	Australia	Edge	iOS	70
Cleo Oberbrunner	Australia	Safari	iOS	23
Filiberto Beier	Asia	Internet Explorer	iOS	59
Bernardo Christiansen	Australia	Firefox	iOS	90
Alicia Wilderman	North America	Chrome	iOS	31
Colin McGlynn	Africa	Firefox	Android	39
Hunter Koss	Antarctica	Safari	iOS	47
Mary Kulas	Australia	Internet Explorer	Ubuntu	30
Peter Yost	Australia	Opera	Android	34
Aimee Lowe	Africa	Internet Explorer	Ubuntu	50
Jamarcus McDermott	Europe	Edge	Mac OS	99
Noe Koch	South America	Opera	Windows	42
Ray Keeling	North America	Internet Explorer	Android	27
Freida Stokes	North America	Safari	Ubuntu	18
Angelo Rowe	Asia	Firefox	Windows	97
Charlotte Shanahan	Australia	Safari	Ubuntu	92
Lorenzo Kilback	Australia	Internet Explorer	Mac OS	27
Oma Lubowitz	Europe	Firefox	iOS	52
Leonie Hackett	Australia	Internet Explorer	Ubuntu	2
Eliseo Robel	Africa	Internet Explorer	Ubuntu	78
Monserrate Klocko	North America	Firefox	Android	68
Roberta Senger	South America	Opera	Windows	23
Cyrus Flatley	Australia	Firefox	Mac OS	14
Hortense Stiedemann	North America	Opera	iOS	6
Preston Welch	South America	Safari	Windows	27
Amiya Parker	Antarctica	Firefox	iOS	48
Carolina Sauer	Antarctica	Safari	Android	26
Laury Mann	Africa	Edge	iOS	75
Helmer Turner	North America	Opera	Mac OS	46
Wendell Wiza	Asia	Safari	Android	93
Claude Fadel	North America	Chrome	Android	27
Kris Walker	Asia	Internet Explorer	Android	36
Sabryna Weber	Africa	Safari	Mac OS	61
Ricky Nikolaus	Asia	Opera	Ubuntu	80
Jaron McGlynn	Africa	Opera	Android	13
Krista Boyer	North America	Opera	Windows	75
Mariana Grant	Africa	Opera	Mac OS	35
Marilie Boyle	South America	Internet Explorer	Windows	49
Francisca Jakubowski	Europe	Safari	Android	11
Armando Littel	Asia	Opera	Mac OS	70
Katlyn Beahan	Antarctica	Safari	Ubuntu	29
Israel Davis	Asia	Opera	Windows	35
Joelle Rohan	Asia	Internet Explorer	Mac OS	89
Edythe Orn	South America	Safari	iOS	52
Halle Satterfield	South America	Opera	Mac OS	19
Lolita Mayer	South America	Firefox	iOS	73
Kallie Heller	South America	Firefox	Ubuntu	79
Bobby Romaguera	Antarctica	Safari	Android	8
Sadie Brown	North America	Opera	Android	73
Otilia Ebert	Antarctica	Chrome	Ubuntu	72
Cyril Walter	South America	Firefox	Android	93
Madisen Murazik	Asia	Chrome	Android	91
Tyrell Will	Australia	Firefox	Android	59
Claud Rowe	Australia	Firefox	Mac OS	57
Jonathan Krajcik	Asia	Internet Explorer	Ubuntu	21
Delilah Champlin	Africa	Firefox	Mac OS	94
Grant Greenfelder	Asia	Opera	Windows	87
Marlene Parisian	North America	Edge	Android	76
Rachelle Rice	Europe	Safari	Ubuntu	24
Milan Koepp	Asia	Internet Explorer	Android	54
Lavina Rolfson	South America	Internet Explorer	Android	3
Henderson Bode	Australia	Chrome	iOS	92
Ofelia Schuster	Asia	Firefox	Ubuntu	33
Leanne Emard	North America	Internet Explorer	Ubuntu	51
Bartholome Herman	North America	Edge	Windows	41
Ismael Anderson	South America	Firefox	Android	13
Broderick Wilkinson	Africa	Internet Explorer	Android	58
Elias Volkman	Asia	Edge	Android	60
Garfield Hamill	Africa	Chrome	Ubuntu	47
Marcelina Nicolas	Asia	Chrome	Android	98
Shaylee Macejkovic	Africa	Edge	iOS	94
Tessie Lakin	South America	Internet Explorer	Mac OS	17
Jamey Ledner	Africa	Edge	Ubuntu	57
Linda Shanahan	Australia	Edge	Mac OS	21
Layne Douglas	Asia	Firefox	Mac OS	73
Lamont Senger	Europe	Firefox	iOS	91
Jeramie Gleason	Antarctica	Edge	iOS	81
Cierra Jacobi	North America	Firefox	Ubuntu	21
Lottie Robel	South America	Opera	Mac OS	93
Orin Dicki	Africa	Internet Explorer	iOS	59
Hortense Bayer	Africa	Firefox	iOS	88
100 items	7 continents	6 browsers	5 OSes	5257

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