Grouping

An example of a grid control with grouping. Groups with the highest visits share appear first.

Name	Continent	Browser	OS	Visits	Visits Share
North America (19 people)	1 continent	6 browsers	5 OSes	1,004	21.3%
Mateo Wintheiser	North America	Opera	Ubuntu	55	1.17%
Pearline Swaniawski	North America	Firefox	Ubuntu	30	0.64%
Julius Boyle	North America	Chrome	Windows	42	0.89%
Flossie Dickinson	North America	Edge	iOS	83	1.76%
Mohammed Braun	North America	Chrome	Mac OS	18	0.38%
Hank Hyatt	North America	Chrome	Mac OS	96	2.03%
Leola Hahn	North America	Opera	Android	70	1.48%
Cody Simonis	North America	Opera	Ubuntu	32	0.68%
Jazlyn Waelchi	North America	Firefox	Android	13	0.28%
Eloisa Durgan	North America	Firefox	iOS	69	1.46%
Ezra Stoltenberg	North America	Chrome	Mac OS	7	0.15%
Lolita Crona	North America	Safari	Ubuntu	64	1.36%
Margaret Wisozk	North America	Opera	Mac OS	68	1.44%
Aisha Gutkowski	North America	Opera	Mac OS	91	1.93%
Pascale Douglas	North America	Firefox	Android	32	0.68%
Alden Kulas	North America	Opera	Mac OS	77	1.63%
Jaydon Stamm	North America	Opera	Windows	40	0.85%
Lila Marvin	North America	Internet Explorer	Windows	64	1.36%
Madalyn Brekke	North America	Firefox	Ubuntu	53	1.12%
Africa (15 people)	1 continent	6 browsers	5 OSes	781	16.5%
Caleigh Lesch	Africa	Internet Explorer	Android	12	0.25%
Clark Kozey	Africa	Edge	Android	13	0.28%
Antonio Steuber	Africa	Safari	Mac OS	73	1.55%
Jensen Daniel	Africa	Safari	iOS	97	2.05%
Lisandro Prosacco	Africa	Chrome	Mac OS	82	1.74%
Kaley Crooks	Africa	Opera	Android	29	0.61%
Jarrett Larson	Africa	Safari	Ubuntu	1	0.02%
Abelardo Macejkovic	Africa	Internet Explorer	Mac OS	86	1.82%
Kylee Klocko	Africa	Opera	Ubuntu	89	1.89%
Theo Jacobson	Africa	Firefox	Mac OS	92	1.95%
Francisca Kunze	Africa	Safari	iOS	86	1.82%
Prince Rowe	Africa	Internet Explorer	Android	13	0.28%
Nicklaus Kovacek	Africa	Firefox	Android	22	0.47%
Rubye Mitchell	Africa	Safari	Windows	5	0.11%
Ethelyn Schaden	Africa	Internet Explorer	Windows	81	1.72%
Australia (16 people)	1 continent	6 browsers	5 OSes	767	16.2%
Alexys Toy	Australia	Internet Explorer	Ubuntu	19	0.40%
Burley Keebler	Australia	Internet Explorer	Ubuntu	12	0.25%
Bette Stracke	Australia	Chrome	Android	55	1.17%
Noelia Borer	Australia	Edge	Ubuntu	17	0.36%
Heaven Hoeger	Australia	Opera	Windows	92	1.95%
Eugenia Quigley	Australia	Safari	Mac OS	73	1.55%
Lola Pagac	Australia	Firefox	Android	42	0.89%
Junior Graham	Australia	Opera	Windows	89	1.89%
Chase Bartoletti	Australia	Opera	Android	64	1.36%
Marlee Ernser	Australia	Internet Explorer	Windows	35	0.74%
Baron Schmitt	Australia	Chrome	Windows	36	0.76%
Erna Hilpert	Australia	Opera	Ubuntu	59	1.25%
Lee Carter	Australia	Firefox	Mac OS	69	1.46%
Adolf Jacobson	Australia	Opera	iOS	78	1.65%
Elmer Koelpin	Australia	Internet Explorer	Mac OS	2	0.04%
Alexandra Stoltenberg	Australia	Opera	Windows	25	0.53%
South America (18 people)	1 continent	4 browsers	4 OSes	729	15.4%
Norma Jerde	South America	Internet Explorer	Android	33	0.70%
Emilio Sipes	South America	Safari	Android	56	1.19%
Yesenia Wilkinson	South America	Edge	Android	6	0.13%
Norwood Mann	South America	Safari	Ubuntu	53	1.12%
Sven Moen	South America	Safari	Android	22	0.47%
Reba Boyer	South America	Opera	Windows	19	0.40%
Itzel VonRueden	South America	Opera	Ubuntu	54	1.14%
Nettie Reinger	South America	Edge	Ubuntu	52	1.10%
Emmanuelle Durgan	South America	Safari	iOS	7	0.15%
Buster Fay	South America	Internet Explorer	Windows	96	2.03%
Edmund Ferry	South America	Edge	Ubuntu	70	1.48%
Karine Hermann	South America	Opera	Ubuntu	41	0.87%
Georgianna Rosenbaum	South America	Edge	Android	53	1.12%
Myles Rutherford	South America	Safari	Ubuntu	19	0.40%
Helen Feeney	South America	Opera	Android	65	1.38%
Amaya Kuhic	South America	Internet Explorer	Ubuntu	1	0.02%
Madisyn Keeling	South America	Safari	iOS	10	0.21%
Abraham Jacobson	South America	Internet Explorer	Windows	72	1.53%
Asia (16 people)	1 continent	5 browsers	4 OSes	575	12.2%
Alivia Gerhold	Asia	Chrome	Android	5	0.11%
Kaden Heathcote	Asia	Chrome	Android	4	0.08%
Wanda Waelchi	Asia	Internet Explorer	iOS	73	1.55%
Doyle Steuber	Asia	Opera	Android	24	0.51%
Vesta Marks	Asia	Firefox	Ubuntu	80	1.69%
Melany Jast	Asia	Internet Explorer	Mac OS	24	0.51%
Omari Blanda	Asia	Firefox	Android	12	0.25%
Kaylin Wisozk	Asia	Safari	Mac OS	55	1.17%
Larue Mertz	Asia	Chrome	Ubuntu	17	0.36%
Dominic Tillman	Asia	Safari	Android	35	0.74%
Earline Torphy	Asia	Safari	Mac OS	30	0.64%
Karen Ferry	Asia	Internet Explorer	Mac OS	81	1.72%
Sage Robel	Asia	Internet Explorer	Android	69	1.46%
Felipa Gibson	Asia	Opera	Android	50	1.06%
Cooper Jast	Asia	Firefox	Mac OS	4	0.08%
Anais Murazik	Asia	Internet Explorer	iOS	12	0.25%
Europe (9 people)	1 continent	4 browsers	5 OSes	495	10.5%
Mariane Legros	Europe	Opera	Mac OS	40	0.85%
Brooks Schumm	Europe	Safari	Ubuntu	39	0.83%
Dayton Hand	Europe	Opera	iOS	30	0.64%
Leann Stroman	Europe	Internet Explorer	Android	46	0.97%
Madie Quitzon	Europe	Opera	Ubuntu	90	1.91%
Elton Collins	Europe	Firefox	Ubuntu	98	2.08%
Dawson McDermott	Europe	Safari	Android	63	1.33%
Leda Kshlerin	Europe	Opera	Windows	73	1.55%
Peter Mraz	Europe	Opera	Android	16	0.34%
Antarctica (7 people)	1 continent	5 browsers	3 OSes	370	7.8%
Colt Schroeder	Antarctica	Internet Explorer	Android	60	1.27%
Quinn Vandervort	Antarctica	Internet Explorer	Ubuntu	30	0.64%
Nyasia Streich	Antarctica	Chrome	Ubuntu	70	1.48%
Marilie Lakin	Antarctica	Opera	Mac OS	46	0.97%
Jedediah Thompson	Antarctica	Chrome	Mac OS	91	1.93%
Amira Kling	Antarctica	Firefox	Mac OS	38	0.80%
Noelia Gorczany	Antarctica	Edge	Mac OS	35	0.74%
TOTAL - 100 people	7 continents	6 browsers	5 OSes	4,721	100.00%

Controller Grid Columns

<Grid
    records-bind='$page.records'
    scrollable
    fixedFooter
    style={{width: "100%", height: '800px'}}
    grouping={[
        { showFooter: true },
        {
            key: {
                name: { bind: '$record.continent' }
            },
            showCaption: true,
            comparer: (g1, g2) => g2.aggregates.visitsShare - g1.aggregates.visitsShare,
        }
    ]}
    columns={allColumns}
/>

Copied!Cx Fiddle

Documentation

Grouping