Responsive

DataTables Extensions

The features that DataTables provides can be greatly enhanced by the use of the plug-ins available on this page, which give many new user interaction and configuration options.

Reference
Configuration Option
The Responsive extension for DataTables can be applied to a DataTable in one of two ways; with a specific class name on the table.
First nameLast namePositionOfficeAgeStart dateSalaryExtn.E-mail
TigerNixonSystem ArchitectEdinburgh612011/04/25$320,8005421t.nixon@datatables.net
GarrettWintersChief Executive Officer (CEO)Tokyo632011/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
New Constructor
The third way of initialising Responsive is by manually creating a new instance using the $.fn.dataTable.Responsive class, as shown in this example (the other two methods are provided using this constructor
First nameLast namePositionOfficeAgeStart dateSalaryExtn.E-mail
TigerNixonSystem ArchitectEdinburgh612011/04/25$320,8005421t.nixon@datatables.net
GarrettWintersChief Executive Officer (CEO)Tokyo632011/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
Immediately Show Hidden Details
Responsive has the ability to display the details that it has hidden in a variety of different ways. Its default is to allow the end user to toggle the the display by clicking on a row and showing the information in a DataTables child row
First nameLast namePositionOfficeAgeStart dateSalaryExtn.E-mail
TigerNixonSystem ArchitectEdinburgh612011/04/25$320,8005421t.nixon@datatables.net
GarrettWintersChief Executive Officer (CEO)Tokyo632011/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
Settings
  • Theme Mode

    Choose light or dark mode or Auto

  • Header Theme

    Choose Header Theme

  • Accent color

    Choose your primary theme color

  • Sidebar Theme

    Choose Sidebar Theme

  • Sidebar Caption

    Sidebar Caption Hide/Show

  • Theme Layout

    LTR/RTL

  • Layout Width

    Choose Full or Container Layout