## API

##### 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

##### 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 | 2015/04/25 | $320,800
Garrett Winters | Accountant | Tokyo | 63 | 2015/07/25 | $170,750
Ashton Cox | Junior Technical Author | San Francisco | 66 | 2016/01/12 | $86,000
Cedric Kelly | Senior Javascript Developer | Edinburgh | 22 | 2017/03/29 | $433,060
Airi Satou | Accountant | Tokyo | 33 | 2019/11/28 | $162,700
Brielle Williamson | Integration Specialist | New York | 61 | 2017/12/02 | $372,000
Herrod Chandler | Sales Assistant | San Francisco | 59 | 2017/08/06 | $137,500
Rhona Davidson | Integration Specialist | Tokyo | 55 | 2018/10/14 | $327,900
Colleen Hurst | Javascript Developer | San Francisco | 39 | 2016/09/15 | $205,500
Sonya Frost | Software Engineer | Edinburgh | 23 | 2019/12/13 | $103,600
Jena Gaines | Office Manager | London | 30 | 2019/12/19 | $90,560
Quinn Flynn | Support Lead | Edinburgh | 22 | 2020/03/03 | $342,000
Charde Marshall | Regional Director | San Francisco | 36 | 2019/10/16 | $470,600
Haley Kennedy | Senior Marketing Designer | London | 43 | 2017/12/18 | $313,500
Tatyana Fitzpatrick | Regional Director | London | 19 | 2018/03/17 | $385,750
Michael Silva | Marketing Designer | London | 66 | 2017/11/27 | $198,500
Paul Byrd | Chief Financial Officer (CFO) | New York | 64 | 2018/06/09 | $725,000
Gloria Little | Systems Administrator | New York | 59 | 2016/04/10 | $237,500
Bradley Greer | Software Engineer | London | 41 | 2017/10/13 | $132,000
Dai Rios | Personnel Lead | Edinburgh | 35 | 2017/09/26 | $217,500
Jenette Caldwell | Development Lead | New York | 30 | 2015/09/03 | $345,000
Yuri Mantis | Chief Marketing Officer (CMO) | New York | 40 | 2016/06/25 | $675,000
Caesar Vance | Pre-Sales Support | New York | 21 | 2015/12/12 | $106,450
Doris Wilder | Sales Assistant | Sidney | 23 | 2018/09/20 | $85,600
Angelica Ramos | Chief Executive Officer (CEO) | London | 47 | 2016/10/09 | $1,200,000
Gavin Joyce | Developer | Edinburgh | 42 | 2018/12/22 | $92,575
Jennifer Chang | Regional Director | Singapore | 28 | 2018/11/14 | $357,650
Brenden Wagner | Software Engineer | San Francisco | 28 | 2015/06/07 | $206,850
Fiona Green | Chief Operating Officer (COO) | San Francisco | 48 | 2018/03/11 | $850,000
Shou Itou | Regional Marketing | Tokyo | 20 | 2015/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 | 2015/04/25 | $320,800
Garrett Winters | Accountant | Tokyo | 63 | 2015/07/25 | $170,750
Ashton Cox | Junior Technical Author | San Francisco | 66 | 2016/01/12 | $86,000
Cedric Kelly | Senior Javascript Developer | Edinburgh | 22 | 2017/03/29 | $433,060
Airi Satou | Accountant | Tokyo | 33 | 2019/11/28 | $162,700
Brielle Williamson | Integration Specialist | New York | 61 | 2017/12/02 | $372,000
Herrod Chandler | Sales Assistant | San Francisco | 59 | 2017/08/06 | $137,500
Rhona Davidson | Integration Specialist | Tokyo | 55 | 2018/10/14 | $327,900
Colleen Hurst | Javascript Developer | San Francisco | 39 | 2016/09/15 | $205,500
Sonya Frost | Software Engineer | Edinburgh | 23 | 2019/12/13 | $103,600
Jena Gaines | Office Manager | London | 30 | 2019/12/19 | $90,560
Quinn Flynn | Support Lead | Edinburgh | 22 | 2020/03/03 | $342,000
Charde Marshall | Regional Director | San Francisco | 36 | 2019/10/16 | $470,600
Haley Kennedy | Senior Marketing Designer | London | 43 | 2017/12/18 | $313,500
Tatyana Fitzpatrick | Regional Director | London | 19 | 2018/03/17 | $385,750
Michael Silva | Marketing Designer | London | 66 | 2017/11/27 | $198,500
Paul Byrd | Chief Financial Officer (CFO) | New York | 64 | 2018/06/09 | $725,000
Gloria Little | Systems Administrator | New York | 59 | 2016/04/10 | $237,500
Bradley Greer | Software Engineer | London | 41 | 2017/10/13 | $132,000
Dai Rios | Personnel Lead | Edinburgh | 35 | 2017/09/26 | $217,500
Jenette Caldwell | Development Lead | New York | 30 | 2015/09/03 | $345,000
Yuri Mantis | Chief Marketing Officer (CMO) | New York | 40 | 2016/06/25 | $675,000
Caesar Vance | Pre-Sales Support | New York | 21 | 2015/12/12 | $106,450
Doris Wilder | Sales Assistant | Sidney | 23 | 2018/09/20 | $85,600
Angelica Ramos | Chief Executive Officer (CEO) | London | 47 | 2016/10/09 | $1,200,000
Gavin Joyce | Developer | Edinburgh | 42 | 2018/12/22 | $92,575
Jennifer Chang | Regional Director | Singapore | 28 | 2018/11/14 | $357,650
Brenden Wagner | Software Engineer | San Francisco | 28 | 2015/06/07 | $206,850
Fiona Green | Chief Operating Officer (COO) | San Francisco | 48 | 2018/03/11 | $850,000
Shou Itou | Regional Marketing | Tokyo | 20 | 2015/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 | 2015/04/25 | $320,800
Garrett Winters | Accountant | Tokyo | 63 | 2015/07/25 | $170,750
Ashton Cox | Junior Technical Author | San Francisco | 66 | 2016/01/12 | $86,000
Cedric Kelly | Senior Javascript Developer | Edinburgh | 22 | 2017/03/29 | $433,060
Airi Satou | Accountant | Tokyo | 33 | 2019/11/28 | $162,700
Brielle Williamson | Integration Specialist | New York | 61 | 2017/12/02 | $372,000
Herrod Chandler | Sales Assistant | San Francisco | 59 | 2017/08/06 | $137,500
Rhona Davidson | Integration Specialist | Tokyo | 55 | 2018/10/14 | $327,900
Colleen Hurst | Javascript Developer | San Francisco | 39 | 2016/09/15 | $205,500
Sonya Frost | Software Engineer | Edinburgh | 23 | 2019/12/13 | $103,600
Jena Gaines | Office Manager | London | 30 | 2019/12/19 | $90,560
Quinn Flynn | Support Lead | Edinburgh | 22 | 2020/03/03 | $342,000
Charde Marshall | Regional Director | San Francisco | 36 | 2019/10/16 | $470,600
Haley Kennedy | Senior Marketing Designer | London | 43 | 2017/12/18 | $313,500
Tatyana Fitzpatrick | Regional Director | London | 19 | 2018/03/17 | $385,750
Michael Silva | Marketing Designer | London | 66 | 2017/11/27 | $198,500
Paul Byrd | Chief Financial Officer (CFO) | New York | 64 | 2018/06/09 | $725,000
Gloria Little | Systems Administrator | New York | 59 | 2016/04/10 | $237,500
Bradley Greer | Software Engineer | London | 41 | 2017/10/13 | $132,000
Dai Rios | Personnel Lead | Edinburgh | 35 | 2017/09/26 | $217,500
Jenette Caldwell | Development Lead | New York | 30 | 2015/09/03 | $345,000
Yuri Mantis | Chief Marketing Officer (CMO) | New York | 40 | 2016/06/25 | $675,000
Caesar Vance | Pre-Sales Support | New York | 21 | 2015/12/12 | $106,450
Doris Wilder | Sales Assistant | Sidney | 23 | 2018/09/20 | $85,600
Angelica Ramos | Chief Executive Officer (CEO) | London | 47 | 2016/10/09 | $1,200,000
Gavin Joyce | Developer | Edinburgh | 42 | 2018/12/22 | $92,575
Jennifer Chang | Regional Director | Singapore | 28 | 2018/11/14 | $357,650
Brenden Wagner | Software Engineer | San Francisco | 28 | 2015/06/07 | $206,850
Fiona Green | Chief Operating Officer (COO) | San Francisco | 48 | 2018/03/11 | $850,000
Shou Itou | Regional Marketing | Tokyo | 20 | 2015/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 | 2015/04/25 | $320,800
Garrett Winters | Accountant | Tokyo | 63 | 2015/07/25 | $170,750
Ashton Cox | Junior Technical Author | San Francisco | 66 | 2016/01/12 | $86,000
Cedric Kelly | Senior Javascript Developer | Edinburgh | 22 | 2017/03/29 | $433,060
Airi Satou | Accountant | Tokyo | 33 | 2019/11/28 | $162,700
Brielle Williamson | Integration Specialist | New York | 61 | 2017/12/02 | $372,000
Herrod Chandler | Sales Assistant | San Francisco | 59 | 2017/08/06 | $137,500
Rhona Davidson | Integration Specialist | Tokyo | 55 | 2018/10/14 | $327,900
Colleen Hurst | Javascript Developer | San Francisco | 39 | 2016/09/15 | $205,500
Sonya Frost | Software Engineer | Edinburgh | 23 | 2019/12/13 | $103,600
Jena Gaines | Office Manager | London | 30 | 2019/12/19 | $90,560
Quinn Flynn | Support Lead | Edinburgh | 22 | 2020/03/03 | $342,000
Charde Marshall | Regional Director | San Francisco | 36 | 2019/10/16 | $470,600
Haley Kennedy | Senior Marketing Designer | London | 43 | 2017/12/18 | $313,500
Tatyana Fitzpatrick | Regional Director | London | 19 | 2018/03/17 | $385,750
Michael Silva | Marketing Designer | London | 66 | 2017/11/27 | $198,500
Paul Byrd | Chief Financial Officer (CFO) | New York | 64 | 2018/06/09 | $725,000
Gloria Little | Systems Administrator | New York | 59 | 2016/04/10 | $237,500
Bradley Greer | Software Engineer | London | 41 | 2017/10/13 | $132,000
Dai Rios | Personnel Lead | Edinburgh | 35 | 2017/09/26 | $217,500
Jenette Caldwell | Development Lead | New York | 30 | 2015/09/03 | $345,000
Yuri Mantis | Chief Marketing Officer (CMO) | New York | 40 | 2016/06/25 | $675,000
Caesar Vance | Pre-Sales Support | New York | 21 | 2015/12/12 | $106,450
Doris Wilder | Sales Assistant | Sidney | 23 | 2018/09/20 | $85,600
Angelica Ramos | Chief Executive Officer (CEO) | London | 47 | 2016/10/09 | $1,200,000
Gavin Joyce | Developer | Edinburgh | 42 | 2018/12/22 | $92,575
Jennifer Chang | Regional Director | Singapore | 28 | 2018/11/14 | $357,650
Brenden Wagner | Software Engineer | San Francisco | 28 | 2015/06/07 | $206,850
Fiona Green | Chief Operating Officer (COO) | San Francisco | 48 | 2018/03/11 | $850,000
Shou Itou | Regional Marketing | Tokyo | 20 | 2015/08/14 | $163,000
Name | Position | Office | Age | Start date | Salary

##### Settings

- ###### Theme Mode

  Choose light or dark mode or Auto

- ###### Sidebar Theme

  Choose Sidebar Theme

- ###### Accent color

  Choose your primary theme color

- ###### Sidebar Caption

  Sidebar Caption Hide/Show

- ###### Theme Layout

  LTR/RTL

- ###### Layout Width

  Choose Full or Container Layout