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,800Edinburgh5421[email protected]
Garrett WintersAccountant$170,750Tokyo8422[email protected]
Ashton CoxJunior Technical Author$86,000San Francisco1562[email protected]
Cedric KellySenior Javascript Developer$433,060Edinburgh6224[email protected]
Airi SatouAccountant$162,700Tokyo5407[email protected]
Brielle WilliamsonIntegration Specialist$372,000New York4804[email protected]
Herrod ChandlerSales Assistant$137,500San Francisco9608[email protected]
Rhona DavidsonIntegration Specialist$327,900Tokyo6200[email protected]
Colleen HurstJavascript Developer$205,500San Francisco2360[email protected]
Sonya FrostSoftware Engineer$103,600Edinburgh1667[email protected]
Jena GainesOffice Manager$90,560London3814[email protected]
Quinn FlynnSupport Lead$342,000Edinburgh9497[email protected]
Charde MarshallRegional Director$470,600San Francisco6741[email protected]
Haley KennedySenior Marketing Designer$313,500London3597[email protected]
Tatyana FitzpatrickRegional Director$385,750London1965[email protected]
Michael SilvaMarketing Designer$198,500London1581[email protected]
Paul ByrdChief Financial Officer(CFO)$725,000New York3059[email protected]
Gloria LittleSystems Administrator$237,500New York1721[email protected]
Bradley GreerSoftware Engineer$132,000London2558[email protected]
Dai RiosPersonnel Lead$217,500Edinburgh2290[email protected]
Jenette CaldwellDevelopment Lead$345,000New York1937[email protected]
Yuri BerryChief Marketing Officer(CMO)$675,000New York6154[email protected]
Caesar VancePre-Sales Support$106,450New York8330[email protected]
Doris WilderSales Assistant$85,600Sidney3023[email protected]
Angelica RamosChief Executive Officer(CEO)$1,200,000London5797[email protected]
Gavin JoyceDeveloper$92,575Edinburgh8822[email protected]
Jennifer ChangRegional Director$357,650Singapore9239[email protected]
Brenden WagnerSoftware Engineer$206,850San Francisco1314[email protected]
Fiona GreenChief Operating Officer(COO)$850,000San Francisco2947[email protected]
Shou ItouRegional Marketing$163,000Tokyo8899[email protected]
Michelle HouseIntegration Specialist$95,400Sidney2769[email protected]
Suki BurksDeveloper$114,500London6832[email protected]
Prescott BartlettTechnical Author$145,000London3606[email protected]
Gavin CortezTeam Leader$235,500San Francisco2860[email protected]
Martena MccrayPost-Sales support$324,050Edinburgh8240[email protected]
Unity ButlerMarketing Designer$85,675San Francisco5384[email protected]
Howard HatfieldOffice Manager$164,500San Francisco7031[email protected]
Hope FuentesSecretary$109,850San Francisco6318[email protected]
Vivian HarrellFinancial Controller$452,500San Francisco9422[email protected]
Timothy MooneyOffice Manager$136,200London7580[email protected]
Jackson BradshawDirector$645,750New York1042[email protected]
Olivia LiangSupport Engineer$234,500Singapore2120[email protected]
Bruno NashSoftware Engineer$163,500London6222[email protected]
Sakura YamamotoSupport Engineer$139,575Tokyo9383[email protected]
Thor WaltonDeveloper$98,540New York8327[email protected]
Finn CamachoSupport Engineer$87,500San Francisco2927[email protected]
Serge BaldwinData Coordinator$138,575Singapore8352[email protected]
Zenaida FrankSoftware Engineer$125,250New York7439[email protected]
Zorita SerranoSoftware Engineer$115,000San Francisco4389[email protected]
Jennifer AcostaJunior Javascript Developer$75,650Edinburgh3431[email protected]
Cara StevensSales Assistant$145,600New York3990[email protected]
Hermione ButlerRegional Director$356,250London1016[email protected]
Lael GreerSystems Administrator$103,500London6733[email protected]
Jonas AlexanderDeveloper$86,500San Francisco8196[email protected]
Shad DeckerRegional Director$183,000Edinburgh6373[email protected]
Michael BruceJavascript Developer$183,000Singapore5384[email protected]
Donna SniderCustomer Support$112,000New York4226[email protected]
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,8005421[email protected]
GarrettWintersAccountantTokyo632011/07/25$170,7508422[email protected]
AshtonCoxJunior Technical AuthorSan Francisco662009/01/12$86,0001562[email protected]
CedricKellySenior Javascript DeveloperEdinburgh222012/03/29$433,0606224[email protected]
AiriSatouAccountantTokyo332008/11/28$162,7005407[email protected]
BrielleWilliamsonIntegration SpecialistNew York612012/12/02$372,0004804[email protected]
HerrodChandlerSales AssistantSan Francisco592012/08/06$137,5009608[email protected]
RhonaDavidsonIntegration SpecialistTokyo552010/10/14$327,9006200[email protected]
ColleenHurstJavascript DeveloperSan Francisco392009/09/15$205,5002360[email protected]
SonyaFrostSoftware EngineerEdinburgh232008/12/13$103,6001667[email protected]
JenaGainesOffice ManagerLondon302008/12/19$90,5603814[email protected]
QuinnFlynnSupport LeadEdinburgh222013/03/03$342,0009497[email protected]
ChardeMarshallRegional DirectorSan Francisco362008/10/16$470,6006741[email protected]
HaleyKennedySenior Marketing DesignerLondon432012/12/18$313,5003597[email protected]
TatyanaFitzpatrickRegional DirectorLondon192010/03/17$385,7501965[email protected]
MichaelSilvaMarketing DesignerLondon662012/11/27$198,5001581[email protected]
PaulByrdChief Financial Officer(CFO)New York642010/06/09$725,0003059[email protected]
GloriaLittleSystems AdministratorNew York592009/04/10$237,5001721[email protected]
BradleyGreerSoftware EngineerLondon412012/10/13$132,0002558[email protected]
DaiRiosPersonnel LeadEdinburgh352012/09/26$217,5002290[email protected]
JenetteCaldwellDevelopment LeadNew York302011/09/03$345,0001937[email protected]
YuriBerryChief Marketing Officer(CMO)New York402009/06/25$675,0006154[email protected]
CaesarVancePre-Sales SupportNew York212011/12/12$106,4508330[email protected]
DorisWilderSales AssistantSidney232010/09/20$85,6003023[email protected]
AngelicaRamosChief Executive Officer(CEO)London472009/10/09$1,200,0005797[email protected]
GavinJoyceDeveloperEdinburgh422010/12/22$92,5758822[email protected]
JenniferChangRegional DirectorSingapore282010/11/14$357,6509239[email protected]
MartenaMccrayPost-Sales supportEdinburgh462011/03/09$324,0508240[email protected]
UnityButlerMarketing DesignerSan Francisco472009/12/09$85,6755384[email protected]
HowardHatfieldOffice ManagerSan Francisco512008/12/16$164,5007031[email protected]
HopeFuentesSecretarySan Francisco412010/02/12$109,8506318[email protected]
VivianHarrellFinancial ControllerSan Francisco622009/02/14$452,5009422[email protected]
TimothyMooneyOffice ManagerLondon372008/12/11$136,2007580[email protected]
JacksonBradshawDirectorNew York652008/09/26$645,7501042[email protected]
OliviaLiangSupport EngineerSingapore642011/02/03$234,5002120[email protected]
BrunoNashSoftware EngineerLondon382011/05/03$163,5006222[email protected]
SakuraYamamotoSupport EngineerTokyo372009/08/19$139,5759383[email protected]
ThorWaltonDeveloperNew York612013/08/11$98,5408327[email protected]
FinnCamachoSupport EngineerSan Francisco472009/07/07$87,5002927[email protected]
SergeBaldwinData CoordinatorSingapore642012/04/09$138,5758352[email protected]
ZenaidaFrankSoftware EngineerNew York632010/01/04$125,2507439[email protected]
ZoritaSerranoSoftware EngineerSan Francisco562012/06/01$115,0004389[email protected]
JenniferAcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,6503431[email protected]
CaraStevensSales AssistantNew York462011/12/06$145,6003990[email protected]
HermioneButlerRegional DirectorLondon472011/03/21$356,2501016[email protected]
LaelGreerSystems AdministratorLondon212009/02/27$103,5006733[email protected]
JonasAlexanderDeveloperSan Francisco302010/07/14$86,5008196[email protected]
ShadDeckerRegional DirectorEdinburgh512008/11/13$183,0006373[email protected]
MichaelBruceJavascript DeveloperSingapore292011/06/27$183,0005384[email protected]
DonnaSniderCustomer SupportNew York272011/01/25$112,0004226[email protected]
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