Responsive DataTable | Gradient Able Dashboard Template

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.

entries per page

Search:

First name	Last name	Position	Office	Age	Start date	Salary	Extn.	E-mail
Airi	Satou	Accountant	Tokyo	33	2008/11/28	$162,700	5407	a.satou@datatables.net
Ashton	Cox	Junior Technical Author	San Francisco	66	2009/01/12	$86,000	1562	a.cox@datatables.net
Brielle	Williamson	Integration Specialist	New York	61	2012/12/02	$372,000	4804	b.williamson@datatables.net
Cedric	Kelly	Senior Javascript Developer	Edinburgh	22	2012/03/29	$433,060	6224	c.kelly@datatables.net
Charde	Marshall	Regional Director	San Francisco	36	2008/10/16	$470,600	6741	c.marshall@datatables.net
Colleen	Hurst	Javascript Developer	San Francisco	39	2009/09/15	$205,500	2360	c.hurst@datatables.net
Garrett	Winters	Chief Executive Officer (CEO)	Tokyo	63	2011/07/25	$170,750	8422	g.winters@datatables.net
Haley	Kennedy	Senior Marketing Designer	London	43	2012/12/18	$313,500	3597	h.kennedy@datatables.net
Herrod	Chandler	Sales Assistant	San Francisco	59	2012/08/06	$137,500	9608	h.chandler@datatables.net
Jena	Gaines	Office Manager	London	30	2008/12/19	$90,560	3814	j.gaines@datatables.net

Showing 1 to 10 of 15 entries

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

entries per page

Search:

First name	Last name	Position	Office	Age	Start date	Salary	Extn.	E-mail
Airi	Satou	Accountant	Tokyo	33	2008/11/28	$162,700	5407	a.satou@datatables.net
Ashton	Cox	Junior Technical Author	San Francisco	66	2009/01/12	$86,000	1562	a.cox@datatables.net
Brielle	Williamson	Integration Specialist	New York	61	2012/12/02	$372,000	4804	b.williamson@datatables.net
Cedric	Kelly	Senior Javascript Developer	Edinburgh	22	2012/03/29	$433,060	6224	c.kelly@datatables.net
Charde	Marshall	Regional Director	San Francisco	36	2008/10/16	$470,600	6741	c.marshall@datatables.net
Colleen	Hurst	Javascript Developer	San Francisco	39	2009/09/15	$205,500	2360	c.hurst@datatables.net
Garrett	Winters	Chief Executive Officer (CEO)	Tokyo	63	2011/07/25	$170,750	8422	g.winters@datatables.net
Haley	Kennedy	Senior Marketing Designer	London	43	2012/12/18	$313,500	3597	h.kennedy@datatables.net
Herrod	Chandler	Sales Assistant	San Francisco	59	2012/08/06	$137,500	9608	h.chandler@datatables.net
Jena	Gaines	Office Manager	London	30	2008/12/19	$90,560	3814	j.gaines@datatables.net

Showing 1 to 10 of 15 entries

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

entries per page

Search:

First name	Last name	Position	Office	Age	Start date	Salary	Extn.	E-mail
Airi	Satou	Accountant	Tokyo	33	2008/11/28	$162,700	5407	a.satou@datatables.net
Ashton	Cox	Junior Technical Author	San Francisco	66	2009/01/12	$86,000	1562	a.cox@datatables.net
Brielle	Williamson	Integration Specialist	New York	61	2012/12/02	$372,000	4804	b.williamson@datatables.net
Cedric	Kelly	Senior Javascript Developer	Edinburgh	22	2012/03/29	$433,060	6224	c.kelly@datatables.net
Charde	Marshall	Regional Director	San Francisco	36	2008/10/16	$470,600	6741	c.marshall@datatables.net
Colleen	Hurst	Javascript Developer	San Francisco	39	2009/09/15	$205,500	2360	c.hurst@datatables.net
Garrett	Winters	Chief Executive Officer (CEO)	Tokyo	63	2011/07/25	$170,750	8422	g.winters@datatables.net
Haley	Kennedy	Senior Marketing Designer	London	43	2012/12/18	$313,500	3597	h.kennedy@datatables.net
Herrod	Chandler	Sales Assistant	San Francisco	59	2012/08/06	$137,500	9608	h.chandler@datatables.net
Jena	Gaines	Office Manager	London	30	2008/12/19	$90,560	3814	j.gaines@datatables.net

Showing 1 to 10 of 15 entries

Help Center

Keefe Bond added new tags to 💪 Design system

Message

Challenge invitation

Forms

Keefe Bond added new tags to 💪 Design system

Security

Carson Darrin

Responsive

DataTables Extensions

Configuration Option

New Constructor

Immediately Show Hidden Details

Settings

Theme Mode

Sidebar Theme

Header color

Accent color

Sidebar Caption

Theme Layout

Layout Width