Read full documnetation here

Zero configuration

DataTables has most features enabled by default,so all you need to do to use it with your own tables is to call the construction function:$().DataTable();.

NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer(CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer(CMO)New York402009/06/25$675,000
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
NamePositionOfficeAgeStart dateSalary

Row grouping

Although DataTables doesn't have row grouping built-in (picking one of the many methods available would overly limit the DataTables core), it is most certainly possible to give the look and feel of row grouping.

Name Position Office Age Start date Salary
Jena Gaines Office Manager London 30 2008/12/19 $90,560
Quinn Flynn Support Lead Edinburgh 22 2013/03/03 $342,000
Gloria Little Systems Administrator New York 59 2009/04/10 $237,500
Jenette Caldwell Development Lead New York 30 2011/09/03 $345,000
Doris Wilder Sales Assistant Sidney 23 2010/09/20 $85,600
Jennifer Chang Regional Director Singapore 28 2010/11/14 $357,650
Shou Itou Regional Marketing Tokyo 20 2011/08/14 $163,000
Michelle House Integration Specialist Sidney 37 2011/06/02 $95,400
Prescott Bartlett Technical Author London 27 2011/05/07 $145,000
Martena Mccray Post-Sales support Edinburgh 46 2011/03/09 $324,050
Name Position Office Age Start date Salary

Complex headers

When using tables to display data, you will often wish to display column information in groups. DataTables fully supports colspan and rowspan in the table's header,assigning the required order listeners to the TH element suitable for that column.

NameHR InformationContact
PositionSalaryOfficeExtn.E-mail
Tiger NixonSystem Architect$320,800Edinburgh5421t.nixon@datatables.net
Garrett WintersAccountant$170,750Tokyo8422g.winters@datatables.net
Ashton CoxJunior Technical Author$86,000San Francisco1562a.cox@datatables.net
Cedric KellySenior Javascript Developer$433,060Edinburgh6224c.kelly@datatables.net
Airi SatouAccountant$162,700Tokyo5407a.satou@datatables.net
Brielle WilliamsonIntegration Specialist$372,000New York4804b.williamson@datatables.net
Herrod ChandlerSales Assistant$137,500San Francisco9608h.chandler@datatables.net
Rhona DavidsonIntegration Specialist$327,900Tokyo6200r.davidson@datatables.net
Colleen HurstJavascript Developer$205,500San Francisco2360c.hurst@datatables.net
Sonya FrostSoftware Engineer$103,600Edinburgh1667s.frost@datatables.net
Jena GainesOffice Manager$90,560London3814j.gaines@datatables.net
Quinn FlynnSupport Lead$342,000Edinburgh9497q.flynn@datatables.net
Charde MarshallRegional Director$470,600San Francisco6741c.marshall@datatables.net
Haley KennedySenior Marketing Designer$313,500London3597h.kennedy@datatables.net
Tatyana FitzpatrickRegional Director$385,750London1965t.fitzpatrick@datatables.net
Michael SilvaMarketing Designer$198,500London1581m.silva@datatables.net
Paul ByrdChief Financial Officer(CFO)$725,000New York3059p.byrd@datatables.net
Gloria LittleSystems Administrator$237,500New York1721g.little@datatables.net
Bradley GreerSoftware Engineer$132,000London2558b.greer@datatables.net
Dai RiosPersonnel Lead$217,500Edinburgh2290d.rios@datatables.net
Jenette CaldwellDevelopment Lead$345,000New York1937j.caldwell@datatables.net
Yuri BerryChief Marketing Officer(CMO)$675,000New York6154y.berry@datatables.net
Caesar VancePre-Sales Support$106,450New York8330c.vance@datatables.net
Doris WilderSales Assistant$85,600Sidney3023d.wilder@datatables.net
Angelica RamosChief Executive Officer(CEO)$1,200,000London5797a.ramos@datatables.net
Gavin JoyceDeveloper$92,575Edinburgh8822g.joyce@datatables.net
Jennifer ChangRegional Director$357,650Singapore9239j.chang@datatables.net
Brenden WagnerSoftware Engineer$206,850San Francisco1314b.wagner@datatables.net
Fiona GreenChief Operating Officer(COO)$850,000San Francisco2947f.green@datatables.net
Shou ItouRegional Marketing$163,000Tokyo8899s.itou@datatables.net
Michelle HouseIntegration Specialist$95,400Sidney2769m.house@datatables.net
Suki BurksDeveloper$114,500London6832s.burks@datatables.net
Prescott BartlettTechnical Author$145,000London3606p.bartlett@datatables.net
Gavin CortezTeam Leader$235,500San Francisco2860g.cortez@datatables.net
Martena MccrayPost-Sales support$324,050Edinburgh8240m.mccray@datatables.net
Unity ButlerMarketing Designer$85,675San Francisco5384u.butler@datatables.net
Howard HatfieldOffice Manager$164,500San Francisco7031h.hatfield@datatables.net
Hope FuentesSecretary$109,850San Francisco6318h.fuentes@datatables.net
Vivian HarrellFinancial Controller$452,500San Francisco9422v.harrell@datatables.net
Timothy MooneyOffice Manager$136,200London7580t.mooney@datatables.net
Jackson BradshawDirector$645,750New York1042j.bradshaw@datatables.net
Olivia LiangSupport Engineer$234,500Singapore2120o.liang@datatables.net
Bruno NashSoftware Engineer$163,500London6222b.nash@datatables.net
Sakura YamamotoSupport Engineer$139,575Tokyo9383s.yamamoto@datatables.net
Thor WaltonDeveloper$98,540New York8327t.walton@datatables.net
Finn CamachoSupport Engineer$87,500San Francisco2927f.camacho@datatables.net
Serge BaldwinData Coordinator$138,575Singapore8352s.baldwin@datatables.net
Zenaida FrankSoftware Engineer$125,250New York7439z.frank@datatables.net
Zorita SerranoSoftware Engineer$115,000San Francisco4389z.serrano@datatables.net
Jennifer AcostaJunior Javascript Developer$75,650Edinburgh3431j.acosta@datatables.net
Cara StevensSales Assistant$145,600New York3990c.stevens@datatables.net
Hermione ButlerRegional Director$356,250London1016h.butler@datatables.net
Lael GreerSystems Administrator$103,500London6733l.greer@datatables.net
Jonas AlexanderDeveloper$86,500San Francisco8196j.alexander@datatables.net
Shad DeckerRegional Director$183,000Edinburgh6373s.decker@datatables.net
Michael BruceJavascript Developer$183,000Singapore5384m.bruce@datatables.net
Donna SniderCustomer Support$112,000New York4226d.snider@datatables.net
NamePositionSalaryOfficeExtn.E-mail

Add rows

New rows can be added to a DataTable very easily using the(row.add()) API method. Simply call the API function with the data that is to be used for the new row(be it an array or object). Multiple rows can be added using the(rows.add()) method(note the plural). Data can be likewise be updated with the(row().data() and row().remove() methods.)

Column 1Column 2Column 3Column 4Column 5
1.11.21.31.41.5
Column 1Column 2Column 3Column 4Column 5

Column selectors with Export and Print Options

All of the data export buttons have a exportOptions option which can be used to specify information about what data should be exported and how. The options given for this parameter are passed directly to the buttons.exportData() method to obtain the required data.

The print button will open a new window in the end user's browser and,by default,automatically trigger the print function allowing the end user to print the table. The window will be closed once the print is complete,or has been cancelled.

NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer(CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
NamePositionOfficeAgeStart dateSalary

Scroll - horizontal and vertical

In this example you can see DataTables doing both horizontal and vertical scrolling at the same time. Note also that pagination is enabled in this example,and the scrolling accounts for this.

First nameLast namePositionOfficeAgeStart dateSalaryExtn.E-mail
TigerNixonSystem ArchitectEdinburgh612011/04/25$320,8005421t.nixon@datatables.net
GarrettWintersAccountantTokyo632011/07/25$170,7508422g.winters@datatables.net
AshtonCoxJunior Technical AuthorSan Francisco662009/01/12$86,0001562a.cox@datatables.net
CedricKellySenior Javascript DeveloperEdinburgh222012/03/29$433,0606224c.kelly@datatables.net
AiriSatouAccountantTokyo332008/11/28$162,7005407a.satou@datatables.net
BrielleWilliamsonIntegration SpecialistNew York612012/12/02$372,0004804b.williamson@datatables.net
HerrodChandlerSales AssistantSan Francisco592012/08/06$137,5009608h.chandler@datatables.net
RhonaDavidsonIntegration SpecialistTokyo552010/10/14$327,9006200r.davidson@datatables.net
ColleenHurstJavascript DeveloperSan Francisco392009/09/15$205,5002360c.hurst@datatables.net
SonyaFrostSoftware EngineerEdinburgh232008/12/13$103,6001667s.frost@datatables.net
JenaGainesOffice ManagerLondon302008/12/19$90,5603814j.gaines@datatables.net
QuinnFlynnSupport LeadEdinburgh222013/03/03$342,0009497q.flynn@datatables.net
ChardeMarshallRegional DirectorSan Francisco362008/10/16$470,6006741c.marshall@datatables.net
HaleyKennedySenior Marketing DesignerLondon432012/12/18$313,5003597h.kennedy@datatables.net
TatyanaFitzpatrickRegional DirectorLondon192010/03/17$385,7501965t.fitzpatrick@datatables.net
MichaelSilvaMarketing DesignerLondon662012/11/27$198,5001581m.silva@datatables.net
PaulByrdChief Financial Officer(CFO)New York642010/06/09$725,0003059p.byrd@datatables.net
GloriaLittleSystems AdministratorNew York592009/04/10$237,5001721g.little@datatables.net
BradleyGreerSoftware EngineerLondon412012/10/13$132,0002558b.greer@datatables.net
DaiRiosPersonnel LeadEdinburgh352012/09/26$217,5002290d.rios@datatables.net
JenetteCaldwellDevelopment LeadNew York302011/09/03$345,0001937j.caldwell@datatables.net
YuriBerryChief Marketing Officer(CMO)New York402009/06/25$675,0006154y.berry@datatables.net
CaesarVancePre-Sales SupportNew York212011/12/12$106,4508330c.vance@datatables.net
DorisWilderSales AssistantSidney232010/09/20$85,6003023d.wilder@datatables.net
AngelicaRamosChief Executive Officer(CEO)London472009/10/09$1,200,0005797a.ramos@datatables.net
GavinJoyceDeveloperEdinburgh422010/12/22$92,5758822g.joyce@datatables.net
JenniferChangRegional DirectorSingapore282010/11/14$357,6509239j.chang@datatables.net
MartenaMccrayPost-Sales supportEdinburgh462011/03/09$324,0508240m.mccray@datatables.net
UnityButlerMarketing DesignerSan Francisco472009/12/09$85,6755384u.butler@datatables.net
HowardHatfieldOffice ManagerSan Francisco512008/12/16$164,5007031h.hatfield@datatables.net
HopeFuentesSecretarySan Francisco412010/02/12$109,8506318h.fuentes@datatables.net
VivianHarrellFinancial ControllerSan Francisco622009/02/14$452,5009422v.harrell@datatables.net
TimothyMooneyOffice ManagerLondon372008/12/11$136,2007580t.mooney@datatables.net
JacksonBradshawDirectorNew York652008/09/26$645,7501042j.bradshaw@datatables.net
OliviaLiangSupport EngineerSingapore642011/02/03$234,5002120o.liang@datatables.net
BrunoNashSoftware EngineerLondon382011/05/03$163,5006222b.nash@datatables.net
SakuraYamamotoSupport EngineerTokyo372009/08/19$139,5759383s.yamamoto@datatables.net
ThorWaltonDeveloperNew York612013/08/11$98,5408327t.walton@datatables.net
FinnCamachoSupport EngineerSan Francisco472009/07/07$87,5002927f.camacho@datatables.net
SergeBaldwinData CoordinatorSingapore642012/04/09$138,5758352s.baldwin@datatables.net
ZenaidaFrankSoftware EngineerNew York632010/01/04$125,2507439z.frank@datatables.net
ZoritaSerranoSoftware EngineerSan Francisco562012/06/01$115,0004389z.serrano@datatables.net
JenniferAcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,6503431j.acosta@datatables.net
CaraStevensSales AssistantNew York462011/12/06$145,6003990c.stevens@datatables.net
HermioneButlerRegional DirectorLondon472011/03/21$356,2501016h.butler@datatables.net
LaelGreerSystems AdministratorLondon212009/02/27$103,5006733l.greer@datatables.net
JonasAlexanderDeveloperSan Francisco302010/07/14$86,5008196j.alexander@datatables.net
ShadDeckerRegional DirectorEdinburgh512008/11/13$183,0006373s.decker@datatables.net
MichaelBruceJavascript DeveloperSingapore292011/06/27$183,0005384m.bruce@datatables.net
DonnaSniderCustomer SupportNew York272011/01/25$112,0004226d.snider@datatables.net
today

How can we help? 😄

7:45 AM

Hey John,I am looking for the best admin template.

Could you please help me to find it out? 🤔

7:50 AM

Stack admin is the responsive bootstrap 4 admin template.

8:01 AM