Datatable row group extension

The ability to group rows in a table can let an end user quickly and easily see the structure of the data shown, and also present them with summaries of the data shown in each group. Row group adds this ability to customize the start and end grouping rows displayed in the Datatable, letting you integrate the summarised data to fit perfectly in with your site.

Basic initialisation

Row group can be initialised on a Datatable by using rowGroup option in the Datatable option object. In most circumstances you will wish to also set the rowGroup.dataSrc option to tell Datatable which data point in the data source to use for initial grouping.


IDCard IDNamePositionOfficeAgeStart dateSalary
1629047Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
2629547Garrett WintersAccountantTokyo632011/07/25$170,750
3129547Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
4129567Cedric KellySenior DeveloperEdinburgh222012/03/29$433,060
5429567Airi SatouAccountantTokyo332008/11/28$162,700
6829567Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
7819067Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
8019067Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
9815667Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
10815067Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
11815227Jena GainesOffice ManagerLondon302008/12/19$90,560
12815927Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
13816927Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
14116927Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
15112907Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
16218907Michael SilvaMarketing DesignerLondon662012/11/27$198,500
17238907Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
18138997Gloria LittleSystems AdministratorNew York592009/04/10$237,500
19930997Bradley GreerSoftware EngineerLondon412012/10/13$132,000
20230987Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
21550987Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
22510987Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
23210987Caesar VancePre-Sales SupportNew York212011/12/12$106,450
24714987Doris WilderSales AssistantSydney232010/09/20$85,600
25915987Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
26015987Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
27015347Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
28715347Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
29956347Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
30236347Shou ItouRegional MarketingTokyo202011/08/14$163,000
31289347Michelle HouseIntegration SpecialistSydney372011/06/02$95,400
32289325Suki BurksDeveloperLondon532009/10/22$114,500
33989321Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
34189329Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
35109319Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
36079319Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
37076719Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
38976717Hope FuentesSecretarySan Francisco412010/02/12$109,850
39576710Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
40976710Timothy MooneyOffice ManagerLondon372008/12/11$136,200
41776711Jackson BradshawDirectorNew York652008/09/26$645,750
42976011Olivia LiangSupport EngineerSingapore642011/02/03$234,500
43375018Bruno NashSoftware EngineerLondon382011/05/03$163,500
44274011Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
45674061Thor WaltonDeveloperNew York612013/08/11$98,540
46874068Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
47854098Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
48854012Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
49124089Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
50924089Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
51123099Cara StevensSales AssistantNew York462011/12/06$145,600
52723399Hermione ButlerRegional DirectorLondon472011/03/21$356,250
53323399Lael GreerSystems AdministratorLondon212009/02/27$103,500
54783129Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
55756129Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
56056229Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
57996229Donna SniderCustomer SupportNew York272011/01/25$112,000

Group callback

It can often be useful to have grouping rows at the start and the end of a group to show different summary information about the group. Row group provides two rendering options - rowGroup.startRender and rowGroup.endRender - as the naming implies, one for the group start and one for the group end, allowing them be configured independently


IDCard IDNamePositionOfficeAgeStart dateSalary
1629047Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
2629547Garrett WintersAccountantTokyo632011/07/25$170,750
3129547Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
4129567Cedric KellySenior DeveloperEdinburgh222012/03/29$433,060
5429567Airi SatouAccountantTokyo332008/11/28$162,700
6829567Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
7819067Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
8019067Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
9815667Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
10815067Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
11815227Jena GainesOffice ManagerLondon302008/12/19$90,560
12815927Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
13816927Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
14116927Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
15112907Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
16218907Michael SilvaMarketing DesignerLondon662012/11/27$198,500
17238907Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
18138997Gloria LittleSystems AdministratorNew York592009/04/10$237,500
19930997Bradley GreerSoftware EngineerLondon412012/10/13$132,000
20230987Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
21550987Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
22510987Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
23210987Caesar VancePre-Sales SupportNew York212011/12/12$106,450
24714987Doris WilderSales AssistantSydney232010/09/20$85,600
25915987Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
26015987Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
27015347Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
28715347Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
29956347Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
30236347Shou ItouRegional MarketingTokyo202011/08/14$163,000
31289347Michelle HouseIntegration SpecialistSydney372011/06/02$95,400
32289325Suki BurksDeveloperLondon532009/10/22$114,500
33989321Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
34189329Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
35109319Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
36079319Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
37076719Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
38976717Hope FuentesSecretarySan Francisco412010/02/12$109,850
39576710Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
40976710Timothy MooneyOffice ManagerLondon372008/12/11$136,200
41776711Jackson BradshawDirectorNew York652008/09/26$645,750
42976011Olivia LiangSupport EngineerSingapore642011/02/03$234,500
43375018Bruno NashSoftware EngineerLondon382011/05/03$163,500
44274011Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
45674061Thor WaltonDeveloperNew York612013/08/11$98,540
46874068Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
47854098Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
48854012Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
49124089Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
50924089Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
51123099Cara StevensSales AssistantNew York462011/12/06$145,600
52723399Hermione ButlerRegional DirectorLondon472011/03/21$356,250
53323399Lael GreerSystems AdministratorLondon212009/02/27$103,500
54783129Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
55756129Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
56056229Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
57996229Donna SniderCustomer SupportNew York272011/01/25$112,000

Multi level grouping

Row group provides the ability to group data a multiple levels. This example show the rowGroup.dataSrc option being used as an array to specify the Office as the top level group and Position as second level.


IDCard IDNamePositionOfficeAgeStart dateSalary
1629047Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
2629547Garrett WintersAccountantTokyo632011/07/25$170,750
3129547Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
4129567Cedric KellySenior DeveloperEdinburgh222012/03/29$433,060
5429567Airi SatouAccountantTokyo332008/11/28$162,700
6829567Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
7819067Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
8019067Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
9815667Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
10815067Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
11815227Jena GainesOffice ManagerLondon302008/12/19$90,560
12815927Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
13816927Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
14116927Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
15112907Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
16218907Michael SilvaMarketing DesignerLondon662012/11/27$198,500
17238907Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
18138997Gloria LittleSystems AdministratorNew York592009/04/10$237,500
19930997Bradley GreerSoftware EngineerLondon412012/10/13$132,000
20230987Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
21550987Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
22510987Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
23210987Caesar VancePre-Sales SupportNew York212011/12/12$106,450
24714987Doris WilderSales AssistantSydney232010/09/20$85,600
25915987Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
26015987Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
27015347Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
28715347Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
29956347Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
30236347Shou ItouRegional MarketingTokyo202011/08/14$163,000
31289347Michelle HouseIntegration SpecialistSydney372011/06/02$95,400
32289325Suki BurksDeveloperLondon532009/10/22$114,500
33989321Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
34189329Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
35109319Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
36079319Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
37076719Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
38976717Hope FuentesSecretarySan Francisco412010/02/12$109,850
39576710Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
40976710Timothy MooneyOffice ManagerLondon372008/12/11$136,200
41776711Jackson BradshawDirectorNew York652008/09/26$645,750
42976011Olivia LiangSupport EngineerSingapore642011/02/03$234,500
43375018Bruno NashSoftware EngineerLondon382011/05/03$163,500
44274011Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
45674061Thor WaltonDeveloperNew York612013/08/11$98,540
46874068Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
47854098Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
48854012Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
49124089Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
50924089Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
51123099Cara StevensSales AssistantNew York462011/12/06$145,600
52723399Hermione ButlerRegional DirectorLondon472011/03/21$356,250
53323399Lael GreerSystems AdministratorLondon212009/02/27$103,500
54783129Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
55756129Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
56056229Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
57996229Donna SniderCustomer SupportNew York272011/01/25$112,000

Upcoming events

12:00

Donec laoreet fringilla justo a pellentesque

13:20

Nunc quis massa nec enim

14:00

Praesent sit amet

Reports

Navigation

Settings

Performance

CPU Load
60%
CPU Temparature
42°
RAM Usage
6,532 MB

Customer care

Reports

Projects

May 14, 2020

Upcoming events

12:00

Donec laoreet fringilla justo a pellentesque

13:20

Nunc quis massa nec enim

14:00

Praesent sit amet