DATATABLE SCRIPT

MAKE YOUR TABLES MORE USABLE & RESPONSIVE

DataTable Features:

Sort option for columns
Exclude columns from being sortable
Search option for table
Exclude columns from being searchable
Includes responsive layout by collapsing columns
Option to always collapse columns
Row pagination option for (large) tables
Export options for tables (availability depends upon browser support)

DataTable

... apply some advanced features to your table

The “DataTable” script is the heaviest advanced table script, but also the most complex ones in terms of features. It allows you to quickly and easily add a sorting routine, row pagination, search option, export buttons and responsive layout to your table. The script will only apply some basic styling to your table; most styling will come from your theme or any other global table styling that is applied to your site.

Learn more about the DataTable script ...

STANDARD LAYOUT

MAKE YOUR TABLES MORE USABLE & RESPONSIVE

Name	Position	Office	Age	Start Date	Salary
Airi Satou	Accountant	Tokyo	33	11-28-2008	162700
Angelica Ramos	Chief Executive Officer (CEO)	London	47	10-09-2009	1200000
Ashton Cox	Junior Technical Author	San Francisco	66	01-12-2009	86000
Bradley Greer	Software Engineer	London	41	10-13-2012	132000
Brenden Wagner	Software Engineer	San Francisco	28	06-07-2011	206850
Brielle Williamson	Integration Specialist	New York	61	12-02-2012	372000
Bruno Nash	Software Engineer	London	38	05-03-2011	163500
Caesar Vance	Pre-Sales Support	New York	21	12-12-2011	106450
Cara Stevens	Sales Assistant	New York	46	12-06-2011	145600
Cedric Kelly	Senior Javascript Developer	Edinburgh	22	03-29-2012	433060
Charde Marshall	Regional Director	San Francisco	36	10-16-2008	470600
Colleen Hurst	Javascript Developer	San Francisco	39	09-15-2009	205500
Dai Rios	Personnel Lead	Edinburgh	35	09-26-2012	217500
Donna Snider	Customer Support	New York	27	01-25-2011	112000
Doris Wilder	Sales Assistant	Sidney	23	09-20-2010	85600
Finn Camacho	Support Engineer	San Francisco	47	07-07-2009	87500
Fiona Green	Chief Operating Officer (COO)	San Francisco	48	03-11-2010	850000
Garrett Winters	Accountant	Tokyo	63	07-25-2011	170750
Gavin Cortez	Team Leader	San Francisco	22	10-26-2008	235500
Gavin Joyce	Developer	Edinburgh	42	12-22-2010	92575
Gloria Little	Systems Administrator	New York	59	04-10-2009	237500
Haley Kennedy	Senior Marketing Designer	London	43	12-18-2012	313500
Hermione Butler	Regional Director	London	47	03-21-2011	356250
Herrod Chandler	Sales Assistant	San Francisco	59	08-06-2012	137500
Hope Fuentes	Secretary	San Francisco	41	02-12-2010	109850
Howard Hatfield	Office Manager	San Francisco	51	12-16-2008	164500
Jackson Bradshaw	Director	New York	65	09-26-2008	645750
Jena Gaines	Office Manager	London	30	12-19-2008	90560
Jenette Caldwell	Development Lead	New York	30	09-03-2011	345000
Jennifer Acosta	Junior Javascript Developer	Edinburgh	43	02-01-2013	75650
Jennifer Chang	Regional Director	Singapore	28	11-14-2010	357650
Jonas Alexander	Developer	San Francisco	30	07-14-2010	86500
Lael Greer	Systems Administrator	London	21	02-27-2009	103500
Martena Mccray	Post-Sales support	Edinburgh	46	03-09-2011	324050
Michael Bruce	Javascript Developer	Singapore	29	06-27-2011	183000
Michael Silva	Marketing Designer	London	66	11-27-2012	198500
Michelle House	Integration Specialist	Sidney	37	06-02-2011	95400
Olivia Liang	Support Engineer	Singapore	64	02-03-2011	234500
Paul Byrd	Chief Financial Officer (CFO)	New York	64	06-09-2010	725000
Prescott Bartlett	Technical Author	London	27	05-07-2011	145000
Quinn Flynn	Support Lead	Edinburgh	22	03-03-2013	342000
Rhona Davidson	Integration Specialist	Tokyo	55	10-14-2010	327900
Sakura Yamamoto	Support Engineer	Tokyo	37	08-19-2009	139575
Serge Baldwin	Data Coordinator	Singapore	64	04-09-2012	138575
Shad Decker	Regional Director	Edinburgh	51	11-13-2008	183000
Shou Itou	Regional Marketing	Tokyo	20	08-14-2011	163000
Sonya Frost	Software Engineer	Edinburgh	23	12-13-2008	103600
Suki Burks	Developer	London	53	10-22-2009	114500
Tatyana Fitzpatrick	Regional Director	London	19	03-17-2010	385750
Thor Walton	Developer	New York	61	08-11-2013	98540
Tiger Nixon	System Architect	Edinburgh	61	04-25-2011	320800
Timothy Mooney	Office Manager	London	37	12-11-2008	136200
Unity Butler	Marketing Designer	San Francisco	47	12-09-2009	92000
Vivian Harrell	Financial Controller	San Francisco	62	02-14-2009	452500
Yuri Berry	Chief Marketing Officer (CMO)	New York	40	06-25-2009	675000
Zenaida Frank	Software Engineer	New York	63	01-04-2010	125250
Zorita Serrano	Software Engineer	San Francisco	56	06-01-2012	115000

RESPONSIVE LAYOUT

MAKE YOUR TABLES MORE USABLE & RESPONSIVE

Name	Position	Office	Age	Start Date	Salary
Airi Satou	Accountant	Tokyo	33	11-28-2008	162700
Angelica Ramos	Chief Executive Officer (CEO)	London	47	10-09-2009	1200000
Ashton Cox	Junior Technical Author	San Francisco	66	01-12-2009	86000
Bradley Greer	Software Engineer	London	41	10-13-2012	132000
Brenden Wagner	Software Engineer	San Francisco	28	06-07-2011	206850
Brielle Williamson	Integration Specialist	New York	61	12-02-2012	372000
Bruno Nash	Software Engineer	London	38	05-03-2011	163500
Caesar Vance	Pre-Sales Support	New York	21	12-12-2011	106450
Cara Stevens	Sales Assistant	New York	46	12-06-2011	145600
Cedric Kelly	Senior Javascript Developer	Edinburgh	22	03-29-2012	433060
Charde Marshall	Regional Director	San Francisco	36	10-16-2008	470600
Colleen Hurst	Javascript Developer	San Francisco	39	09-15-2009	205500
Dai Rios	Personnel Lead	Edinburgh	35	09-26-2012	217500
Donna Snider	Customer Support	New York	27	01-25-2011	112000
Doris Wilder	Sales Assistant	Sidney	23	09-20-2010	85600
Finn Camacho	Support Engineer	San Francisco	47	07-07-2009	87500
Fiona Green	Chief Operating Officer (COO)	San Francisco	48	03-11-2010	850000
Garrett Winters	Accountant	Tokyo	63	07-25-2011	170750
Gavin Cortez	Team Leader	San Francisco	22	10-26-2008	235500
Gavin Joyce	Developer	Edinburgh	42	12-22-2010	92575
Gloria Little	Systems Administrator	New York	59	04-10-2009	237500
Haley Kennedy	Senior Marketing Designer	London	43	12-18-2012	313500
Hermione Butler	Regional Director	London	47	03-21-2011	356250
Herrod Chandler	Sales Assistant	San Francisco	59	08-06-2012	137500
Hope Fuentes	Secretary	San Francisco	41	02-12-2010	109850
Howard Hatfield	Office Manager	San Francisco	51	12-16-2008	164500
Jackson Bradshaw	Director	New York	65	09-26-2008	645750
Jena Gaines	Office Manager	London	30	12-19-2008	90560
Jenette Caldwell	Development Lead	New York	30	09-03-2011	345000
Jennifer Acosta	Junior Javascript Developer	Edinburgh	43	02-01-2013	75650
Jennifer Chang	Regional Director	Singapore	28	11-14-2010	357650
Jonas Alexander	Developer	San Francisco	30	07-14-2010	86500
Lael Greer	Systems Administrator	London	21	02-27-2009	103500
Martena Mccray	Post-Sales support	Edinburgh	46	03-09-2011	324050
Michael Bruce	Javascript Developer	Singapore	29	06-27-2011	183000
Michael Silva	Marketing Designer	London	66	11-27-2012	198500
Michelle House	Integration Specialist	Sidney	37	06-02-2011	95400
Olivia Liang	Support Engineer	Singapore	64	02-03-2011	234500
Paul Byrd	Chief Financial Officer (CFO)	New York	64	06-09-2010	725000
Prescott Bartlett	Technical Author	London	27	05-07-2011	145000
Quinn Flynn	Support Lead	Edinburgh	22	03-03-2013	342000
Rhona Davidson	Integration Specialist	Tokyo	55	10-14-2010	327900
Sakura Yamamoto	Support Engineer	Tokyo	37	08-19-2009	139575
Serge Baldwin	Data Coordinator	Singapore	64	04-09-2012	138575
Shad Decker	Regional Director	Edinburgh	51	11-13-2008	183000
Shou Itou	Regional Marketing	Tokyo	20	08-14-2011	163000
Sonya Frost	Software Engineer	Edinburgh	23	12-13-2008	103600
Suki Burks	Developer	London	53	10-22-2009	114500
Tatyana Fitzpatrick	Regional Director	London	19	03-17-2010	385750
Thor Walton	Developer	New York	61	08-11-2013	98540
Tiger Nixon	System Architect	Edinburgh	61	04-25-2011	320800
Timothy Mooney	Office Manager	London	37	12-11-2008	136200
Unity Butler	Marketing Designer	San Francisco	47	12-09-2009	92000
Vivian Harrell	Financial Controller	San Francisco	62	02-14-2009	452500
Yuri Berry	Chief Marketing Officer (CMO)	New York	40	06-25-2009	675000
Zenaida Frank	Software Engineer	New York	63	01-04-2010	125250
Zorita Serrano	Software Engineer	San Francisco	56	06-01-2012	115000

This table has been intentionally placed into a column that is not wide enough to accommodate the full width (all columns) of the table.

The DataTable script will “collapse” columns, whenever certain table widths are detected. By default, the script will simply collapse columns from right to left, but you can set specific columns to be collapsed on specific devices/screen sizes as well.

You are also able to always collapse certain columns, no matter the actual table width.

Whenever the table includes collapsed columns, a “+” icon in the first column will be shown as indicator, and clicking anywhere on the indicator will toggle (show/hide) the collapsed columns as “subtable” right below the row.