Installation
DataTables.net can be installed via NPM or included from a CDN. For NPM, add
datatables.net to your package.json. During the Theme Installation process, the build tools copy the vendor script into /dist/assets/vendors/datatables-net. Alternatively, use the CDN links shown in Require Assets.
NPM:
npm install datatables.net
CDN: https://cdn.datatables.net/2.0.8/js/dataTables.min.js (and optional default CSS if not using Metronic overrides).
Require Assets
To use DataTables.net in your pages, include the DataTables script and ensure the Metronic component styles are loaded. The toolkit's
datatables-net.css (via styles.css) overrides default DataTables styling so tables match the Metronic Tailwind design.
<!DOCTYPE html>
<html>
<head>
<!-- Core styles (includes datatables-net component styling) -->
<link href="/dist/assets/css/styles.css" rel="stylesheet"/>
</head>
<body>
<table class="display" id="example">
</table>
<!-- Core bundle script -->
<script src="/dist/assets/js/core.bundle.js">
</script>
<!-- jQuery (required by DataTables.net npm build) -->
<script src="/dist/assets/vendors/jquery/jquery.min.js">
</script>
<!-- DataTables.net -->
<script src="/dist/assets/vendors/datatables-net/dataTables.min.js">
</script>
<!-- Your page script -->
<script src="/dist/assets/js/pages/plugins/datatables-net/basic.js">
</script>
</body>
</html>
Customization
Metronic integrates DataTables.net via CSS only. No custom JavaScript wrapper is required—use the official DataTables.net API (
new DataTable(table, options)) directly. The file src/css/components/datatables-net.css is included in the component bundle and overrides the table wrapper, header, body, pagination, search input, and controls using @layer components, Metronic CSS variables (e.g. --border, --background, --radius-md), and Tailwind @apply. Dark mode is supported through the same variables so tables follow the active theme.
Basic
A basic DataTables.net table with static data. Initialize with
new DataTable(table, options); no wrapper required. The table uses the Metronic-styled component from datatables-net.css.
| Name | Position | Office | Age | Start date |
|---|---|---|---|---|
| Tiger Nixon | System Architect | Edinburgh | 61 | 2011/04/25 |
| Garrett Winters | Accountant | Tokyo | 63 | 2011/07/25 |
| Ashton Cox | Junior Technical Author | San Francisco | 66 | 2009/01/12 |
| Cedric Kelly | Senior Javascript Developer | Edinburgh | 22 | 2012/03/29 |
| Airi Satou | Accountant | Tokyo | 33 | 2008/11/28 |
| Brielle Williamson | Integration Specialist | New York | 61 | 2012/12/02 |
| Herrod Chandler | Sales Assistant | San Francisco | 59 | 2012/08/06 |
| Rhona Davidson | Integration Specialist | Tokyo | 55 | 2010/10/14 |
| Colleen Hurst | Javascript Developer | San Francisco | 39 | 2009/09/15 |
| Sonya Frost | Software Engineer | Edinburgh | 23 | 2008/12/13 |
| Jena Gaines | Office Manager | London | 30 | 2008/12/19 |
| Quinn Flynn | Support Lead | Edinburgh | 22 | 2013/03/03 |
| Charde Marshall | Regional Director | San Francisco | 36 | 2008/10/16 |
| Haley Kennedy | Senior Marketing Designer | London | 43 | 2012/12/18 |
| Tatyana Fitzpatrick | Regional Director | London | 19 | 2010/03/17 |
| Michael Silva | Marketing Designer | London | 66 | 2012/11/27 |
| Paul Byrd | Chief Financial Officer | New York | 64 | 2010/06/09 |
| Gloria Little | Systems Administrator | New York | 59 | 2009/04/10 |
| Bradley Greer | Software Engineer | London | 41 | 2012/10/13 |
| Dai Rios | Personnel Lead | Edinburgh | 35 | 2012/09/26 |
| Jenette Caldwell | Development Lead | New York | 30 | 2011/09/03 |
| Yuri Berry | Chief Marketing Officer | New York | 40 | 2009/06/25 |
| Caesar Vance | Pre-Sales Support | New York | 21 | 2011/12/12 |
| Doris Wilder | Sales Assistant | Sydney | 23 | 2010/09/20 |
| Angelica Ramos | Chief Executive Officer | London | 47 | 2009/10/09 |
| Gavin Joyce | Developer | Edinburgh | 42 | 2010/12/22 |
document.addEventListener('DOMContentLoaded', function() {
var table = document.getElementById('example-basic');
if (table && typeof window.$ !== 'undefined' && !$.fn.DataTable.isDataTable(table)) {
$(table).DataTable({
language: { search: '', searchPlaceholder: 'Search' },
layout: { topStart: [], topEnd: 'search', bottomStart: ['pageLength', 'info'], bottomEnd: 'paging' }
});
}
});
<table class="display" id="example-basic" style="width:100%">
<thead>
<tr>
<th>
Name
</th>
<th>
Position
</th>
<th>
Office
</th>
<th>
Age
</th>
<th>
Start date
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Tiger Nixon
</td>
<td>
System Architect
</td>
<td>
Edinburgh
</td>
<td>
61
</td>
<td>
2011/04/25
</td>
</tr>
<tr>
<td>
Garrett Winters
</td>
<td>
Accountant
</td>
<td>
Tokyo
</td>
<td>
63
</td>
<td>
2011/07/25
</td>
</tr>
<tr>
<td>
Ashton Cox
</td>
<td>
Junior Technical Author
</td>
<td>
San Francisco
</td>
<td>
66
</td>
<td>
2009/01/12
</td>
</tr>
<tr>
<td>
Cedric Kelly
</td>
<td>
Senior Javascript Developer
</td>
<td>
Edinburgh
</td>
<td>
22
</td>
<td>
2012/03/29
</td>
</tr>
<tr>
<td>
Airi Satou
</td>
<td>
Accountant
</td>
<td>
Tokyo
</td>
<td>
33
</td>
<td>
2008/11/28
</td>
</tr>
<tr>
<td>
Brielle Williamson
</td>
<td>
Integration Specialist
</td>
<td>
New York
</td>
<td>
61
</td>
<td>
2012/12/02
</td>
</tr>
<tr>
<td>
Herrod Chandler
</td>
<td>
Sales Assistant
</td>
<td>
San Francisco
</td>
<td>
59
</td>
<td>
2012/08/06
</td>
</tr>
<tr>
<td>
Rhona Davidson
</td>
<td>
Integration Specialist
</td>
<td>
Tokyo
</td>
<td>
55
</td>
<td>
2010/10/14
</td>
</tr>
<tr>
<td>
Colleen Hurst
</td>
<td>
Javascript Developer
</td>
<td>
San Francisco
</td>
<td>
39
</td>
<td>
2009/09/15
</td>
</tr>
<tr>
<td>
Sonya Frost
</td>
<td>
Software Engineer
</td>
<td>
Edinburgh
</td>
<td>
23
</td>
<td>
2008/12/13
</td>
</tr>
<tr>
<td>
Jena Gaines
</td>
<td>
Office Manager
</td>
<td>
London
</td>
<td>
30
</td>
<td>
2008/12/19
</td>
</tr>
<tr>
<td>
Quinn Flynn
</td>
<td>
Support Lead
</td>
<td>
Edinburgh
</td>
<td>
22
</td>
<td>
2013/03/03
</td>
</tr>
<tr>
<td>
Charde Marshall
</td>
<td>
Regional Director
</td>
<td>
San Francisco
</td>
<td>
36
</td>
<td>
2008/10/16
</td>
</tr>
<tr>
<td>
Haley Kennedy
</td>
<td>
Senior Marketing Designer
</td>
<td>
London
</td>
<td>
43
</td>
<td>
2012/12/18
</td>
</tr>
<tr>
<td>
Tatyana Fitzpatrick
</td>
<td>
Regional Director
</td>
<td>
London
</td>
<td>
19
</td>
<td>
2010/03/17
</td>
</tr>
<tr>
<td>
Michael Silva
</td>
<td>
Marketing Designer
</td>
<td>
London
</td>
<td>
66
</td>
<td>
2012/11/27
</td>
</tr>
<tr>
<td>
Paul Byrd
</td>
<td>
Chief Financial Officer
</td>
<td>
New York
</td>
<td>
64
</td>
<td>
2010/06/09
</td>
</tr>
<tr>
<td>
Gloria Little
</td>
<td>
Systems Administrator
</td>
<td>
New York
</td>
<td>
59
</td>
<td>
2009/04/10
</td>
</tr>
<tr>
<td>
Bradley Greer
</td>
<td>
Software Engineer
</td>
<td>
London
</td>
<td>
41
</td>
<td>
2012/10/13
</td>
</tr>
<tr>
<td>
Dai Rios
</td>
<td>
Personnel Lead
</td>
<td>
Edinburgh
</td>
<td>
35
</td>
<td>
2012/09/26
</td>
</tr>
<tr>
<td>
Jenette Caldwell
</td>
<td>
Development Lead
</td>
<td>
New York
</td>
<td>
30
</td>
<td>
2011/09/03
</td>
</tr>
<tr>
<td>
Yuri Berry
</td>
<td>
Chief Marketing Officer
</td>
<td>
New York
</td>
<td>
40
</td>
<td>
2009/06/25
</td>
</tr>
<tr>
<td>
Caesar Vance
</td>
<td>
Pre-Sales Support
</td>
<td>
New York
</td>
<td>
21
</td>
<td>
2011/12/12
</td>
</tr>
<tr>
<td>
Doris Wilder
</td>
<td>
Sales Assistant
</td>
<td>
Sydney
</td>
<td>
23
</td>
<td>
2010/09/20
</td>
</tr>
<tr>
<td>
Angelica Ramos
</td>
<td>
Chief Executive Officer
</td>
<td>
London
</td>
<td>
47
</td>
<td>
2009/10/09
</td>
</tr>
<tr>
<td>
Gavin Joyce
</td>
<td>
Developer
</td>
<td>
Edinburgh
</td>
<td>
42
</td>
<td>
2010/12/22
</td>
</tr>
</tbody>
</table>
Pagination
DataTables.net pagination is enabled by default. Use
pageLength and lengthMenu to control rows per page and the length selector.
| Name | Position | Office | Age |
|---|---|---|---|
| Tiger Nixon | System Architect | Edinburgh | 61 |
| Garrett Winters | Accountant | Tokyo | 63 |
| Ashton Cox | Junior Technical Author | San Francisco | 66 |
| Cedric Kelly | Senior Javascript Developer | Edinburgh | 22 |
| Airi Satou | Accountant | Tokyo | 33 |
| Brielle Williamson | Integration Specialist | New York | 61 |
| Herrod Chandler | Sales Assistant | San Francisco | 59 |
| Rhona Davidson | Integration Specialist | Tokyo | 55 |
| Colleen Hurst | Javascript Developer | San Francisco | 39 |
| Sonya Frost | Software Engineer | Edinburgh | 23 |
| Jena Gaines | Office Manager | London | 30 |
| Quinn Flynn | Support Lead | Edinburgh | 22 |
| Charde Marshall | Regional Director | San Francisco | 36 |
| Haley Kennedy | Senior Marketing Designer | London | 43 |
| Tatyana Fitzpatrick | Regional Director | London | 19 |
| Michael Silva | Marketing Designer | London | 66 |
| Paul Byrd | Chief Financial Officer | New York | 64 |
| Gloria Little | Systems Administrator | New York | 59 |
| Bradley Greer | Software Engineer | London | 41 |
| Dai Rios | Personnel Lead | Edinburgh | 35 |
| Jenette Caldwell | Development Lead | New York | 30 |
| Yuri Berry | Chief Marketing Officer | New York | 40 |
| Caesar Vance | Pre-Sales Support | New York | 21 |
| Doris Wilder | Sales Assistant | Sydney | 23 |
| Angelica Ramos | Chief Executive Officer | London | 47 |
| Gavin Joyce | Developer | Edinburgh | 42 |
document.addEventListener('DOMContentLoaded', function() {
var table = document.getElementById('example-pagination');
if (table && typeof window.$ !== 'undefined' && !$.fn.DataTable.isDataTable(table)) {
$(table).DataTable({
pageLength: 5,
lengthMenu: [[5, 10, 25], [5, 10, 25]],
language: { search: '', searchPlaceholder: 'Search' },
layout: { topStart: [], topEnd: 'search', bottomStart: ['pageLength', 'info'], bottomEnd: 'paging' }
});
}
});
<table class="display" id="example-pagination" style="width:100%">
<thead>
<tr>
<th>
Name
</th>
<th>
Position
</th>
<th>
Office
</th>
<th>
Age
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Tiger Nixon
</td>
<td>
System Architect
</td>
<td>
Edinburgh
</td>
<td>
61
</td>
</tr>
<tr>
<td>
Garrett Winters
</td>
<td>
Accountant
</td>
<td>
Tokyo
</td>
<td>
63
</td>
</tr>
<tr>
<td>
Ashton Cox
</td>
<td>
Junior Technical Author
</td>
<td>
San Francisco
</td>
<td>
66
</td>
</tr>
<tr>
<td>
Cedric Kelly
</td>
<td>
Senior Javascript Developer
</td>
<td>
Edinburgh
</td>
<td>
22
</td>
</tr>
<tr>
<td>
Airi Satou
</td>
<td>
Accountant
</td>
<td>
Tokyo
</td>
<td>
33
</td>
</tr>
<tr>
<td>
Brielle Williamson
</td>
<td>
Integration Specialist
</td>
<td>
New York
</td>
<td>
61
</td>
</tr>
<tr>
<td>
Herrod Chandler
</td>
<td>
Sales Assistant
</td>
<td>
San Francisco
</td>
<td>
59
</td>
</tr>
<tr>
<td>
Rhona Davidson
</td>
<td>
Integration Specialist
</td>
<td>
Tokyo
</td>
<td>
55
</td>
</tr>
<tr>
<td>
Colleen Hurst
</td>
<td>
Javascript Developer
</td>
<td>
San Francisco
</td>
<td>
39
</td>
</tr>
<tr>
<td>
Sonya Frost
</td>
<td>
Software Engineer
</td>
<td>
Edinburgh
</td>
<td>
23
</td>
</tr>
<tr>
<td>
Jena Gaines
</td>
<td>
Office Manager
</td>
<td>
London
</td>
<td>
30
</td>
</tr>
<tr>
<td>
Quinn Flynn
</td>
<td>
Support Lead
</td>
<td>
Edinburgh
</td>
<td>
22
</td>
</tr>
<tr>
<td>
Charde Marshall
</td>
<td>
Regional Director
</td>
<td>
San Francisco
</td>
<td>
36
</td>
</tr>
<tr>
<td>
Haley Kennedy
</td>
<td>
Senior Marketing Designer
</td>
<td>
London
</td>
<td>
43
</td>
</tr>
<tr>
<td>
Tatyana Fitzpatrick
</td>
<td>
Regional Director
</td>
<td>
London
</td>
<td>
19
</td>
</tr>
<tr>
<td>
Michael Silva
</td>
<td>
Marketing Designer
</td>
<td>
London
</td>
<td>
66
</td>
</tr>
<tr>
<td>
Paul Byrd
</td>
<td>
Chief Financial Officer
</td>
<td>
New York
</td>
<td>
64
</td>
</tr>
<tr>
<td>
Gloria Little
</td>
<td>
Systems Administrator
</td>
<td>
New York
</td>
<td>
59
</td>
</tr>
<tr>
<td>
Bradley Greer
</td>
<td>
Software Engineer
</td>
<td>
London
</td>
<td>
41
</td>
</tr>
<tr>
<td>
Dai Rios
</td>
<td>
Personnel Lead
</td>
<td>
Edinburgh
</td>
<td>
35
</td>
</tr>
<tr>
<td>
Jenette Caldwell
</td>
<td>
Development Lead
</td>
<td>
New York
</td>
<td>
30
</td>
</tr>
<tr>
<td>
Yuri Berry
</td>
<td>
Chief Marketing Officer
</td>
<td>
New York
</td>
<td>
40
</td>
</tr>
<tr>
<td>
Caesar Vance
</td>
<td>
Pre-Sales Support
</td>
<td>
New York
</td>
<td>
21
</td>
</tr>
<tr>
<td>
Doris Wilder
</td>
<td>
Sales Assistant
</td>
<td>
Sydney
</td>
<td>
23
</td>
</tr>
<tr>
<td>
Angelica Ramos
</td>
<td>
Chief Executive Officer
</td>
<td>
London
</td>
<td>
47
</td>
</tr>
<tr>
<td>
Gavin Joyce
</td>
<td>
Developer
</td>
<td>
Edinburgh
</td>
<td>
42
</td>
</tr>
</tbody>
</table>
Search / Filter
The search box filters table rows as you type. Use
search options to set initial value or disable the search input.
| Name | Position | Office | Age |
|---|---|---|---|
| Tiger Nixon | System Architect | Edinburgh | 61 |
| Garrett Winters | Accountant | Tokyo | 63 |
| Ashton Cox | Junior Technical Author | San Francisco | 66 |
| Cedric Kelly | Senior Javascript Developer | Edinburgh | 22 |
| Airi Satou | Accountant | Tokyo | 33 |
| Brielle Williamson | Integration Specialist | New York | 61 |
| Herrod Chandler | Sales Assistant | San Francisco | 59 |
| Rhona Davidson | Integration Specialist | Tokyo | 55 |
| Colleen Hurst | Javascript Developer | San Francisco | 39 |
| Sonya Frost | Software Engineer | Edinburgh | 23 |
| Jena Gaines | Office Manager | London | 30 |
| Quinn Flynn | Support Lead | Edinburgh | 22 |
| Charde Marshall | Regional Director | San Francisco | 36 |
| Haley Kennedy | Senior Marketing Designer | London | 43 |
| Tatyana Fitzpatrick | Regional Director | London | 19 |
| Michael Silva | Marketing Designer | London | 66 |
| Paul Byrd | Chief Financial Officer | New York | 64 |
| Gloria Little | Systems Administrator | New York | 59 |
| Bradley Greer | Software Engineer | London | 41 |
| Dai Rios | Personnel Lead | Edinburgh | 35 |
| Jenette Caldwell | Development Lead | New York | 30 |
| Yuri Berry | Chief Marketing Officer | New York | 40 |
| Caesar Vance | Pre-Sales Support | New York | 21 |
| Doris Wilder | Sales Assistant | Sydney | 23 |
| Angelica Ramos | Chief Executive Officer | London | 47 |
| Gavin Joyce | Developer | Edinburgh | 42 |
document.addEventListener('DOMContentLoaded', function() {
var table = document.getElementById('example-search');
if (table && typeof window.$ !== 'undefined' && !$.fn.DataTable.isDataTable(table)) {
$(table).DataTable({
searching: true,
language: { search: '', searchPlaceholder: 'Search' },
layout: { topStart: [], topEnd: 'search', bottomStart: ['pageLength', 'info'], bottomEnd: 'paging' }
});
}
});
<table class="display" id="example-search" style="width:100%">
<thead>
<tr>
<th>
Name
</th>
<th>
Position
</th>
<th>
Office
</th>
<th>
Age
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Tiger Nixon
</td>
<td>
System Architect
</td>
<td>
Edinburgh
</td>
<td>
61
</td>
</tr>
<tr>
<td>
Garrett Winters
</td>
<td>
Accountant
</td>
<td>
Tokyo
</td>
<td>
63
</td>
</tr>
<tr>
<td>
Ashton Cox
</td>
<td>
Junior Technical Author
</td>
<td>
San Francisco
</td>
<td>
66
</td>
</tr>
<tr>
<td>
Cedric Kelly
</td>
<td>
Senior Javascript Developer
</td>
<td>
Edinburgh
</td>
<td>
22
</td>
</tr>
<tr>
<td>
Airi Satou
</td>
<td>
Accountant
</td>
<td>
Tokyo
</td>
<td>
33
</td>
</tr>
<tr>
<td>
Brielle Williamson
</td>
<td>
Integration Specialist
</td>
<td>
New York
</td>
<td>
61
</td>
</tr>
<tr>
<td>
Herrod Chandler
</td>
<td>
Sales Assistant
</td>
<td>
San Francisco
</td>
<td>
59
</td>
</tr>
<tr>
<td>
Rhona Davidson
</td>
<td>
Integration Specialist
</td>
<td>
Tokyo
</td>
<td>
55
</td>
</tr>
<tr>
<td>
Colleen Hurst
</td>
<td>
Javascript Developer
</td>
<td>
San Francisco
</td>
<td>
39
</td>
</tr>
<tr>
<td>
Sonya Frost
</td>
<td>
Software Engineer
</td>
<td>
Edinburgh
</td>
<td>
23
</td>
</tr>
<tr>
<td>
Jena Gaines
</td>
<td>
Office Manager
</td>
<td>
London
</td>
<td>
30
</td>
</tr>
<tr>
<td>
Quinn Flynn
</td>
<td>
Support Lead
</td>
<td>
Edinburgh
</td>
<td>
22
</td>
</tr>
<tr>
<td>
Charde Marshall
</td>
<td>
Regional Director
</td>
<td>
San Francisco
</td>
<td>
36
</td>
</tr>
<tr>
<td>
Haley Kennedy
</td>
<td>
Senior Marketing Designer
</td>
<td>
London
</td>
<td>
43
</td>
</tr>
<tr>
<td>
Tatyana Fitzpatrick
</td>
<td>
Regional Director
</td>
<td>
London
</td>
<td>
19
</td>
</tr>
<tr>
<td>
Michael Silva
</td>
<td>
Marketing Designer
</td>
<td>
London
</td>
<td>
66
</td>
</tr>
<tr>
<td>
Paul Byrd
</td>
<td>
Chief Financial Officer
</td>
<td>
New York
</td>
<td>
64
</td>
</tr>
<tr>
<td>
Gloria Little
</td>
<td>
Systems Administrator
</td>
<td>
New York
</td>
<td>
59
</td>
</tr>
<tr>
<td>
Bradley Greer
</td>
<td>
Software Engineer
</td>
<td>
London
</td>
<td>
41
</td>
</tr>
<tr>
<td>
Dai Rios
</td>
<td>
Personnel Lead
</td>
<td>
Edinburgh
</td>
<td>
35
</td>
</tr>
<tr>
<td>
Jenette Caldwell
</td>
<td>
Development Lead
</td>
<td>
New York
</td>
<td>
30
</td>
</tr>
<tr>
<td>
Yuri Berry
</td>
<td>
Chief Marketing Officer
</td>
<td>
New York
</td>
<td>
40
</td>
</tr>
<tr>
<td>
Caesar Vance
</td>
<td>
Pre-Sales Support
</td>
<td>
New York
</td>
<td>
21
</td>
</tr>
<tr>
<td>
Doris Wilder
</td>
<td>
Sales Assistant
</td>
<td>
Sydney
</td>
<td>
23
</td>
</tr>
<tr>
<td>
Angelica Ramos
</td>
<td>
Chief Executive Officer
</td>
<td>
London
</td>
<td>
47
</td>
</tr>
<tr>
<td>
Gavin Joyce
</td>
<td>
Developer
</td>
<td>
Edinburgh
</td>
<td>
42
</td>
</tr>
</tbody>
</table>
Sorting
Click column headers to sort. Use
order for initial sort and columns.orderable to disable sorting on specific columns.
| Name | Position | Office | Age | Start date |
|---|---|---|---|---|
| Tiger Nixon | System Architect | Edinburgh | 61 | 2011/04/25 |
| Garrett Winters | Accountant | Tokyo | 63 | 2011/07/25 |
| Ashton Cox | Junior Technical Author | San Francisco | 66 | 2009/01/12 |
| Cedric Kelly | Senior Javascript Developer | Edinburgh | 22 | 2012/03/29 |
| Airi Satou | Accountant | Tokyo | 33 | 2008/11/28 |
| Brielle Williamson | Integration Specialist | New York | 61 | 2012/12/02 |
| Herrod Chandler | Sales Assistant | San Francisco | 59 | 2012/08/06 |
| Rhona Davidson | Integration Specialist | Tokyo | 55 | 2010/10/14 |
| Colleen Hurst | Javascript Developer | San Francisco | 39 | 2009/09/15 |
| Sonya Frost | Software Engineer | Edinburgh | 23 | 2008/12/13 |
| Jena Gaines | Office Manager | London | 30 | 2008/12/19 |
| Quinn Flynn | Support Lead | Edinburgh | 22 | 2013/03/03 |
| Charde Marshall | Regional Director | San Francisco | 36 | 2008/10/16 |
| Haley Kennedy | Senior Marketing Designer | London | 43 | 2012/12/18 |
| Tatyana Fitzpatrick | Regional Director | London | 19 | 2010/03/17 |
| Michael Silva | Marketing Designer | London | 66 | 2012/11/27 |
| Paul Byrd | Chief Financial Officer | New York | 64 | 2010/06/09 |
| Gloria Little | Systems Administrator | New York | 59 | 2009/04/10 |
| Bradley Greer | Software Engineer | London | 41 | 2012/10/13 |
| Dai Rios | Personnel Lead | Edinburgh | 35 | 2012/09/26 |
| Jenette Caldwell | Development Lead | New York | 30 | 2011/09/03 |
| Yuri Berry | Chief Marketing Officer | New York | 40 | 2009/06/25 |
| Caesar Vance | Pre-Sales Support | New York | 21 | 2011/12/12 |
| Doris Wilder | Sales Assistant | Sydney | 23 | 2010/09/20 |
| Angelica Ramos | Chief Executive Officer | London | 47 | 2009/10/09 |
| Gavin Joyce | Developer | Edinburgh | 42 | 2010/12/22 |
document.addEventListener('DOMContentLoaded', function() {
var table = document.getElementById('example-sorting');
if (table && typeof window.$ !== 'undefined' && !$.fn.DataTable.isDataTable(table)) {
$(table).DataTable({
order: [[2, 'asc'], [3, 'desc']],
columnDefs: [
{ orderable: true, targets: [0, 1, 2, 3, 4] }
],
language: { search: '', searchPlaceholder: 'Search' },
layout: { topStart: [], topEnd: 'search', bottomStart: ['pageLength', 'info'], bottomEnd: 'paging' }
});
}
});
<table class="display" id="example-sorting" style="width:100%">
<thead>
<tr>
<th>
Name
</th>
<th>
Position
</th>
<th>
Office
</th>
<th>
Age
</th>
<th>
Start date
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Tiger Nixon
</td>
<td>
System Architect
</td>
<td>
Edinburgh
</td>
<td>
61
</td>
<td>
2011/04/25
</td>
</tr>
<tr>
<td>
Garrett Winters
</td>
<td>
Accountant
</td>
<td>
Tokyo
</td>
<td>
63
</td>
<td>
2011/07/25
</td>
</tr>
<tr>
<td>
Ashton Cox
</td>
<td>
Junior Technical Author
</td>
<td>
San Francisco
</td>
<td>
66
</td>
<td>
2009/01/12
</td>
</tr>
<tr>
<td>
Cedric Kelly
</td>
<td>
Senior Javascript Developer
</td>
<td>
Edinburgh
</td>
<td>
22
</td>
<td>
2012/03/29
</td>
</tr>
<tr>
<td>
Airi Satou
</td>
<td>
Accountant
</td>
<td>
Tokyo
</td>
<td>
33
</td>
<td>
2008/11/28
</td>
</tr>
<tr>
<td>
Brielle Williamson
</td>
<td>
Integration Specialist
</td>
<td>
New York
</td>
<td>
61
</td>
<td>
2012/12/02
</td>
</tr>
<tr>
<td>
Herrod Chandler
</td>
<td>
Sales Assistant
</td>
<td>
San Francisco
</td>
<td>
59
</td>
<td>
2012/08/06
</td>
</tr>
<tr>
<td>
Rhona Davidson
</td>
<td>
Integration Specialist
</td>
<td>
Tokyo
</td>
<td>
55
</td>
<td>
2010/10/14
</td>
</tr>
<tr>
<td>
Colleen Hurst
</td>
<td>
Javascript Developer
</td>
<td>
San Francisco
</td>
<td>
39
</td>
<td>
2009/09/15
</td>
</tr>
<tr>
<td>
Sonya Frost
</td>
<td>
Software Engineer
</td>
<td>
Edinburgh
</td>
<td>
23
</td>
<td>
2008/12/13
</td>
</tr>
<tr>
<td>
Jena Gaines
</td>
<td>
Office Manager
</td>
<td>
London
</td>
<td>
30
</td>
<td>
2008/12/19
</td>
</tr>
<tr>
<td>
Quinn Flynn
</td>
<td>
Support Lead
</td>
<td>
Edinburgh
</td>
<td>
22
</td>
<td>
2013/03/03
</td>
</tr>
<tr>
<td>
Charde Marshall
</td>
<td>
Regional Director
</td>
<td>
San Francisco
</td>
<td>
36
</td>
<td>
2008/10/16
</td>
</tr>
<tr>
<td>
Haley Kennedy
</td>
<td>
Senior Marketing Designer
</td>
<td>
London
</td>
<td>
43
</td>
<td>
2012/12/18
</td>
</tr>
<tr>
<td>
Tatyana Fitzpatrick
</td>
<td>
Regional Director
</td>
<td>
London
</td>
<td>
19
</td>
<td>
2010/03/17
</td>
</tr>
<tr>
<td>
Michael Silva
</td>
<td>
Marketing Designer
</td>
<td>
London
</td>
<td>
66
</td>
<td>
2012/11/27
</td>
</tr>
<tr>
<td>
Paul Byrd
</td>
<td>
Chief Financial Officer
</td>
<td>
New York
</td>
<td>
64
</td>
<td>
2010/06/09
</td>
</tr>
<tr>
<td>
Gloria Little
</td>
<td>
Systems Administrator
</td>
<td>
New York
</td>
<td>
59
</td>
<td>
2009/04/10
</td>
</tr>
<tr>
<td>
Bradley Greer
</td>
<td>
Software Engineer
</td>
<td>
London
</td>
<td>
41
</td>
<td>
2012/10/13
</td>
</tr>
<tr>
<td>
Dai Rios
</td>
<td>
Personnel Lead
</td>
<td>
Edinburgh
</td>
<td>
35
</td>
<td>
2012/09/26
</td>
</tr>
<tr>
<td>
Jenette Caldwell
</td>
<td>
Development Lead
</td>
<td>
New York
</td>
<td>
30
</td>
<td>
2011/09/03
</td>
</tr>
<tr>
<td>
Yuri Berry
</td>
<td>
Chief Marketing Officer
</td>
<td>
New York
</td>
<td>
40
</td>
<td>
2009/06/25
</td>
</tr>
<tr>
<td>
Caesar Vance
</td>
<td>
Pre-Sales Support
</td>
<td>
New York
</td>
<td>
21
</td>
<td>
2011/12/12
</td>
</tr>
<tr>
<td>
Doris Wilder
</td>
<td>
Sales Assistant
</td>
<td>
Sydney
</td>
<td>
23
</td>
<td>
2010/09/20
</td>
</tr>
<tr>
<td>
Angelica Ramos
</td>
<td>
Chief Executive Officer
</td>
<td>
London
</td>
<td>
47
</td>
<td>
2009/10/09
</td>
</tr>
<tr>
<td>
Gavin Joyce
</td>
<td>
Developer
</td>
<td>
Edinburgh
</td>
<td>
42
</td>
<td>
2010/12/22
</td>
</tr>
</tbody>
</table>
Empty table
Demonstrates zero-row state with custom
language.emptyTable copy and normal controls.
| Name | Position | Office | Age |
|---|
document.addEventListener('DOMContentLoaded', function() {
var table = document.getElementById('example-empty-table');
if (table && typeof window.$ !== 'undefined' && !$.fn.DataTable.isDataTable(table)) {
$(table).DataTable({
language: {
search: '',
searchPlaceholder: 'Search',
emptyTable: 'No employees available yet.'
},
layout: { topStart: [], topEnd: 'search', bottomStart: ['pageLength', 'info'], bottomEnd: 'paging' }
});
}
});
<table class="display" id="example-empty-table" style="width:100%">
<thead>
<tr>
<th>
Name
</th>
<th>
Position
</th>
<th>
Office
</th>
<th>
Age
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
Column visibility
Use external checkboxes to show or hide columns with
column().visible().
| Name | Position | Office | Age |
|---|---|---|---|
| Tiger Nixon | System Architect | Edinburgh | 61 |
| Garrett Winters | Accountant | Tokyo | 63 |
| Ashton Cox | Junior Technical Author | San Francisco | 66 |
| Cedric Kelly | Senior Javascript Developer | Edinburgh | 22 |
| Airi Satou | Accountant | Tokyo | 33 |
| Brielle Williamson | Integration Specialist | New York | 61 |
| Herrod Chandler | Sales Assistant | San Francisco | 59 |
| Rhona Davidson | Integration Specialist | Tokyo | 55 |
| Colleen Hurst | Javascript Developer | San Francisco | 39 |
| Sonya Frost | Software Engineer | Edinburgh | 23 |
document.addEventListener('DOMContentLoaded', function() {
var table = document.getElementById('example-column-visibility');
if (table && typeof window.$ !== 'undefined' && !$.fn.DataTable.isDataTable(table)) {
var dt = $(table).DataTable({
autoWidth: true,
language: { search: '', searchPlaceholder: 'Search' },
layout: { topStart: [], topEnd: 'search', bottomStart: ['pageLength', 'info'], bottomEnd: 'paging' }
});
var controls = document.querySelectorAll('#example-column-visibility-controls input[type="checkbox"]');
controls.forEach(function(control) {
control.addEventListener('change', function() {
dt.column(Number(control.getAttribute('data-column'))).visible(control.checked);
});
});
}
});
<div class="mb-4 flex flex-wrap items-center gap-3" id="example-column-visibility-controls">
<label class="inline-flex items-center gap-2 text-sm">
<input checked="" data-column="0" type="checkbox"/>
Name
</label>
<label class="inline-flex items-center gap-2 text-sm">
<input checked="" data-column="1" type="checkbox"/>
Position
</label>
<label class="inline-flex items-center gap-2 text-sm">
<input checked="" data-column="2" type="checkbox"/>
Office
</label>
<label class="inline-flex items-center gap-2 text-sm">
<input checked="" data-column="3" type="checkbox"/>
Age
</label>
</div>
<table class="display" id="example-column-visibility" style="width:100%">
<thead>
<tr>
<th>
Name
</th>
<th>
Position
</th>
<th>
Office
</th>
<th>
Age
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Tiger Nixon
</td>
<td>
System Architect
</td>
<td>
Edinburgh
</td>
<td>
61
</td>
</tr>
<tr>
<td>
Garrett Winters
</td>
<td>
Accountant
</td>
<td>
Tokyo
</td>
<td>
63
</td>
</tr>
<tr>
<td>
Ashton Cox
</td>
<td>
Junior Technical Author
</td>
<td>
San Francisco
</td>
<td>
66
</td>
</tr>
<tr>
<td>
Cedric Kelly
</td>
<td>
Senior Javascript Developer
</td>
<td>
Edinburgh
</td>
<td>
22
</td>
</tr>
<tr>
<td>
Airi Satou
</td>
<td>
Accountant
</td>
<td>
Tokyo
</td>
<td>
33
</td>
</tr>
<tr>
<td>
Brielle Williamson
</td>
<td>
Integration Specialist
</td>
<td>
New York
</td>
<td>
61
</td>
</tr>
<tr>
<td>
Herrod Chandler
</td>
<td>
Sales Assistant
</td>
<td>
San Francisco
</td>
<td>
59
</td>
</tr>
<tr>
<td>
Rhona Davidson
</td>
<td>
Integration Specialist
</td>
<td>
Tokyo
</td>
<td>
55
</td>
</tr>
<tr>
<td>
Colleen Hurst
</td>
<td>
Javascript Developer
</td>
<td>
San Francisco
</td>
<td>
39
</td>
</tr>
<tr>
<td>
Sonya Frost
</td>
<td>
Software Engineer
</td>
<td>
Edinburgh
</td>
<td>
23
</td>
</tr>
</tbody>
</table>
Multi-column order
Initial ordering uses multiple columns; users can still change sort directly from headers.
| Name | Position | Office | Age |
|---|---|---|---|
| Tiger Nixon | System Architect | Edinburgh | 61 |
| Garrett Winters | Accountant | Tokyo | 63 |
| Ashton Cox | Junior Technical Author | San Francisco | 66 |
| Cedric Kelly | Senior Javascript Developer | Edinburgh | 22 |
| Airi Satou | Accountant | Tokyo | 33 |
| Brielle Williamson | Integration Specialist | New York | 61 |
| Herrod Chandler | Sales Assistant | San Francisco | 59 |
| Rhona Davidson | Integration Specialist | Tokyo | 55 |
| Colleen Hurst | Javascript Developer | San Francisco | 39 |
| Sonya Frost | Software Engineer | Edinburgh | 23 |
document.addEventListener('DOMContentLoaded', function() {
var table = document.getElementById('example-multi-order');
if (table && typeof window.$ !== 'undefined' && !$.fn.DataTable.isDataTable(table)) {
$(table).DataTable({
order: [[2, 'asc'], [3, 'asc']],
language: { search: '', searchPlaceholder: 'Search' },
layout: { topStart: [], topEnd: 'search', bottomStart: ['pageLength', 'info'], bottomEnd: 'paging' }
});
}
});
<table class="display" id="example-multi-order" style="width:100%">
<thead>
<tr>
<th>
Name
</th>
<th>
Position
</th>
<th>
Office
</th>
<th>
Age
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Tiger Nixon
</td>
<td>
System Architect
</td>
<td>
Edinburgh
</td>
<td>
61
</td>
</tr>
<tr>
<td>
Garrett Winters
</td>
<td>
Accountant
</td>
<td>
Tokyo
</td>
<td>
63
</td>
</tr>
<tr>
<td>
Ashton Cox
</td>
<td>
Junior Technical Author
</td>
<td>
San Francisco
</td>
<td>
66
</td>
</tr>
<tr>
<td>
Cedric Kelly
</td>
<td>
Senior Javascript Developer
</td>
<td>
Edinburgh
</td>
<td>
22
</td>
</tr>
<tr>
<td>
Airi Satou
</td>
<td>
Accountant
</td>
<td>
Tokyo
</td>
<td>
33
</td>
</tr>
<tr>
<td>
Brielle Williamson
</td>
<td>
Integration Specialist
</td>
<td>
New York
</td>
<td>
61
</td>
</tr>
<tr>
<td>
Herrod Chandler
</td>
<td>
Sales Assistant
</td>
<td>
San Francisco
</td>
<td>
59
</td>
</tr>
<tr>
<td>
Rhona Davidson
</td>
<td>
Integration Specialist
</td>
<td>
Tokyo
</td>
<td>
55
</td>
</tr>
<tr>
<td>
Colleen Hurst
</td>
<td>
Javascript Developer
</td>
<td>
San Francisco
</td>
<td>
39
</td>
</tr>
<tr>
<td>
Sonya Frost
</td>
<td>
Software Engineer
</td>
<td>
Edinburgh
</td>
<td>
23
</td>
</tr>
</tbody>
</table>
Footer aggregate
Calculates numeric totals with
footerCallback for the current page.
Row index
Adds a page-relative index column that updates on paging and sorting.
| # | Name | Position | Office |
|---|---|---|---|
| Tiger Nixon | System Architect | Edinburgh | 61 |
| Garrett Winters | Accountant | Tokyo | 63 |
| Ashton Cox | Junior Technical Author | San Francisco | 66 |
| Cedric Kelly | Senior Javascript Developer | Edinburgh | 22 |
| Airi Satou | Accountant | Tokyo | 33 |
| Brielle Williamson | Integration Specialist | New York | 61 |
| Herrod Chandler | Sales Assistant | San Francisco | 59 |
| Rhona Davidson | Integration Specialist | Tokyo | 55 |
| Colleen Hurst | Javascript Developer | San Francisco | 39 |
| Sonya Frost | Software Engineer | Edinburgh | 23 |
document.addEventListener('DOMContentLoaded', function() {
var table = document.getElementById('example-row-index');
if (table && typeof window.$ !== 'undefined' && !$.fn.DataTable.isDataTable(table)) {
var dt = $(table).DataTable({
pageLength: 5,
columnDefs: [{ targets: 0, orderable: false, searchable: false }],
order: [[1, 'asc']],
language: { search: '', searchPlaceholder: 'Search' },
layout: { topStart: [], topEnd: 'search', bottomStart: ['pageLength', 'info'], bottomEnd: 'paging' }
});
dt.on('draw.dt', function() {
var info = dt.page.info();
dt.column(0, { page: 'current' }).nodes().each(function(cell, i) {
cell.innerHTML = info.start + i + 1;
});
});
dt.draw();
}
});
<table class="display" id="example-row-index" style="width:100%">
<thead>
<tr>
<th>
#
</th>
<th>
Name
</th>
<th>
Position
</th>
<th>
Office
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Tiger Nixon
</td>
<td>
System Architect
</td>
<td>
Edinburgh
</td>
<td>
61
</td>
</tr>
<tr>
<td>
Garrett Winters
</td>
<td>
Accountant
</td>
<td>
Tokyo
</td>
<td>
63
</td>
</tr>
<tr>
<td>
Ashton Cox
</td>
<td>
Junior Technical Author
</td>
<td>
San Francisco
</td>
<td>
66
</td>
</tr>
<tr>
<td>
Cedric Kelly
</td>
<td>
Senior Javascript Developer
</td>
<td>
Edinburgh
</td>
<td>
22
</td>
</tr>
<tr>
<td>
Airi Satou
</td>
<td>
Accountant
</td>
<td>
Tokyo
</td>
<td>
33
</td>
</tr>
<tr>
<td>
Brielle Williamson
</td>
<td>
Integration Specialist
</td>
<td>
New York
</td>
<td>
61
</td>
</tr>
<tr>
<td>
Herrod Chandler
</td>
<td>
Sales Assistant
</td>
<td>
San Francisco
</td>
<td>
59
</td>
</tr>
<tr>
<td>
Rhona Davidson
</td>
<td>
Integration Specialist
</td>
<td>
Tokyo
</td>
<td>
55
</td>
</tr>
<tr>
<td>
Colleen Hurst
</td>
<td>
Javascript Developer
</td>
<td>
San Francisco
</td>
<td>
39
</td>
</tr>
<tr>
<td>
Sonya Frost
</td>
<td>
Software Engineer
</td>
<td>
Edinburgh
</td>
<td>
23
</td>
</tr>
</tbody>
</table>
Internationalisation (French)
Shows non-English DataTables UI strings and locale formatting for currency and dates.
| Employe | Ville | Salaire | Date |
|---|---|---|---|
| Tiger Nixon | Edinburgh | 320800 | 2011-04-25 |
| Garrett Winters | Tokyo | 170750 | 2011-07-25 |
| Ashton Cox | San Francisco | 86000 | 2009-01-12 |
| Cedric Kelly | Edinburgh | 433060 | 2012-03-29 |
document.addEventListener('DOMContentLoaded', function() {
var table = document.getElementById('example-i18n');
if (table && typeof window.$ !== 'undefined' && !$.fn.DataTable.isDataTable(table)) {
$(table).DataTable({
columnDefs: [
{ targets: 2, render: function(data, type) {
var value = Number(data);
if (type === 'display') return value.toLocaleString('fr-FR', { style: 'currency', currency: 'EUR' });
return value;
}},
{ targets: 3, render: function(data, type) {
if (type === 'display') return new Date(data).toLocaleDateString('fr-FR');
return data;
}}
],
language: {
search: '', searchPlaceholder: 'Rechercher', lengthMenu: 'Afficher _MENU_ lignes',
info: 'Affichage de _START_ a _END_ sur _TOTAL_ entrees',
paginate: { first: 'Premier', last: 'Dernier', next: 'Suivant', previous: 'Precedent' },
emptyTable: 'Aucune donnee disponible'
},
layout: { topStart: [], topEnd: 'search', bottomStart: ['pageLength', 'info'], bottomEnd: 'paging' }
});
}
});
<table class="display" id="example-i18n" style="width:100%">
<thead>
<tr>
<th>
Employe
</th>
<th>
Ville
</th>
<th>
Salaire
</th>
<th>
Date
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Tiger Nixon
</td>
<td>
Edinburgh
</td>
<td>
320800
</td>
<td>
2011-04-25
</td>
</tr>
<tr>
<td>
Garrett Winters
</td>
<td>
Tokyo
</td>
<td>
170750
</td>
<td>
2011-07-25
</td>
</tr>
<tr>
<td>
Ashton Cox
</td>
<td>
San Francisco
</td>
<td>
86000
</td>
<td>
2009-01-12
</td>
</tr>
<tr>
<td>
Cedric Kelly
</td>
<td>
Edinburgh
</td>
<td>
433060
</td>
<td>
2012-03-29
</td>
</tr>
</tbody>
</table>
Fixed header
DataTables.net table with a fixed (sticky) header that stays visible when scrolling. Uses the official
datatables.net-fixedheader plugin and the fixedHeader: { header: true } option. The table uses the Metronic-styled component from datatables-net.css.
| Name | Position | Office | Age | Start date |
|---|---|---|---|---|
| Tiger Nixon | System Architect | Edinburgh | 61 | 2011/04/25 |
| Garrett Winters | Accountant | Tokyo | 63 | 2011/07/25 |
| Ashton Cox | Junior Technical Author | San Francisco | 66 | 2009/01/12 |
| Cedric Kelly | Senior Javascript Developer | Edinburgh | 22 | 2012/03/29 |
| Airi Satou | Accountant | Tokyo | 33 | 2008/11/28 |
| Brielle Williamson | Integration Specialist | New York | 61 | 2012/12/02 |
| Herrod Chandler | Sales Assistant | San Francisco | 59 | 2012/08/06 |
| Rhona Davidson | Integration Specialist | Tokyo | 55 | 2010/10/14 |
| Colleen Hurst | Javascript Developer | San Francisco | 39 | 2009/09/15 |
| Sonya Frost | Software Engineer | Edinburgh | 23 | 2008/12/13 |
| Jena Gaines | Office Manager | London | 30 | 2008/12/19 |
| Quinn Flynn | Support Lead | Edinburgh | 22 | 2013/03/03 |
| Charde Marshall | Regional Director | San Francisco | 36 | 2008/10/16 |
| Haley Kennedy | Senior Marketing Designer | London | 43 | 2012/12/18 |
| Tatyana Fitzpatrick | Regional Director | London | 19 | 2010/03/17 |
| Michael Silva | Marketing Designer | London | 66 | 2012/11/27 |
| Paul Byrd | Chief Financial Officer | New York | 64 | 2010/06/09 |
| Gloria Little | Systems Administrator | New York | 59 | 2009/04/10 |
| Bradley Greer | Software Engineer | London | 41 | 2012/10/13 |
| Dai Rios | Personnel Lead | Edinburgh | 35 | 2012/09/26 |
| Jenette Caldwell | Development Lead | New York | 30 | 2011/09/03 |
| Yuri Berry | Chief Marketing Officer | New York | 40 | 2009/06/25 |
| Caesar Vance | Pre-Sales Support | New York | 21 | 2011/12/12 |
| Doris Wilder | Sales Assistant | Sydney | 23 | 2010/09/20 |
| Angelica Ramos | Chief Executive Officer | London | 47 | 2009/10/09 |
| Gavin Joyce | Developer | Edinburgh | 42 | 2010/12/22 |
document.addEventListener('DOMContentLoaded', function() {
var table = document.getElementById('example-fixed-header');
if (table && typeof window.$ !== 'undefined' && !$.fn.DataTable.isDataTable(table)) {
$(table).DataTable({
fixedHeader: { header: true, headerOffset: 80 },
language: { search: '', searchPlaceholder: 'Search' },
layout: { topStart: [], topEnd: 'search', bottomStart: ['pageLength', 'info'], bottomEnd: 'paging' }
});
}
});
<table class="display" id="example-fixed-header" style="width:100%">
<thead>
<tr>
<th>
Name
</th>
<th>
Position
</th>
<th>
Office
</th>
<th>
Age
</th>
<th>
Start date
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Tiger Nixon
</td>
<td>
System Architect
</td>
<td>
Edinburgh
</td>
<td>
61
</td>
<td>
2011/04/25
</td>
</tr>
<tr>
<td>
Garrett Winters
</td>
<td>
Accountant
</td>
<td>
Tokyo
</td>
<td>
63
</td>
<td>
2011/07/25
</td>
</tr>
<tr>
<td>
Ashton Cox
</td>
<td>
Junior Technical Author
</td>
<td>
San Francisco
</td>
<td>
66
</td>
<td>
2009/01/12
</td>
</tr>
<tr>
<td>
Cedric Kelly
</td>
<td>
Senior Javascript Developer
</td>
<td>
Edinburgh
</td>
<td>
22
</td>
<td>
2012/03/29
</td>
</tr>
<tr>
<td>
Airi Satou
</td>
<td>
Accountant
</td>
<td>
Tokyo
</td>
<td>
33
</td>
<td>
2008/11/28
</td>
</tr>
<tr>
<td>
Brielle Williamson
</td>
<td>
Integration Specialist
</td>
<td>
New York
</td>
<td>
61
</td>
<td>
2012/12/02
</td>
</tr>
<tr>
<td>
Herrod Chandler
</td>
<td>
Sales Assistant
</td>
<td>
San Francisco
</td>
<td>
59
</td>
<td>
2012/08/06
</td>
</tr>
<tr>
<td>
Rhona Davidson
</td>
<td>
Integration Specialist
</td>
<td>
Tokyo
</td>
<td>
55
</td>
<td>
2010/10/14
</td>
</tr>
<tr>
<td>
Colleen Hurst
</td>
<td>
Javascript Developer
</td>
<td>
San Francisco
</td>
<td>
39
</td>
<td>
2009/09/15
</td>
</tr>
<tr>
<td>
Sonya Frost
</td>
<td>
Software Engineer
</td>
<td>
Edinburgh
</td>
<td>
23
</td>
<td>
2008/12/13
</td>
</tr>
<tr>
<td>
Jena Gaines
</td>
<td>
Office Manager
</td>
<td>
London
</td>
<td>
30
</td>
<td>
2008/12/19
</td>
</tr>
<tr>
<td>
Quinn Flynn
</td>
<td>
Support Lead
</td>
<td>
Edinburgh
</td>
<td>
22
</td>
<td>
2013/03/03
</td>
</tr>
<tr>
<td>
Charde Marshall
</td>
<td>
Regional Director
</td>
<td>
San Francisco
</td>
<td>
36
</td>
<td>
2008/10/16
</td>
</tr>
<tr>
<td>
Haley Kennedy
</td>
<td>
Senior Marketing Designer
</td>
<td>
London
</td>
<td>
43
</td>
<td>
2012/12/18
</td>
</tr>
<tr>
<td>
Tatyana Fitzpatrick
</td>
<td>
Regional Director
</td>
<td>
London
</td>
<td>
19
</td>
<td>
2010/03/17
</td>
</tr>
<tr>
<td>
Michael Silva
</td>
<td>
Marketing Designer
</td>
<td>
London
</td>
<td>
66
</td>
<td>
2012/11/27
</td>
</tr>
<tr>
<td>
Paul Byrd
</td>
<td>
Chief Financial Officer
</td>
<td>
New York
</td>
<td>
64
</td>
<td>
2010/06/09
</td>
</tr>
<tr>
<td>
Gloria Little
</td>
<td>
Systems Administrator
</td>
<td>
New York
</td>
<td>
59
</td>
<td>
2009/04/10
</td>
</tr>
<tr>
<td>
Bradley Greer
</td>
<td>
Software Engineer
</td>
<td>
London
</td>
<td>
41
</td>
<td>
2012/10/13
</td>
</tr>
<tr>
<td>
Dai Rios
</td>
<td>
Personnel Lead
</td>
<td>
Edinburgh
</td>
<td>
35
</td>
<td>
2012/09/26
</td>
</tr>
<tr>
<td>
Jenette Caldwell
</td>
<td>
Development Lead
</td>
<td>
New York
</td>
<td>
30
</td>
<td>
2011/09/03
</td>
</tr>
<tr>
<td>
Yuri Berry
</td>
<td>
Chief Marketing Officer
</td>
<td>
New York
</td>
<td>
40
</td>
<td>
2009/06/25
</td>
</tr>
<tr>
<td>
Caesar Vance
</td>
<td>
Pre-Sales Support
</td>
<td>
New York
</td>
<td>
21
</td>
<td>
2011/12/12
</td>
</tr>
<tr>
<td>
Doris Wilder
</td>
<td>
Sales Assistant
</td>
<td>
Sydney
</td>
<td>
23
</td>
<td>
2010/09/20
</td>
</tr>
<tr>
<td>
Angelica Ramos
</td>
<td>
Chief Executive Officer
</td>
<td>
London
</td>
<td>
47
</td>
<td>
2009/10/09
</td>
</tr>
<tr>
<td>
Gavin Joyce
</td>
<td>
Developer
</td>
<td>
Edinburgh
</td>
<td>
42
</td>
<td>
2010/12/22
</td>
</tr>
</tbody>
</table>
Server-Side Processing
Use
serverSide: true and ajax to let the server handle paging, sorting, and search. The preview uses a mock endpoint; replace the URL with your API and ensure the response format matches DataTables server-side format.
| Name | Position | Office | Age |
|---|
document.addEventListener('DOMContentLoaded', function() {
var table = document.getElementById('example-server-side');
if (table && typeof window.$ !== 'undefined' && !$.fn.DataTable.isDataTable(table)) {
var mockData = [
{ name: 'Tiger Nixon', position: 'System Architect', office: 'Edinburgh', age: 61 },
{ name: 'Garrett Winters', position: 'Accountant', office: 'Tokyo', age: 63 },
{ name: 'Ashton Cox', position: 'Junior Technical Author', office: 'San Francisco', age: 66 },
{ name: 'Cedric Kelly', position: 'Senior Javascript Developer', office: 'Edinburgh', age: 22 },
{ name: 'Airi Satou', position: 'Accountant', office: 'Tokyo', age: 33 },
{ name: 'Brielle Williamson', position: 'Integration Specialist', office: 'New York', age: 61 },
{ name: 'Herrod Chandler', position: 'Sales Assistant', office: 'San Francisco', age: 59 },
{ name: 'Rhona Davidson', position: 'Integration Specialist', office: 'Tokyo', age: 55 },
{ name: 'Colleen Hurst', position: 'Javascript Developer', office: 'San Francisco', age: 39 },
{ name: 'Sonya Frost', position: 'Software Engineer', office: 'Edinburgh', age: 23 },
{ name: 'Jena Gaines', position: 'Office Manager', office: 'London', age: 30 },
{ name: 'Quinn Flynn', position: 'Support Lead', office: 'Edinburgh', age: 22 },
{ name: 'Charde Marshall', position: 'Regional Director', office: 'San Francisco', age: 36 },
{ name: 'Haley Kennedy', position: 'Senior Marketing Designer', office: 'London', age: 43 },
{ name: 'Tatyana Fitzpatrick', position: 'Regional Director', office: 'London', age: 19 },
{ name: 'Michael Silva', position: 'Marketing Designer', office: 'London', age: 66 },
{ name: 'Paul Byrd', position: 'Chief Financial Officer', office: 'New York', age: 64 },
{ name: 'Gloria Little', position: 'Systems Administrator', office: 'New York', age: 59 },
{ name: 'Bradley Greer', position: 'Software Engineer', office: 'London', age: 41 },
{ name: 'Dai Rios', position: 'Personnel Lead', office: 'Edinburgh', age: 35 },
{ name: 'Jenette Caldwell', position: 'Development Lead', office: 'New York', age: 30 },
{ name: 'Yuri Berry', position: 'Chief Marketing Officer', office: 'New York', age: 40 },
{ name: 'Caesar Vance', position: 'Pre-Sales Support', office: 'New York', age: 21 },
{ name: 'Doris Wilder', position: 'Sales Assistant', office: 'Sydney', age: 23 },
{ name: 'Angelica Ramos', position: 'Chief Executive Officer', office: 'London', age: 47 },
{ name: 'Gavin Joyce', position: 'Developer', office: 'Edinburgh', age: 42 }
];
$(table).DataTable({
serverSide: true,
processing: true,
language: { search: '', searchPlaceholder: 'Search' },
layout: { topStart: [], topEnd: 'search', bottomStart: ['pageLength', 'info'], bottomEnd: 'paging' },
ajax: function(data, callback) {
try {
var start = data.start;
var length = data.length;
var search = data.search.value.toLowerCase();
var filtered = search
? mockData.filter(function(row) {
return [row.name, row.position, row.office, String(row.age)].some(function(v) {
return String(v).toLowerCase().indexOf(search) >= 0;
});
})
: mockData.slice();
var total = filtered.length;
var order = data.order && data.order[0] ? data.order[0] : { column: 0, dir: 'asc' };
var orderCol = order.column;
var orderDir = order.dir;
var colKeys = ['name', 'position', 'office', 'age'];
var key = colKeys[orderCol];
filtered.sort(function(a, b) {
var va = a[key];
var vb = b[key];
if (key === 'age') {
va = Number(va);
vb = Number(vb);
if (orderDir === 'asc') return va - vb;
return vb - va;
}
if (orderDir === 'asc') return va < vb ? -1 : va > vb ? 1 : 0;
return vb < va ? -1 : vb > va ? 1 : 0;
});
var page = filtered.slice(start, start + length);
callback({
draw: data.draw,
recordsTotal: mockData.length,
recordsFiltered: total,
data: page
});
} catch (err) {
if (typeof console !== 'undefined' && console.error) {
console.error('[DataTables server-side demo]', err);
}
callback({
draw: data.draw,
recordsTotal: 0,
recordsFiltered: 0,
data: []
});
}
},
columns: [
{ data: 'name' },
{ data: 'position' },
{ data: 'office' },
{ data: 'age' }
]
});
}
});
<table class="display" id="example-server-side" style="width:100%">
<thead>
<tr>
<th>
Name
</th>
<th>
Position
</th>
<th>
Office
</th>
<th>
Age
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
Scrollable table body (tbody)
DataTables.net table with a fixed-height, vertically scrollable body. Use the
scrollY option so the table body scrolls within a set height while the header stays visible. The table uses the Metronic-styled component from datatables-net.css.
| Name | Position | Office | Age | Start date |
|---|---|---|---|---|
| Tiger Nixon | System Architect | Edinburgh | 61 | 2011/04/25 |
| Garrett Winters | Accountant | Tokyo | 63 | 2011/07/25 |
| Ashton Cox | Junior Technical Author | San Francisco | 66 | 2009/01/12 |
| Cedric Kelly | Senior Javascript Developer | Edinburgh | 22 | 2012/03/29 |
| Airi Satou | Accountant | Tokyo | 33 | 2008/11/28 |
| Brielle Williamson | Integration Specialist | New York | 61 | 2012/12/02 |
| Herrod Chandler | Sales Assistant | San Francisco | 59 | 2012/08/06 |
| Rhona Davidson | Integration Specialist | Tokyo | 55 | 2010/10/14 |
| Colleen Hurst | Javascript Developer | San Francisco | 39 | 2009/09/15 |
| Sonya Frost | Software Engineer | Edinburgh | 23 | 2008/12/13 |
| Jena Gaines | Office Manager | London | 30 | 2008/12/19 |
| Quinn Flynn | Support Lead | Edinburgh | 22 | 2013/03/03 |
| Charde Marshall | Regional Director | San Francisco | 36 | 2008/10/16 |
| Haley Kennedy | Senior Marketing Designer | London | 43 | 2012/12/18 |
| Tatyana Fitzpatrick | Regional Director | London | 19 | 2010/03/17 |
| Michael Silva | Marketing Designer | London | 66 | 2012/11/27 |
| Paul Byrd | Chief Financial Officer | New York | 64 | 2010/06/09 |
| Gloria Little | Systems Administrator | New York | 59 | 2009/04/10 |
| Bradley Greer | Software Engineer | London | 41 | 2012/10/13 |
| Dai Rios | Personnel Lead | Edinburgh | 35 | 2012/09/26 |
| Jenette Caldwell | Development Lead | New York | 30 | 2011/09/03 |
| Yuri Berry | Chief Marketing Officer | New York | 40 | 2009/06/25 |
| Caesar Vance | Pre-Sales Support | New York | 21 | 2011/12/12 |
| Doris Wilder | Sales Assistant | Sydney | 23 | 2010/09/20 |
| Angelica Ramos | Chief Executive Officer | London | 47 | 2009/10/09 |
| Gavin Joyce | Developer | Edinburgh | 42 | 2010/12/22 |
document.addEventListener('DOMContentLoaded', function() {
var table = document.getElementById('example-scrollable-tbody');
if (table && typeof window.$ !== 'undefined' && !$.fn.DataTable.isDataTable(table)) {
$(table).DataTable({
scrollY: '300px',
language: { search: '', searchPlaceholder: 'Search' },
layout: { topStart: [], topEnd: 'search', bottomStart: ['pageLength', 'info'], bottomEnd: 'paging' }
});
}
});
<table class="display" id="example-scrollable-tbody" style="width:100%">
<thead>
<tr>
<th>
Name
</th>
<th>
Position
</th>
<th>
Office
</th>
<th>
Age
</th>
<th>
Start date
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Tiger Nixon
</td>
<td>
System Architect
</td>
<td>
Edinburgh
</td>
<td>
61
</td>
<td>
2011/04/25
</td>
</tr>
<tr>
<td>
Garrett Winters
</td>
<td>
Accountant
</td>
<td>
Tokyo
</td>
<td>
63
</td>
<td>
2011/07/25
</td>
</tr>
<tr>
<td>
Ashton Cox
</td>
<td>
Junior Technical Author
</td>
<td>
San Francisco
</td>
<td>
66
</td>
<td>
2009/01/12
</td>
</tr>
<tr>
<td>
Cedric Kelly
</td>
<td>
Senior Javascript Developer
</td>
<td>
Edinburgh
</td>
<td>
22
</td>
<td>
2012/03/29
</td>
</tr>
<tr>
<td>
Airi Satou
</td>
<td>
Accountant
</td>
<td>
Tokyo
</td>
<td>
33
</td>
<td>
2008/11/28
</td>
</tr>
<tr>
<td>
Brielle Williamson
</td>
<td>
Integration Specialist
</td>
<td>
New York
</td>
<td>
61
</td>
<td>
2012/12/02
</td>
</tr>
<tr>
<td>
Herrod Chandler
</td>
<td>
Sales Assistant
</td>
<td>
San Francisco
</td>
<td>
59
</td>
<td>
2012/08/06
</td>
</tr>
<tr>
<td>
Rhona Davidson
</td>
<td>
Integration Specialist
</td>
<td>
Tokyo
</td>
<td>
55
</td>
<td>
2010/10/14
</td>
</tr>
<tr>
<td>
Colleen Hurst
</td>
<td>
Javascript Developer
</td>
<td>
San Francisco
</td>
<td>
39
</td>
<td>
2009/09/15
</td>
</tr>
<tr>
<td>
Sonya Frost
</td>
<td>
Software Engineer
</td>
<td>
Edinburgh
</td>
<td>
23
</td>
<td>
2008/12/13
</td>
</tr>
<tr>
<td>
Jena Gaines
</td>
<td>
Office Manager
</td>
<td>
London
</td>
<td>
30
</td>
<td>
2008/12/19
</td>
</tr>
<tr>
<td>
Quinn Flynn
</td>
<td>
Support Lead
</td>
<td>
Edinburgh
</td>
<td>
22
</td>
<td>
2013/03/03
</td>
</tr>
<tr>
<td>
Charde Marshall
</td>
<td>
Regional Director
</td>
<td>
San Francisco
</td>
<td>
36
</td>
<td>
2008/10/16
</td>
</tr>
<tr>
<td>
Haley Kennedy
</td>
<td>
Senior Marketing Designer
</td>
<td>
London
</td>
<td>
43
</td>
<td>
2012/12/18
</td>
</tr>
<tr>
<td>
Tatyana Fitzpatrick
</td>
<td>
Regional Director
</td>
<td>
London
</td>
<td>
19
</td>
<td>
2010/03/17
</td>
</tr>
<tr>
<td>
Michael Silva
</td>
<td>
Marketing Designer
</td>
<td>
London
</td>
<td>
66
</td>
<td>
2012/11/27
</td>
</tr>
<tr>
<td>
Paul Byrd
</td>
<td>
Chief Financial Officer
</td>
<td>
New York
</td>
<td>
64
</td>
<td>
2010/06/09
</td>
</tr>
<tr>
<td>
Gloria Little
</td>
<td>
Systems Administrator
</td>
<td>
New York
</td>
<td>
59
</td>
<td>
2009/04/10
</td>
</tr>
<tr>
<td>
Bradley Greer
</td>
<td>
Software Engineer
</td>
<td>
London
</td>
<td>
41
</td>
<td>
2012/10/13
</td>
</tr>
<tr>
<td>
Dai Rios
</td>
<td>
Personnel Lead
</td>
<td>
Edinburgh
</td>
<td>
35
</td>
<td>
2012/09/26
</td>
</tr>
<tr>
<td>
Jenette Caldwell
</td>
<td>
Development Lead
</td>
<td>
New York
</td>
<td>
30
</td>
<td>
2011/09/03
</td>
</tr>
<tr>
<td>
Yuri Berry
</td>
<td>
Chief Marketing Officer
</td>
<td>
New York
</td>
<td>
40
</td>
<td>
2009/06/25
</td>
</tr>
<tr>
<td>
Caesar Vance
</td>
<td>
Pre-Sales Support
</td>
<td>
New York
</td>
<td>
21
</td>
<td>
2011/12/12
</td>
</tr>
<tr>
<td>
Doris Wilder
</td>
<td>
Sales Assistant
</td>
<td>
Sydney
</td>
<td>
23
</td>
<td>
2010/09/20
</td>
</tr>
<tr>
<td>
Angelica Ramos
</td>
<td>
Chief Executive Officer
</td>
<td>
London
</td>
<td>
47
</td>
<td>
2009/10/09
</td>
</tr>
<tr>
<td>
Gavin Joyce
</td>
<td>
Developer
</td>
<td>
Edinburgh
</td>
<td>
42
</td>
<td>
2010/12/22
</td>
</tr>
</tbody>
</table>
Column filter
Each column title has a filter icon; clicking it opens a dropdown with the filter control (Name: select, Office: text, Age: min/max). A single DataTables.net custom search predicate reads those controls and the table redraws on change. Uses jQuery and DataTables.net only.
|
Name
|
Position
|
Office
|
Age
|
|---|---|---|---|
| Tiger Nixon | System Architect | Edinburgh | 61 |
| Garrett Winters | Accountant | Tokyo | 63 |
| Ashton Cox | Junior Technical Author | San Francisco | 66 |
| Cedric Kelly | Senior Javascript Developer | Edinburgh | 22 |
| Airi Satou | Accountant | Tokyo | 33 |
| Brielle Williamson | Integration Specialist | New York | 61 |
| Herrod Chandler | Sales Assistant | San Francisco | 59 |
| Rhona Davidson | Integration Specialist | Tokyo | 55 |
| Colleen Hurst | Javascript Developer | San Francisco | 39 |
| Sonya Frost | Software Engineer | Edinburgh | 23 |
| Jena Gaines | Office Manager | London | 30 |
| Quinn Flynn | Support Lead | Edinburgh | 22 |
| Charde Marshall | Regional Director | San Francisco | 36 |
| Haley Kennedy | Senior Marketing Designer | London | 43 |
| Tatyana Fitzpatrick | Regional Director | London | 19 |
| Michael Silva | Marketing Designer | London | 66 |
| Paul Byrd | Chief Financial Officer | New York | 64 |
| Gloria Little | Systems Administrator | New York | 59 |
| Bradley Greer | Software Engineer | London | 41 |
| Dai Rios | Personnel Lead | Edinburgh | 35 |
| Jenette Caldwell | Development Lead | New York | 30 |
| Yuri Berry | Chief Marketing Officer | New York | 40 |
| Caesar Vance | Pre-Sales Support | New York | 21 |
| Doris Wilder | Sales Assistant | Sydney | 23 |
| Angelica Ramos | Chief Executive Officer | London | 47 |
| Gavin Joyce | Developer | Edinburgh | 42 |
/**
* DataTables.net column filter – dropdown filters per column.
* Data (config) is separate from logic so you can reuse with minimal customization.
*
* Usage:
* DataTablesColumnFilter.setup({ tableSelector: '#my-table', filters: [ ... ] });
*
* Config: tableSelector, dataTableOptions (optional), filters (array of):
* { key, columnIndex, type: 'exact'|'contains'|'range', inputSelectors: ['#id1'[, '#id2']], match?: fn(cellValue, filterValue) }
*
* HTML: .column-filter-toggle with data-column="
<key>
", .column-filter-dropdown with data-dropdown="
<key>
".
*/
(function(global) {
'use strict';
var TOGGLE_CLASS = 'column-filter-toggle';
var DROPDOWN_CLASS = 'column-filter-dropdown';
// --- Filter type handlers (how to read value and match row) ---
var filterTypes = {
exact: {
getValue: function(tableEl, inputSelectors) {
var el = tableEl.querySelector(inputSelectors[0]);
return el ? (el.value || '').trim() : '';
},
match: function(cellValue, filterValue) {
if (!filterValue) return true;
return String(cellValue).trim() === filterValue;
}
},
contains: {
getValue: function(tableEl, inputSelectors) {
var el = tableEl.querySelector(inputSelectors[0]);
return el ? (el.value || '').trim() : '';
},
match: function(cellValue, filterValue) {
if (!filterValue) return true;
return String(cellValue).toLowerCase().indexOf(filterValue.toLowerCase()) !== -1;
}
},
range: {
getValue: function(tableEl, inputSelectors) {
var minEl = tableEl.querySelector(inputSelectors[0]);
var maxEl = tableEl.querySelector(inputSelectors[1]);
var min = minEl && minEl.value !== '' ? parseInt(minEl.value, 10) : null;
var max = maxEl && maxEl.value !== '' ? parseInt(maxEl.value, 10) : null;
return { min: min, max: max };
},
match: function(cellValue, filterValue) {
var num = parseInt(cellValue, 10);
if (isNaN(num)) num = null;
if (filterValue.min != null && (num === null || num < filterValue.min)) return false;
if (filterValue.max != null && (num === null || num > filterValue.max)) return false;
return true;
}
}
};
function getFilterValue(filter, tableEl) {
var type = filterTypes[filter.type];
if (!type) return null;
return type.getValue(tableEl, filter.inputSelectors);
}
function rowMatchesFilter(filter, cellValue, filterValue) {
var type = filterTypes[filter.type];
if (!type) return true;
if (filter.match) return filter.match(cellValue, filterValue);
return type.match(cellValue, filterValue);
}
// --- Dropdown UI (logic only) ---
function closeAllDropdowns(root) {
var el = root || document;
el.querySelectorAll('.' + DROPDOWN_CLASS).forEach(function(d) { d.style.display = 'none'; });
}
function bindDropdownStopPropagation(tableEl) {
tableEl.querySelectorAll('.' + DROPDOWN_CLASS).forEach(function(dropdown) {
dropdown.addEventListener('click', function(e) { e.stopPropagation(); }, false);
dropdown.addEventListener('mousedown', function(e) { e.stopPropagation(); }, false);
});
}
function bindDropdownToggle(tableEl, tableId) {
document.addEventListener('click', function(e) {
var btn = e.target.closest && e.target.closest('.' + TOGGLE_CLASS);
if (btn) {
var table = btn.closest('table');
if (table && table.id === tableId) {
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
var col = btn.getAttribute('data-column');
var dropdown = table.querySelector('.' + DROPDOWN_CLASS + '[data-dropdown="' + col + '"]');
var isOpen = dropdown && dropdown.style.display !== 'none';
closeAllDropdowns(table);
if (dropdown && !isOpen) dropdown.style.display = '';
}
return;
}
if (!e.target.closest('.' + DROPDOWN_CLASS)) closeAllDropdowns(document);
}, true);
}
// --- DataTables integration ---
function setupColumnFilter(config) {
var tableSelector = config.tableSelector;
var tableEl = typeof tableSelector === 'string'
? document.querySelector(tableSelector)
: (tableSelector && tableSelector.nodeType ? tableSelector : null);
if (!tableEl || typeof global.$ === 'undefined' || !global.$.fn.DataTable || global.$.fn.DataTable.isDataTable(tableEl))
return null;
var tableId = tableEl.id || 'dt-column-filter-' + Math.random().toString(36).slice(2, 9);
if (!tableEl.id) tableEl.id = tableId;
var dataTableOptions = Object.assign({
searching: true,
language: { search: '', searchPlaceholder: 'Search' },
layout: { topStart: [], topEnd: 'search', bottomStart: ['pageLength', 'info'], bottomEnd: 'paging' }
}, config.dataTableOptions || {});
var table = global.$(tableEl).DataTable(dataTableOptions);
var filters = config.filters || [];
// Single custom search predicate that runs all filters
global.$.fn.dataTable.ext.search.push(function(settings, data, dataIndex) {
if (settings.nTable.id !== tableId) return true;
for (var i = 0; i < filters.length; i++) {
var f = filters[i];
var colIndex = f.columnIndex;
var cellValue = data[colIndex] != null ? data[colIndex] : '';
var filterValue = getFilterValue(f, tableEl);
if (!rowMatchesFilter(f, cellValue, filterValue)) return false;
}
return true;
});
table.draw();
// UI: dropdown toggle + stop propagation at dropdown container so input/select receive events but th does not trigger sort
bindDropdownStopPropagation(tableEl);
bindDropdownToggle(tableEl, tableId);
// Redraw when any filter input changes
filters.forEach(function(f) {
(f.inputSelectors || []).forEach(function(sel) {
var el = tableEl.querySelector(sel);
if (el) {
el.addEventListener('change', function() { table.draw(); });
el.addEventListener('input', function() { table.draw(); });
}
});
});
return table;
}
// --- Public API ---
global.DataTablesColumnFilter = {
filterTypes: filterTypes,
setup: setupColumnFilter
};
// --- Example init (user replaces this config for their table) ---
var exampleConfig = {
tableSelector: '#example-column-filter',
dataTableOptions: {},
filters: [
{ key: 'name', columnIndex: 0, type: 'exact', inputSelectors: ['#filter-name'] },
{ key: 'position', columnIndex: 1, type: 'exact', inputSelectors: ['#filter-position'] },
{ key: 'office', columnIndex: 2, type: 'contains', inputSelectors: ['#filter-office'] },
{ key: 'age', columnIndex: 3, type: 'range', inputSelectors: ['#filter-age-min', '#filter-age-max'] }
]
};
document.addEventListener('DOMContentLoaded', function() {
setupColumnFilter(exampleConfig);
});
})(typeof window !== 'undefined' ? window : this);
</key>
</key>
<table class="display" id="example-column-filter" style="width:100%">
<thead>
<tr>
<th>
<div class="inline-flex min-h-0 items-center gap-1" style="position:relative">
<span>
Name
</span>
<button aria-label="Filter by name" class="kt-btn kt-btn-icon kt-btn-ghost column-filter-toggle h-7 w-7 min-h-7 min-w-7 shrink-0 p-0 [&_svg]:size-3.5" data-column="name" type="button">
<svg fill="none" height="14" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="14" xmlns="http://www.w3.org/2000/svg">
<polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3">
</polygon>
</svg>
</button>
<div class="column-filter-dropdown absolute top-full left-0 mt-1 z-10 min-w-[10rem] rounded-lg border border-border bg-background p-2 shadow-md" data-dropdown="name" style="display:none">
<select aria-label="Filter by name" class="kt-select w-full" data-kt-select="true" data-kt-select-config='{"optionsClass": "kt-scrollable overflow-auto max-h-[200px]"}' data-kt-select-placeholder="All" id="filter-name">
<option value="">
All
</option>
<option value="Tiger Nixon">
Tiger Nixon
</option>
<option value="Cedric Kelly">
Cedric Kelly
</option>
<option value="Airi Satou">
Airi Satou
</option>
<option value="Angelica Ramos">
Angelica Ramos
</option>
</select>
</div>
</div>
</th>
<th>
<div class="inline-flex min-h-0 items-center gap-1" style="position:relative">
<span>
Position
</span>
<button aria-label="Filter by position" class="kt-btn kt-btn-icon kt-btn-ghost column-filter-toggle h-7 w-7 min-h-7 min-w-7 shrink-0 p-0 [&_svg]:size-3.5" data-column="position" type="button">
<svg fill="none" height="14" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="14" xmlns="http://www.w3.org/2000/svg">
<polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3">
</polygon>
</svg>
</button>
<div class="column-filter-dropdown absolute top-full left-0 mt-1 z-10 min-w-[10rem] rounded-lg border border-border bg-background p-2 shadow-md" data-dropdown="position" style="display:none">
<select aria-label="Filter by position" class="kt-select w-full" data-kt-select="true" data-kt-select-config='{"optionsClass": "kt-scrollable overflow-auto max-h-[200px]"}' data-kt-select-placeholder="All" id="filter-position">
<option value="">
All
</option>
<option value="System Architect">
System Architect
</option>
<option value="Accountant">
Accountant
</option>
<option value="Junior Technical Author">
Junior Technical Author
</option>
<option value="Senior Javascript Developer">
Senior Javascript Developer
</option>
<option value="Integration Specialist">
Integration Specialist
</option>
<option value="Sales Assistant">
Sales Assistant
</option>
<option value="Software Engineer">
Software Engineer
</option>
<option value="Office Manager">
Office Manager
</option>
<option value="Support Lead">
Support Lead
</option>
<option value="Regional Director">
Regional Director
</option>
<option value="Chief Executive Officer">
Chief Executive Officer
</option>
<option value="Developer">
Developer
</option>
</select>
</div>
</div>
</th>
<th>
<div class="inline-flex min-h-0 items-center gap-1" style="position:relative">
<span>
Office
</span>
<button aria-label="Filter by office" class="kt-btn kt-btn-icon kt-btn-ghost column-filter-toggle h-7 w-7 min-h-7 min-w-7 shrink-0 p-0 [&_svg]:size-3.5" data-column="office" type="button">
<svg fill="none" height="14" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="14" xmlns="http://www.w3.org/2000/svg">
<polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3">
</polygon>
</svg>
</button>
<div class="column-filter-dropdown absolute top-full left-0 mt-1 z-10 min-w-[10rem] rounded-lg border border-border bg-background p-2 shadow-md" data-dropdown="office" style="display:none">
<input aria-label="Filter by office" class="form-control form-control-sm w-full min-w-0" id="filter-office" placeholder="Office" type="text"/>
</div>
</div>
</th>
<th>
<div class="inline-flex min-h-0 items-center gap-1" style="position:relative">
<span>
Age
</span>
<button aria-label="Filter by age" class="kt-btn kt-btn-icon kt-btn-ghost column-filter-toggle h-7 w-7 min-h-7 min-w-7 shrink-0 p-0 [&_svg]:size-3.5" data-column="age" type="button">
<svg fill="none" height="14" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="14" xmlns="http://www.w3.org/2000/svg">
<polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3">
</polygon>
</svg>
</button>
<div class="column-filter-dropdown absolute top-full left-0 mt-1 z-10 min-w-[10rem] rounded-lg border border-border bg-background p-2 shadow-md" data-dropdown="age" style="display:none">
<div class="flex gap-2 items-center w-full">
<input aria-label="Age min" class="form-control form-control-sm flex-1 min-w-0" id="filter-age-min" min="0" placeholder="Min" type="number"/>
<input aria-label="Age max" class="form-control form-control-sm flex-1 min-w-0" id="filter-age-max" min="0" placeholder="Max" type="number"/>
</div>
</div>
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Tiger Nixon
</td>
<td>
System Architect
</td>
<td>
Edinburgh
</td>
<td>
61
</td>
</tr>
<tr>
<td>
Garrett Winters
</td>
<td>
Accountant
</td>
<td>
Tokyo
</td>
<td>
63
</td>
</tr>
<tr>
<td>
Ashton Cox
</td>
<td>
Junior Technical Author
</td>
<td>
San Francisco
</td>
<td>
66
</td>
</tr>
<tr>
<td>
Cedric Kelly
</td>
<td>
Senior Javascript Developer
</td>
<td>
Edinburgh
</td>
<td>
22
</td>
</tr>
<tr>
<td>
Airi Satou
</td>
<td>
Accountant
</td>
<td>
Tokyo
</td>
<td>
33
</td>
</tr>
<tr>
<td>
Brielle Williamson
</td>
<td>
Integration Specialist
</td>
<td>
New York
</td>
<td>
61
</td>
</tr>
<tr>
<td>
Herrod Chandler
</td>
<td>
Sales Assistant
</td>
<td>
San Francisco
</td>
<td>
59
</td>
</tr>
<tr>
<td>
Rhona Davidson
</td>
<td>
Integration Specialist
</td>
<td>
Tokyo
</td>
<td>
55
</td>
</tr>
<tr>
<td>
Colleen Hurst
</td>
<td>
Javascript Developer
</td>
<td>
San Francisco
</td>
<td>
39
</td>
</tr>
<tr>
<td>
Sonya Frost
</td>
<td>
Software Engineer
</td>
<td>
Edinburgh
</td>
<td>
23
</td>
</tr>
<tr>
<td>
Jena Gaines
</td>
<td>
Office Manager
</td>
<td>
London
</td>
<td>
30
</td>
</tr>
<tr>
<td>
Quinn Flynn
</td>
<td>
Support Lead
</td>
<td>
Edinburgh
</td>
<td>
22
</td>
</tr>
<tr>
<td>
Charde Marshall
</td>
<td>
Regional Director
</td>
<td>
San Francisco
</td>
<td>
36
</td>
</tr>
<tr>
<td>
Haley Kennedy
</td>
<td>
Senior Marketing Designer
</td>
<td>
London
</td>
<td>
43
</td>
</tr>
<tr>
<td>
Tatyana Fitzpatrick
</td>
<td>
Regional Director
</td>
<td>
London
</td>
<td>
19
</td>
</tr>
<tr>
<td>
Michael Silva
</td>
<td>
Marketing Designer
</td>
<td>
London
</td>
<td>
66
</td>
</tr>
<tr>
<td>
Paul Byrd
</td>
<td>
Chief Financial Officer
</td>
<td>
New York
</td>
<td>
64
</td>
</tr>
<tr>
<td>
Gloria Little
</td>
<td>
Systems Administrator
</td>
<td>
New York
</td>
<td>
59
</td>
</tr>
<tr>
<td>
Bradley Greer
</td>
<td>
Software Engineer
</td>
<td>
London
</td>
<td>
41
</td>
</tr>
<tr>
<td>
Dai Rios
</td>
<td>
Personnel Lead
</td>
<td>
Edinburgh
</td>
<td>
35
</td>
</tr>
<tr>
<td>
Jenette Caldwell
</td>
<td>
Development Lead
</td>
<td>
New York
</td>
<td>
30
</td>
</tr>
<tr>
<td>
Yuri Berry
</td>
<td>
Chief Marketing Officer
</td>
<td>
New York
</td>
<td>
40
</td>
</tr>
<tr>
<td>
Caesar Vance
</td>
<td>
Pre-Sales Support
</td>
<td>
New York
</td>
<td>
21
</td>
</tr>
<tr>
<td>
Doris Wilder
</td>
<td>
Sales Assistant
</td>
<td>
Sydney
</td>
<td>
23
</td>
</tr>
<tr>
<td>
Angelica Ramos
</td>
<td>
Chief Executive Officer
</td>
<td>
London
</td>
<td>
47
</td>
</tr>
<tr>
<td>
Gavin Joyce
</td>
<td>
Developer
</td>
<td>
Edinburgh
</td>
<td>
42
</td>
</tr>
</tbody>
</table>
