Responsive DataTable | Admindek Dashboard Template

The features that DataTables provides can be greatly enhanced by the use of the plug-ins available on this page

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 name	Last name	Position	Office	Age	Start date	Salary	Extn.	E-mail
Tiger	Nixon	System Architect	Edinburgh	61	2011/04/25	$320,800	5421	[email protected]
Garrett	Winters	Chief Executive Officer (CEO)	Tokyo	63	2011/07/25	$170,750	8422	[email protected]
Ashton	Cox	Junior Technical Author	San Francisco	66	2009/01/12	$86,000	1562	[email protected]
Cedric	Kelly	Senior Javascript Developer	Edinburgh	22	2012/03/29	$433,060	6224	[email protected]
Airi	Satou	Accountant	Tokyo	33	2008/11/28	$162,700	5407	[email protected]
Brielle	Williamson	Integration Specialist	New York	61	2012/12/02	$372,000	4804	[email protected]
Herrod	Chandler	Sales Assistant	San Francisco	59	2012/08/06	$137,500	9608	[email protected]
Rhona	Davidson	Integration Specialist	Tokyo	55	2010/10/14	$327,900	6200	[email protected]
Colleen	Hurst	Javascript Developer	San Francisco	39	2009/09/15	$205,500	2360	[email protected]
Sonya	Frost	Software Engineer	Edinburgh	23	2008/12/13	$103,600	1667	[email protected]
Jena	Gaines	Office Manager	London	30	2008/12/19	$90,560	3814	[email protected]
Quinn	Flynn	Support Lead	Edinburgh	22	2013/03/03	$342,000	9497	[email protected]
Charde	Marshall	Regional Director	San Francisco	36	2008/10/16	$470,600	6741	[email protected]
Haley	Kennedy	Senior Marketing Designer	London	43	2012/12/18	$313,500	3597	[email protected]
Tatyana	Fitzpatrick	Regional Director	London	19	2010/03/17	$385,750	1965	[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 name	Last name	Position	Office	Age	Start date	Salary	Extn.	E-mail
Tiger	Nixon	System Architect	Edinburgh	61	2011/04/25	$320,800	5421	[email protected]
Garrett	Winters	Chief Executive Officer (CEO)	Tokyo	63	2011/07/25	$170,750	8422	[email protected]
Ashton	Cox	Junior Technical Author	San Francisco	66	2009/01/12	$86,000	1562	[email protected]
Cedric	Kelly	Senior Javascript Developer	Edinburgh	22	2012/03/29	$433,060	6224	[email protected]
Airi	Satou	Accountant	Tokyo	33	2008/11/28	$162,700	5407	[email protected]
Brielle	Williamson	Integration Specialist	New York	61	2012/12/02	$372,000	4804	[email protected]
Herrod	Chandler	Sales Assistant	San Francisco	59	2012/08/06	$137,500	9608	[email protected]
Rhona	Davidson	Integration Specialist	Tokyo	55	2010/10/14	$327,900	6200	[email protected]
Colleen	Hurst	Javascript Developer	San Francisco	39	2009/09/15	$205,500	2360	[email protected]
Sonya	Frost	Software Engineer	Edinburgh	23	2008/12/13	$103,600	1667	[email protected]
Jena	Gaines	Office Manager	London	30	2008/12/19	$90,560	3814	[email protected]
Quinn	Flynn	Support Lead	Edinburgh	22	2013/03/03	$342,000	9497	[email protected]
Charde	Marshall	Regional Director	San Francisco	36	2008/10/16	$470,600	6741	[email protected]
Haley	Kennedy	Senior Marketing Designer	London	43	2012/12/18	$313,500	3597	[email protected]
Tatyana	Fitzpatrick	Regional Director	London	19	2010/03/17	$385,750	1965	[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 name	Last name	Position	Office	Age	Start date	Salary	Extn.	E-mail
Tiger	Nixon	System Architect	Edinburgh	61	2011/04/25	$320,800	5421	[email protected]
Garrett	Winters	Chief Executive Officer (CEO)	Tokyo	63	2011/07/25	$170,750	8422	[email protected]
Ashton	Cox	Junior Technical Author	San Francisco	66	2009/01/12	$86,000	1562	[email protected]
Cedric	Kelly	Senior Javascript Developer	Edinburgh	22	2012/03/29	$433,060	6224	[email protected]
Airi	Satou	Accountant	Tokyo	33	2008/11/28	$162,700	5407	[email protected]
Brielle	Williamson	Integration Specialist	New York	61	2012/12/02	$372,000	4804	[email protected]
Herrod	Chandler	Sales Assistant	San Francisco	59	2012/08/06	$137,500	9608	[email protected]
Rhona	Davidson	Integration Specialist	Tokyo	55	2010/10/14	$327,900	6200	[email protected]
Colleen	Hurst	Javascript Developer	San Francisco	39	2009/09/15	$205,500	2360	[email protected]
Sonya	Frost	Software Engineer	Edinburgh	23	2008/12/13	$103,600	1667	[email protected]
Jena	Gaines	Office Manager	London	30	2008/12/19	$90,560	3814	[email protected]
Quinn	Flynn	Support Lead	Edinburgh	22	2013/03/03	$342,000	9497	[email protected]
Charde	Marshall	Regional Director	San Francisco	36	2008/10/16	$470,600	6741	[email protected]
Haley	Kennedy	Senior Marketing Designer	London	43	2012/12/18	$313,500	3597	[email protected]
Tatyana	Fitzpatrick	Regional Director	London	19	2010/03/17	$385,750	1965	[email protected]