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 (20 people)	1 continent	6 browsers	5 OSes	1,007	20.6%
Darrin Tremblay	North America	Edge	Ubuntu	3	0.06%
Shad Rice	North America	Safari	Android	14	0.29%
Brigitte Kub	North America	Edge	Mac OS	78	1.60%
Alva Mosciski	North America	Internet Explorer	Android	76	1.55%
Derrick Lynch	North America	Firefox	Mac OS	72	1.47%
Desmond Cremin	North America	Opera	Mac OS	40	0.82%
Rae Deckow	North America	Opera	Ubuntu	54	1.10%
Kurt Skiles	North America	Safari	Windows	3	0.06%
Christiana Mohr	North America	Edge	Android	11	0.22%
Loy Harvey	North America	Edge	Windows	75	1.53%
Gilda Quitzon	North America	Internet Explorer	Android	17	0.35%
Benjamin Collier	North America	Internet Explorer	Mac OS	46	0.94%
Kaylee Ward	North America	Internet Explorer	Mac OS	86	1.76%
Marilie White	North America	Safari	Mac OS	95	1.94%
Marques Erdman	North America	Firefox	Ubuntu	62	1.27%
Antwon Fadel	North America	Internet Explorer	Android	61	1.25%
Pascale Langworth	North America	Chrome	iOS	35	0.72%
Sharon Moore	North America	Safari	iOS	82	1.68%
Justine Langworth	North America	Opera	iOS	93	1.90%
Malachi Torphy	North America	Internet Explorer	Android	4	0.08%
Europe (14 people)	1 continent	5 browsers	4 OSes	914	18.7%
Hayley Koss	Europe	Edge	iOS	93	1.90%
Frankie Hills	Europe	Opera	Mac OS	51	1.04%
Meda Langosh	Europe	Opera	Ubuntu	52	1.06%
Elfrieda Feest	Europe	Internet Explorer	Mac OS	88	1.80%
Daphnee Graham	Europe	Firefox	Mac OS	53	1.08%
Roberta Homenick	Europe	Firefox	Android	51	1.04%
Santiago Hessel	Europe	Edge	iOS	95	1.94%
Adan Schamberger	Europe	Safari	Mac OS	93	1.90%
Troy Rowe	Europe	Internet Explorer	Android	94	1.92%
Micaela Krajcik	Europe	Internet Explorer	Ubuntu	45	0.92%
Kobe Konopelski	Europe	Firefox	Mac OS	66	1.35%
Travis Monahan	Europe	Firefox	iOS	17	0.35%
Patsy Prosacco	Europe	Edge	iOS	96	1.96%
Jan Auer	Europe	Edge	Ubuntu	20	0.41%
Asia (16 people)	1 continent	6 browsers	5 OSes	863	17.6%
Brooke Zulauf	Asia	Opera	Android	75	1.53%
Shanon Barrows	Asia	Internet Explorer	Ubuntu	87	1.78%
Kaleb Mayer	Asia	Chrome	Windows	26	0.53%
Nyah Abernathy	Asia	Safari	Mac OS	68	1.39%
Burnice Hane	Asia	Safari	iOS	6	0.12%
Unique Schuppe	Asia	Opera	Android	52	1.06%
Meagan McClure	Asia	Chrome	Android	81	1.66%
Oswald Thiel	Asia	Firefox	Ubuntu	36	0.74%
Tito Zieme	Asia	Safari	Mac OS	31	0.63%
Monica Jewess	Asia	Safari	Mac OS	38	0.78%
Reginald Krajcik	Asia	Safari	Android	32	0.65%
Misael Carter	Asia	Firefox	Ubuntu	88	1.80%
Sim Orn	Asia	Safari	iOS	51	1.04%
Kyla Crooks	Asia	Internet Explorer	Mac OS	98	2.00%
Annette Dickens	Asia	Edge	Android	71	1.45%
Jasper Spencer	Asia	Internet Explorer	Ubuntu	23	0.47%
South America (16 people)	1 continent	5 browsers	5 OSes	623	12.7%
Amya Hahn	South America	Internet Explorer	Android	10	0.20%
Johanna Willms	South America	Safari	Mac OS	43	0.88%
Marion Hahn	South America	Safari	Mac OS	90	1.84%
Modesto Gottlieb	South America	Firefox	Mac OS	65	1.33%
Lennie Hettinger	South America	Firefox	Android	92	1.88%
Morton Langosh	South America	Safari	Mac OS	42	0.86%
Donnell Brakus	South America	Edge	Android	27	0.55%
Chris Koch	South America	Opera	Android	8	0.16%
Emely Kiehn	South America	Safari	Android	17	0.35%
Furman Reynolds	South America	Opera	Ubuntu	90	1.84%
Rodger Parker	South America	Internet Explorer	Mac OS	7	0.14%
Kieran Will	South America	Edge	Ubuntu	21	0.43%
Amy Satterfield	South America	Firefox	Ubuntu	28	0.57%
Griffin Lowe	South America	Opera	iOS	21	0.43%
Dortha Fay	South America	Safari	Windows	19	0.39%
Jamir Torphy	South America	Edge	Ubuntu	43	0.88%
Australia (14 people)	1 continent	4 browsers	4 OSes	559	11.4%
Osbaldo Deckow	Australia	Safari	Android	46	0.94%
Frieda Bayer	Australia	Firefox	Android	27	0.55%
Anabel Rodriguez	Australia	Firefox	Android	69	1.41%
Norene Reichel	Australia	Firefox	Mac OS	2	0.04%
Sean White	Australia	Safari	Ubuntu	29	0.59%
Tania Bergstrom	Australia	Firefox	iOS	76	1.55%
Hoyt Kuphal	Australia	Opera	Android	25	0.51%
Estelle Ziemann	Australia	Opera	Ubuntu	54	1.10%
Daisha Brown	Australia	Firefox	Ubuntu	31	0.63%
Daphne Nicolas	Australia	Opera	Android	59	1.21%
Kathleen Lynch	Australia	Internet Explorer	Android	35	0.72%
Liza Kassulke	Australia	Firefox	Ubuntu	28	0.57%
Rebecca Bailey	Australia	Opera	Ubuntu	17	0.35%
Lorenza Steuber	Australia	Opera	Ubuntu	61	1.25%
Africa (11 people)	1 continent	5 browsers	4 OSes	516	10.6%
Elvis Hirthe	Africa	Internet Explorer	Mac OS	17	0.35%
Juana Leannon	Africa	Firefox	Android	50	1.02%
Valentina Renner	Africa	Firefox	Ubuntu	68	1.39%
Camilla Grant	Africa	Edge	Mac OS	17	0.35%
Kian Satterfield	Africa	Opera	Android	54	1.10%
Geo Spinka	Africa	Firefox	Mac OS	74	1.51%
Hilbert Conroy	Africa	Safari	Android	83	1.70%
Ian Turcotte	Africa	Opera	Ubuntu	13	0.27%
Nova Nader	Africa	Safari	Android	38	0.78%
Loren Mills	Africa	Firefox	iOS	24	0.49%
Chelsie Ebert	Africa	Firefox	iOS	78	1.60%
Antarctica (9 people)	1 continent	6 browsers	4 OSes	408	8.3%
Paul Mosciski	Antarctica	Opera	Mac OS	76	1.55%
Ron Nicolas	Antarctica	Internet Explorer	Ubuntu	8	0.16%
Elena Pacocha	Antarctica	Firefox	Android	5	0.10%
Federico Quigley	Antarctica	Edge	Mac OS	30	0.61%
Beth Ziemann	Antarctica	Safari	Android	7	0.14%
Lexi Roberts	Antarctica	Edge	Ubuntu	86	1.76%
Tomas Schmitt	Antarctica	Chrome	iOS	94	1.92%
Royal Hodkiewicz	Antarctica	Edge	Android	90	1.84%
Bonnie Feeney	Antarctica	Safari	Ubuntu	12	0.25%
TOTAL - 100 people	7 continents	6 browsers	5 OSes	4,890	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