DataTable Styling

DataTables

DataTables is a Javascript HTML table enhancing library. It is a highly flexible tool, built upon the foundations of progressive enhancement, that adds all of these advanced features to any HTML table.

Reference

Base Style

The DataTables default style file has a number of features which can be enabled based on the class name of the table

entries per page

Search:

Name	Position	Office	Age	Start date	Salary
Airi Satou	Accountant	Tokyo	33	2008/11/28	$162,700
Angelica Ramos	Chief Executive Officer (CEO)	London	47	2009/10/09	$1,200,000
Ashton Cox	Junior Technical Author	San Francisco	66	2009/01/12	$86,000
Bradley Greer	Software Engineer	London	41	2012/10/13	$132,000
Brenden Wagner	Software Engineer	San Francisco	28	2011/06/07	$206,850
Brielle Williamson	Integration Specialist	New York	61	2012/12/02	$372,000
Caesar Vance	Pre-Sales Support	New York	21	2011/12/12	$106,450
Cedric Kelly	Senior Javascript Developer	Edinburgh	22	2012/03/29	$433,060
Charde Marshall	Regional Director	San Francisco	36	2008/10/16	$470,600
Colleen Hurst	Javascript Developer	San Francisco	39	2009/09/15	$205,500
Name	Position	Office	Age	Start date	Salary

Showing 1 to 10 of 30 entries

No Styling Classes

This example shows the base DataTables style file being used, with none of the additional feature style classes being used.

entries per page

Search:

Name	Position	Office	Age	Start date	Salary
Airi Satou	Accountant	Tokyo	33	2008/11/28	$162,700
Angelica Ramos	Chief Executive Officer (CEO)	London	47	2009/10/09	$1,200,000
Ashton Cox	Junior Technical Author	San Francisco	66	2009/01/12	$86,000
Bradley Greer	Software Engineer	London	41	2012/10/13	$132,000
Brenden Wagner	Software Engineer	San Francisco	28	2011/06/07	$206,850
Brielle Williamson	Integration Specialist	New York	61	2012/12/02	$372,000
Caesar Vance	Pre-Sales Support	New York	21	2011/12/12	$106,450
Cedric Kelly	Senior Javascript Developer	Edinburgh	22	2012/03/29	$433,060
Charde Marshall	Regional Director	San Francisco	36	2008/10/16	$470,600
Colleen Hurst	Javascript Developer	San Francisco	39	2009/09/15	$205,500
Name	Position	Office	Age	Start date	Salary

Showing 1 to 10 of 30 entries

Base Style - Compact

The compact class reduces the amount of white-space in the default styling, increasing the information density on screen, as shown below.

entries per page

Search:

Name	Position	Office	Age	Start date	Salary
Airi Satou	Accountant	Tokyo	33	2008/11/28	$162,700
Angelica Ramos	Chief Executive Officer (CEO)	London	47	2009/10/09	$1,200,000
Ashton Cox	Junior Technical Author	San Francisco	66	2009/01/12	$86,000
Bradley Greer	Software Engineer	London	41	2012/10/13	$132,000
Brenden Wagner	Software Engineer	San Francisco	28	2011/06/07	$206,850
Brielle Williamson	Integration Specialist	New York	61	2012/12/02	$372,000
Caesar Vance	Pre-Sales Support	New York	21	2011/12/12	$106,450
Cedric Kelly	Senior Javascript Developer	Edinburgh	22	2012/03/29	$433,060
Charde Marshall	Regional Director	San Francisco	36	2008/10/16	$470,600
Colleen Hurst	Javascript Developer	San Francisco	39	2009/09/15	$205,500
Name	Position	Office	Age	Start date	Salary

Showing 1 to 10 of 30 entries

Base Style - Hover

This example shows DataTables with just the hover class specified. This class instructs DataTables' styling to highlight a row when the mouse is hovered over it.

entries per page

Search:

Name	Position	Office	Age	Start date	Salary
Airi Satou	Accountant	Tokyo	33	2008/11/28	$162,700
Angelica Ramos	Chief Executive Officer (CEO)	London	47	2009/10/09	$1,200,000
Ashton Cox	Junior Technical Author	San Francisco	66	2009/01/12	$86,000
Bradley Greer	Software Engineer	London	41	2012/10/13	$132,000
Brenden Wagner	Software Engineer	San Francisco	28	2011/06/07	$206,850
Brielle Williamson	Integration Specialist	New York	61	2012/12/02	$372,000
Caesar Vance	Pre-Sales Support	New York	21	2011/12/12	$106,450
Cedric Kelly	Senior Javascript Developer	Edinburgh	22	2012/03/29	$433,060
Charde Marshall	Regional Director	San Francisco	36	2008/10/16	$470,600
Colleen Hurst	Javascript Developer	San Francisco	39	2009/09/15	$205,500
Name	Position	Office	Age	Start date	Salary

Showing 1 to 10 of 30 entries

Jonh Smith

UI/UX Design

Message

Forms

Challenge invitation

Security

Carson Darrin 🖖

Notification

245.3k Followers

What's new announcement?

Able Pro is Redesigned

Able Pro is in best offer price

Featured Dashboard Template

Buy Once - Get Free Updated lifetime

DataTables

Base Style

No Styling Classes

Base Style - Compact

Base Style - Hover

Settings

Theme Mode

Theme Contrast

Custom Theme

Theme layout

Sidebar Caption

Theme Layout

Layout Width