logo image v2.1.0

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,8005421[email protected]
GarrettWintersChief Executive Officer (CEO)Tokyo632011/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]
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,8005421[email protected]
GarrettWintersChief Executive Officer (CEO)Tokyo632011/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]
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,8005421[email protected]
GarrettWintersChief Executive Officer (CEO)Tokyo632011/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]
Settings
  • Theme Mode

    Choose light or dark mode or Auto

  • Sidebar Theme

    Choose Sidebar Theme

  • Header color

    Choose your Header theme color

  • Accent color

    Choose your primary theme color

  • Sidebar Caption

    Sidebar Caption Hide/Show

  • Theme Layout

    LTR/RTL

  • Layout Width

    Choose Full or Container Layout