Grouping

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

Name	Continent	Browser	OS	Visits	Visits Share
Asia (21 people)	1 continent	5 browsers	4 OSes	1,133	20.3%
Alysha Schmidt	Asia	Edge	Android	41	0.74%
Wilfrid Cummings	Asia	Internet Explorer	Mac OS	8	0.14%
Claudie Roberts	Asia	Opera	Windows	87	1.56%
Randi Runolfsdottir	Asia	Safari	Mac OS	60	1.08%
Joanne Lubowitz	Asia	Edge	Mac OS	100	1.80%
Rylan Bednar	Asia	Firefox	Mac OS	59	1.06%
Buford Grimes	Asia	Firefox	Windows	27	0.48%
Dalton Sauer	Asia	Opera	Mac OS	63	1.13%
Ima Borer	Asia	Internet Explorer	Android	67	1.20%
Arlie Nitzsche	Asia	Firefox	Windows	88	1.58%
Oma Dibbert	Asia	Firefox	Mac OS	87	1.56%
Kendall Windler	Asia	Firefox	Windows	28	0.50%
Sidney Fritsch	Asia	Internet Explorer	Android	14	0.25%
Heber Von	Asia	Safari	Ubuntu	63	1.13%
Mariane Smith	Asia	Firefox	Mac OS	37	0.66%
Vernon Stanton	Asia	Internet Explorer	Android	24	0.43%
Monte Borer	Asia	Opera	Android	26	0.47%
Diana Wolff	Asia	Opera	Android	93	1.67%
Donavon Nitzsche	Asia	Internet Explorer	Android	76	1.36%
Johann Watsica	Asia	Safari	Android	21	0.38%
Gene Feeney	Asia	Opera	Ubuntu	64	1.15%
North America (16 people)	1 continent	4 browsers	5 OSes	995	17.9%
Mossie Von	North America	Safari	Mac OS	31	0.56%
Thelma Wisoky	North America	Firefox	iOS	74	1.33%
Demond Ortiz	North America	Safari	Windows	70	1.26%
Ethelyn Fahey	North America	Opera	Mac OS	79	1.42%
Walter Beahan	North America	Edge	Mac OS	89	1.60%
Cyril Sipes	North America	Safari	Ubuntu	18	0.32%
Alexandro Keebler	North America	Safari	Mac OS	38	0.68%
Zachariah Kautzer	North America	Opera	Android	99	1.78%
Maxie Padberg	North America	Safari	Ubuntu	53	0.95%
Jermey Schneider	North America	Firefox	Mac OS	94	1.69%
Randi McGlynn	North America	Opera	iOS	62	1.11%
Paula Wilderman	North America	Firefox	Android	97	1.74%
Jennie Emmerich	North America	Firefox	Android	62	1.11%
Isaias Langosh	North America	Opera	Android	79	1.42%
Zachary Jacobs	North America	Opera	Mac OS	1	0.02%
Mollie Crist	North America	Firefox	Android	49	0.88%
South America (17 people)	1 continent	6 browsers	5 OSes	872	15.7%
Stefan Hudson	South America	Edge	iOS	17	0.31%
Gene McGlynn	South America	Internet Explorer	Android	17	0.31%
Fae Cronin	South America	Chrome	Mac OS	67	1.20%
Gus Oberbrunner	South America	Internet Explorer	Mac OS	52	0.93%
Sibyl Botsford	South America	Internet Explorer	iOS	78	1.40%
Burley Schultz	South America	Opera	Android	40	0.72%
Francesco Nienow	South America	Firefox	Android	69	1.24%
Delphine Nader	South America	Opera	Ubuntu	99	1.78%
Okey Macejkovic	South America	Internet Explorer	iOS	20	0.36%
Luisa Towne	South America	Opera	Ubuntu	97	1.74%
Amari Ferry	South America	Firefox	Android	16	0.29%
Jany Boyle	South America	Edge	Mac OS	34	0.61%
Ova Koelpin	South America	Edge	Windows	32	0.57%
Anastacio Bode	South America	Opera	Mac OS	72	1.29%
Durward Stracke	South America	Edge	Android	58	1.04%
Taryn Schimmel	South America	Safari	iOS	79	1.42%
Avis Corwin	South America	Safari	Ubuntu	25	0.45%
Africa (15 people)	1 continent	6 browsers	5 OSes	790	14.2%
Jamey Gulgowski	Africa	Internet Explorer	iOS	44	0.79%
Pasquale Emmerich	Africa	Chrome	Ubuntu	16	0.29%
Arnulfo Schumm	Africa	Firefox	iOS	32	0.57%
Tiana Gutkowski	Africa	Opera	Ubuntu	83	1.49%
Floyd Steuber	Africa	Opera	Ubuntu	59	1.06%
Doyle Mitchell	Africa	Internet Explorer	Android	90	1.62%
Hilton Hand	Africa	Safari	Mac OS	86	1.54%
Irwin Rau	Africa	Opera	iOS	88	1.58%
Vernie Adams	Africa	Chrome	Mac OS	32	0.57%
Sienna Hudson	Africa	Internet Explorer	Android	67	1.20%
Queenie Turcotte	Africa	Opera	Windows	20	0.36%
Columbus Crona	Africa	Internet Explorer	Ubuntu	23	0.41%
Larue Durgan	Africa	Edge	iOS	99	1.78%
Alanis Walsh	Africa	Chrome	Mac OS	44	0.79%
Ryleigh Howe	Africa	Safari	Android	7	0.13%
Australia (14 people)	1 continent	6 browsers	5 OSes	728	13.1%
Effie Rempel	Australia	Firefox	Mac OS	43	0.77%
Domenick Hodkiewicz	Australia	Chrome	Android	8	0.14%
Don Homenick	Australia	Opera	iOS	5	0.09%
Roman Erdman	Australia	Internet Explorer	Android	48	0.86%
Kayli Jewess	Australia	Safari	Android	40	0.72%
Rosalind Grady	Australia	Internet Explorer	iOS	70	1.26%
Abigayle Padberg	Australia	Chrome	Ubuntu	46	0.83%
Keagan Walker	Australia	Opera	iOS	72	1.29%
Tianna Bogan	Australia	Safari	Mac OS	84	1.51%
Mylene Hauck	Australia	Safari	Mac OS	70	1.26%
Alvena Pacocha	Australia	Safari	Android	56	1.01%
Remington Wyman	Australia	Edge	Windows	16	0.29%
Jazmin Kling	Australia	Chrome	Mac OS	79	1.42%
Reece Ebert	Australia	Safari	Mac OS	91	1.63%
Antarctica (10 people)	1 continent	5 browsers	4 OSes	577	10.4%
Jesus Wunsch	Antarctica	Safari	Mac OS	23	0.41%
Bettie Nienow	Antarctica	Safari	Mac OS	3	0.05%
Deangelo Schimmel	Antarctica	Safari	Mac OS	77	1.38%
Angela Harber	Antarctica	Opera	iOS	23	0.41%
Norene Ebert	Antarctica	Safari	Ubuntu	92	1.65%
Margarett Koepp	Antarctica	Chrome	Android	87	1.56%
Magali Lubowitz	Antarctica	Firefox	Mac OS	62	1.11%
Ophelia Lubowitz	Antarctica	Safari	Ubuntu	79	1.42%
Roscoe Zemlak	Antarctica	Edge	iOS	55	0.99%
Geovanni Heidenreich	Antarctica	Edge	Ubuntu	76	1.36%
Europe (7 people)	1 continent	3 browsers	5 OSes	474	8.5%
Jacky Harvey	Europe	Firefox	Ubuntu	29	0.52%
Letitia Swift	Europe	Firefox	iOS	57	1.02%
Modesta Friesen	Europe	Firefox	Mac OS	89	1.60%
Allen Larkin	Europe	Firefox	Android	99	1.78%
Bria Corkery	Europe	Opera	Android	82	1.47%
Jettie Kling	Europe	Internet Explorer	Android	92	1.65%
Ian Tremblay	Europe	Firefox	Windows	26	0.47%
TOTAL - 100 people	7 continents	6 browsers	5 OSes	5,569	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