DataTable-active

DataTables is a Javascript HTML table enhancing library. It is a highly flexible tool

Reference
Add Rows
New rows can be added to a DataTable using the row.add() API method. Simply call the API function with the data for the new row
Column 1 Column 2 Column 3 Column 4 Column 5
Column 1 Column 2 Column 3 Column 4 Column 5
Individual Column Searching (Text Inputs)
The searching functionality provided by DataTables is useful for quickly search through the information in the table - however the search is global, and you may wish to present controls that search on specific columns.
Individual Column Searching (Select Inputs)
This example is almost identical to text based individual column example and provides the same functionality, but in this case using select input controls.
Row Selection (Multiple Rows)
It can be useful to provide the user with the option to select rows in a DataTable. This can be done by using a click event to add / remove a class on the table rows.
Name Position Office Age Start date Salary
Tiger Nixon System Architect Edinburgh 61 2025/04/25 $320,800
Garrett Winters Accountant Tokyo 63 2025/07/25 $170,750
Ashton Cox Junior Technical Author San Francisco 66 2025/01/12 $86,000
Cedric Kelly Senior Javascript Developer Edinburgh 22 2025/03/29 $433,060
Airi Satou Accountant Tokyo 33 2025/11/28 $162,700
Brielle Williamson Integration Specialist New York 61 2025/12/02 $372,000
Herrod Chandler Sales Assistant San Francisco 59 2025/08/06 $137,500
Rhona Davidson Integration Specialist Tokyo 55 2025/10/14 $327,900
Colleen Hurst Javascript Developer San Francisco 39 2025/09/15 $205,500
Sonya Frost Software Engineer Edinburgh 23 2025/12/13 $103,600
Jena Gaines Office Manager London 30 2025/12/19 $90,560
Quinn Flynn Support Lead Edinburgh 22 2025/03/03 $342,000
Charde Marshall Regional Director San Francisco 36 2025/10/16 $470,600
Haley Kennedy Senior Marketing Designer London 43 2025/12/18 $313,500
Tatyana Fitzpatrick Regional Director London 19 2025/03/17 $385,750
Michael Silva Marketing Designer London 66 2025/11/27 $198,500
Paul Byrd Chief Financial Officer (CFO) New York 64 2025/06/09 $725,000
Gloria Little Systems Administrator New York 59 2025/04/10 $237,500
Bradley Greer Software Engineer London 41 2025/10/13 $132,000
Dai Rios Personnel Lead Edinburgh 35 2025/09/26 $217,500
Jenette Caldwell Development Lead New York 30 2025/09/03 $345,000
Yuri Mantis Chief Marketing Officer (CMO) New York 40 2025/06/25 $675,000
Caesar Vance Pre-Sales Support New York 21 2025/12/12 $106,450
Doris Wilder Sales Assistant Sidney 23 2025/09/20 $85,600
Angelica Ramos Chief Executive Officer (CEO) London 47 2025/10/09 $1,200,000
Gavin Joyce Developer Edinburgh 42 2025/12/22 $92,575
Jennifer Chang Regional Director Singapore 28 2025/11/14 $357,650
Brenden Wagner Software Engineer San Francisco 28 2025/06/07 $206,850
Fiona Green Chief Operating Officer (COO) San Francisco 48 2025/03/11 $850,000
Shou Itou Regional Marketing Tokyo 20 2025/08/14 $163,000
Name Position Office Age Start date Salary
Row Selection And Deletion (Single Row)
This example modifies the multiple row selection example by only allowing the selection of a single row. This is done by checking to see if the row already has a selected class, and if so removing it.
Name Position Office Age Start date Salary
Tiger Nixon System Architect Edinburgh 61 2025/04/25 $320,800
Garrett Winters Accountant Tokyo 63 2025/07/25 $170,750
Ashton Cox Junior Technical Author San Francisco 66 2025/01/12 $86,000
Cedric Kelly Senior Javascript Developer Edinburgh 22 2025/03/29 $433,060
Airi Satou Accountant Tokyo 33 2025/11/28 $162,700
Brielle Williamson Integration Specialist New York 61 2025/12/02 $372,000
Herrod Chandler Sales Assistant San Francisco 59 2025/08/06 $137,500
Rhona Davidson Integration Specialist Tokyo 55 2025/10/14 $327,900
Colleen Hurst Javascript Developer San Francisco 39 2025/09/15 $205,500
Sonya Frost Software Engineer Edinburgh 23 2025/12/13 $103,600
Jena Gaines Office Manager London 30 2025/12/19 $90,560
Quinn Flynn Support Lead Edinburgh 22 2025/03/03 $342,000
Charde Marshall Regional Director San Francisco 36 2025/10/16 $470,600
Haley Kennedy Senior Marketing Designer London 43 2025/12/18 $313,500
Tatyana Fitzpatrick Regional Director London 19 2025/03/17 $385,750
Michael Silva Marketing Designer London 66 2025/11/27 $198,500
Paul Byrd Chief Financial Officer (CFO) New York 64 2025/06/09 $725,000
Gloria Little Systems Administrator New York 59 2025/04/10 $237,500
Bradley Greer Software Engineer London 41 2025/10/13 $132,000
Dai Rios Personnel Lead Edinburgh 35 2025/09/26 $217,500
Jenette Caldwell Development Lead New York 30 2025/09/03 $345,000
Yuri Mantis Chief Marketing Officer (CMO) New York 40 2025/06/25 $675,000
Caesar Vance Pre-Sales Support New York 21 2025/12/12 $106,450
Doris Wilder Sales Assistant Sidney 23 2025/09/20 $85,600
Angelica Ramos Chief Executive Officer (CEO) London 47 2025/10/09 $1,200,000
Gavin Joyce Developer Edinburgh 42 2025/12/22 $92,575
Jennifer Chang Regional Director Singapore 28 2025/11/14 $357,650
Brenden Wagner Software Engineer San Francisco 28 2025/06/07 $206,850
Fiona Green Chief Operating Officer (COO) San Francisco 48 2025/03/11 $850,000
Shou Itou Regional Marketing Tokyo 20 2025/08/14 $163,000
Name Position Office Age Start date Salary
Form Inputs
In order to perform paging, ordering, searching etc, DataTables can remove rows and cells from the document (i.e. those rows / cells which are not needed are not inserted into the document).
Name Age Position Office
Tiger Nixon
Garrett Winters
Ashton Cox
Cedric Kelly
Airi Satou
Brielle Williamson
Herrod Chandler
Rhona Davidson
Colleen Hurst
Sonya Frost
Jena Gaines
Quinn Flynn
Charde Marshall
Haley Kennedy
Tatyana Fitzpatrick
Michael Silva
Paul Byrd
Gloria Little
Bradley Greer
Dai Rios
Jenette Caldwell
Yuri Mantis
Caesar Vance
Doris Wilder
Angelica Ramos
Gavin Joyce
Name Age Position Office
Show / Hide Columns Dynamically
This example shows how you can make use of the column().visible() API method to dynamically show and hide columns in a table. Also included here is scrolling, just to show it enabled with this API method, although it's not required for the API function to work.
Name Position Office Age Start date Salary
Tiger Nixon System Architect Edinburgh 61 2025/04/25 $320,800
Garrett Winters Accountant Tokyo 63 2025/07/25 $170,750
Ashton Cox Junior Technical Author San Francisco 66 2025/01/12 $86,000
Cedric Kelly Senior Javascript Developer Edinburgh 22 2025/03/29 $433,060
Airi Satou Accountant Tokyo 33 2025/11/28 $162,700
Brielle Williamson Integration Specialist New York 61 2025/12/02 $372,000
Herrod Chandler Sales Assistant San Francisco 59 2025/08/06 $137,500
Rhona Davidson Integration Specialist Tokyo 55 2025/10/14 $327,900
Colleen Hurst Javascript Developer San Francisco 39 2025/09/15 $205,500
Sonya Frost Software Engineer Edinburgh 23 2025/12/13 $103,600
Jena Gaines Office Manager London 30 2025/12/19 $90,560
Quinn Flynn Support Lead Edinburgh 22 2025/03/03 $342,000
Charde Marshall Regional Director San Francisco 36 2025/10/16 $470,600
Haley Kennedy Senior Marketing Designer London 43 2025/12/18 $313,500
Tatyana Fitzpatrick Regional Director London 19 2025/03/17 $385,750
Michael Silva Marketing Designer London 66 2025/11/27 $198,500
Paul Byrd Chief Financial Officer (CFO) New York 64 2025/06/09 $725,000
Gloria Little Systems Administrator New York 59 2025/04/10 $237,500
Bradley Greer Software Engineer London 41 2025/10/13 $132,000
Dai Rios Personnel Lead Edinburgh 35 2025/09/26 $217,500
Jenette Caldwell Development Lead New York 30 2025/09/03 $345,000
Yuri Mantis Chief Marketing Officer (CMO) New York 40 2025/06/25 $675,000
Caesar Vance Pre-Sales Support New York 21 2025/12/12 $106,450
Doris Wilder Sales Assistant Sidney 23 2025/09/20 $85,600
Angelica Ramos Chief Executive Officer (CEO) London 47 2025/10/09 $1,200,000
Gavin Joyce Developer Edinburgh 42 2025/12/22 $92,575
Jennifer Chang Regional Director Singapore 28 2025/11/14 $357,650
Brenden Wagner Software Engineer San Francisco 28 2025/06/07 $206,850
Fiona Green Chief Operating Officer (COO) San Francisco 48 2025/03/11 $850,000
Shou Itou Regional Marketing Tokyo 20 2025/08/14 $163,000
Name Position Office Age Start date Salary
Search API (Regular Expressions)
Searching a table is one of the most common user interactions with a DataTables table, and DataTables provides a number of methods for you to control this interaction.
Target Search text Treat as regex Use smart search
Global search
Column - Name
Column - Position
Column - Office
Column - Age
Column - Start date
Column - Salary
Name Position Office Age Start date Salary
Tiger Nixon System Architect Edinburgh 61 2025/04/25 $320,800
Garrett Winters Accountant Tokyo 63 2025/07/25 $170,750
Ashton Cox Junior Technical Author San Francisco 66 2025/01/12 $86,000
Cedric Kelly Senior Javascript Developer Edinburgh 22 2025/03/29 $433,060
Airi Satou Accountant Tokyo 33 2025/11/28 $162,700
Brielle Williamson Integration Specialist New York 61 2025/12/02 $372,000
Herrod Chandler Sales Assistant San Francisco 59 2025/08/06 $137,500
Rhona Davidson Integration Specialist Tokyo 55 2025/10/14 $327,900
Colleen Hurst Javascript Developer San Francisco 39 2025/09/15 $205,500
Sonya Frost Software Engineer Edinburgh 23 2025/12/13 $103,600
Jena Gaines Office Manager London 30 2025/12/19 $90,560
Quinn Flynn Support Lead Edinburgh 22 2025/03/03 $342,000
Charde Marshall Regional Director San Francisco 36 2025/10/16 $470,600
Haley Kennedy Senior Marketing Designer London 43 2025/12/18 $313,500
Tatyana Fitzpatrick Regional Director London 19 2025/03/17 $385,750
Michael Silva Marketing Designer London 66 2025/11/27 $198,500
Paul Byrd Chief Financial Officer (CFO) New York 64 2025/06/09 $725,000
Gloria Little Systems Administrator New York 59 2025/04/10 $237,500
Bradley Greer Software Engineer London 41 2025/10/13 $132,000
Dai Rios Personnel Lead Edinburgh 35 2025/09/26 $217,500
Jenette Caldwell Development Lead New York 30 2025/09/03 $345,000
Yuri Mantis Chief Marketing Officer (CMO) New York 40 2025/06/25 $675,000
Caesar Vance Pre-Sales Support New York 21 2025/12/12 $106,450
Doris Wilder Sales Assistant Sidney 23 2025/09/20 $85,600
Angelica Ramos Chief Executive Officer (CEO) London 47 2025/10/09 $1,200,000
Gavin Joyce Developer Edinburgh 42 2025/12/22 $92,575
Jennifer Chang Regional Director Singapore 28 2025/11/14 $357,650
Brenden Wagner Software Engineer San Francisco 28 2025/06/07 $206,850
Fiona Green Chief Operating Officer (COO) San Francisco 48 2025/03/11 $850,000
Shou Itou Regional Marketing Tokyo 20 2025/08/14 $163,000
Name Position Office Age Start date Salary
Theme Customizer

Personalize your experience

Theme Mode

Quick switch between themes

Sidebar Configuration

Customize your sidebar appearance

Choose between light and dark sidebar
Show or hide navigation icons
Show or hide navigation captions
Left-to-right or right-to-left layout
Container width configuration
Theme Colors

Customize your color scheme

Choose your main brand color
Customize header background color
Customize navigation bar colors
Brand logo area customization
Navigation caption text colors
Advanced Settings

Fine-tune interface details

Choose icons for expandable menus
Icons for menu link items