DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, and will add advanced interaction controls to any HTML table. For more info see
the official site .
Zero Configuration
DataTables has most features enabled by default, so all you need to do to use it with your own tables is to call the construction function.
Name
Position
Office
Age
Start date
Salary
Tiger Nixon
System Architect
Edinburgh
61
2011/04/25
$320,800
Garrett Winters
Accountant
Tokyo
63
2011/07/25
$170,750
Ashton Cox
Junior Technical Author
San Francisco
66
2009/01/12
$86,000
Cedric Kelly
Senior Javascript Developer
Edinburgh
22
2012/03/29
$433,060
Airi Satou
Accountant
Tokyo
33
2008/11/28
$162,700
Brielle Williamson
Integration Specialist
New York
61
2012/12/02
$372,000
Herrod Chandler
Sales Assistant
San Francisco
59
2012/08/06
$137,500
Rhona Davidson
Integration Specialist
Tokyo
55
2010/10/14
$327,900
Colleen Hurst
Javascript Developer
San Francisco
39
2009/09/15
$205,500
Sonya Frost
Software Engineer
Edinburgh
23
2008/12/13
$103,600
Jena Gaines
Office Manager
London
30
2008/12/19
$90,560
Quinn Flynn
Support Lead
Edinburgh
22
2013/03/03
$342,000
Charde Marshall
Regional Director
San Francisco
36
2008/10/16
$470,600
Haley Kennedy
Senior Marketing Designer
London
43
2012/12/18
$313,500
Tatyana Fitzpatrick
Regional Director
London
19
2010/03/17
$385,750
Michael Silva
Marketing Designer
London
66
2012/11/27
$198,500
Paul Byrd
Chief Financial Officer (CFO)
New York
64
2010/06/09
$725,000
Gloria Little
Systems Administrator
New York
59
2009/04/10
$237,500
Bradley Greer
Software Engineer
London
41
2012/10/13
$132,000
Dai Rios
Personnel Lead
Edinburgh
35
2012/09/26
$217,500
Jenette Caldwell
Development Lead
New York
30
2011/09/03
$345,000
Yuri Berry
Chief Marketing Officer (CMO)
New York
40
2009/06/25
$675,000
Caesar Vance
Pre-Sales Support
New York
21
2011/12/12
$106,450
Doris Wilder
Sales Assistant
Sydney
23
2010/09/20
$85,600
Angelica Ramos
Chief Executive Officer (CEO)
London
47
2009/10/09
$1,200,000
Gavin Joyce
Developer
Edinburgh
42
2010/12/22
$92,575
Jennifer Chang
Regional Director
Singapore
28
2010/11/14
$357,650
Brenden Wagner
Software Engineer
San Francisco
28
2011/06/07
$206,850
Fiona Green
Chief Operating Officer (COO)
San Francisco
48
2010/03/11
$850,000
Shou Itou
Regional Marketing
Tokyo
20
2011/08/14
$163,000
Michelle House
Integration Specialist
Sydney
37
2011/06/02
$95,400
Suki Burks
Developer
London
53
2009/10/22
$114,500
Prescott Bartlett
Technical Author
London
27
2011/05/07
$145,000
Gavin Cortez
Team Leader
San Francisco
22
2008/10/26
$235,500
Martena Mccray
Post-Sales support
Edinburgh
46
2011/03/09
$324,050
Unity Butler
Marketing Designer
San Francisco
47
2009/12/09
$85,675
Howard Hatfield
Office Manager
San Francisco
51
2008/12/16
$164,500
Hope Fuentes
Secretary
San Francisco
41
2010/02/12
$109,850
Vivian Harrell
Financial Controller
San Francisco
62
2009/02/14
$452,500
Timothy Mooney
Office Manager
London
37
2008/12/11
$136,200
Jackson Bradshaw
Director
New York
65
2008/09/26
$645,750
Olivia Liang
Support Engineer
Singapore
64
2011/02/03
$234,500
Bruno Nash
Software Engineer
London
38
2011/05/03
$163,500
Sakura Yamamoto
Support Engineer
Tokyo
37
2009/08/19
$139,575
Thor Walton
Developer
New York
61
2013/08/11
$98,540
Finn Camacho
Support Engineer
San Francisco
47
2009/07/07
$87,500
Serge Baldwin
Data Coordinator
Singapore
64
2012/04/09
$138,575
Zenaida Frank
Software Engineer
New York
63
2010/01/04
$125,250
Zorita Serrano
Software Engineer
San Francisco
56
2012/06/01
$115,000
Jennifer Acosta
Junior Javascript Developer
Edinburgh
43
2013/02/01
$75,650
Cara Stevens
Sales Assistant
New York
46
2011/12/06
$145,600
Hermione Butler
Regional Director
London
47
2011/03/21
$356,250
Lael Greer
Systems Administrator
London
21
2009/02/27
$103,500
Jonas Alexander
Developer
San Francisco
30
2010/07/14
$86,500
Shad Decker
Regional Director
Edinburgh
51
2008/11/13
$183,000
Michael Bruce
Javascript Developer
Singapore
29
2011/06/27
$183,000
Donna Snider
Customer Support
New York
27
2011/01/25
$112,000
Name
Position
Office
Age
Start date
Salary
copy
<table id="kt_datatable_zero_configuration" class="table table-row-bordered gy-5">
<thead>
<tr class="fw-semibold fs-6 text-muted">
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
$("#kt_datatable_zero_configuration").DataTable();
This example shows the DataTables table body scrolling in the vertical direction. This can generally be seen as an alternative method to pagination for displaying a large table in a fairly small vertical area, and as such pagination has been disabled here (note that this is not mandatory, it will work just fine with pagination enabled as well!).
copy
<table id="kt_datatable_vertical_scroll" class="table table-striped table-row-bordered gy-5 gs-7">
<thead>
<tr class="fw-semibold fs-6 text-gray-800">
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
</tbody>
<tfoot>
<tr class="border-top fw-semibold fs-6 text-gray-800">
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
$("#kt_datatable_vertical_scroll").DataTable({
"scrollY": "500px",
"scrollCollapse": true,
"paging": false,
"dom": "<'table-responsive'tr>"
});
DataTables has the ability to show tables with horizontal scrolling, which is very useful for when you have a wide table, but want to constrain it to a limited horizontal display area
copy
<table id="kt_datatable_horizontal_scroll" class="table table-striped table-row-bordered gy-5 gs-7">
<thead>
<tr class="fw-semibold fs-6 text-gray-800">
<th class="min-w-200px">First name</th>
<th class="min-w-150px">Last name</th>
<th class="min-w-300px">Position</th>
<th class="min-w-200px">Office</th>
<th class="min-w-100px">Age</th>
<th class="min-w-150px">Start date</th>
<th class="min-w-150px">Salary</th>
<th class="min-w-150px">Extn.</th>
<th class="min-w-150px">E-mail</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger</td>
<td>Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>5421</td>
<td>t.nixon@datatables.net</td>
</tr>
<tr>
<td>Garrett</td>
<td>Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
<td>8422</td>
<td>g.winters@datatables.net</td>
</tr>
</tbody>
</table>
$("#kt_datatable_horizontal_scroll").DataTable({
"scrollX": true
});
In this example you can see DataTables doing both horizontal and vertical scrolling at the same time. Note also that pagination is enabled in this example, and the scrolling accounts for this.
copy
<table id="kt_datatable_both_scrolls" class="table table-striped table-row-bordered gy-5 gs-7">
<thead>
<tr class="fw-semibold fs-6 text-gray-800">
<th class="min-w-200px">First name</th>
<th class="min-w-150px">Last name</th>
<th class="min-w-300px">Position</th>
<th class="min-w-200px">Office</th>
<th class="min-w-100px">Age</th>
<th class="min-w-150px">Start date</th>
<th class="min-w-150px">Salary</th>
<th class="min-w-150px">Extn.</th>
<th class="min-w-150px">E-mail</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger</td>
<td>Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>5421</td>
<td>t.nixon@datatables.net</td>
</tr>
<tr>
<td>Garrett</td>
<td>Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
<td>8422</td>
<td>g.winters@datatables.net</td>
</tr>
</tbody>
</table>
$("#kt_datatable_both_scrolls").DataTable({
"scrollY": 300,
"scrollX": true
});
Fixed Columns
FixedColumns allows more than one column to be frozen into place using the
fixedColumns.left
parameter. The example below shows two columns fixed.
First name
Last name
Position
Office
Age
Start date
Salary
Extn.
E-mail
Tiger
Nixon
System Architect
Edinburgh
61
2011/04/25
$320,800
5421
t.nixon@datatables.net
Garrett
Winters
Accountant
Tokyo
63
2011/07/25
$170,750
8422
g.winters@datatables.net
Ashton
Cox
Junior Technical Author
San Francisco
66
2009/01/12
$86,000
1562
a.cox@datatables.net
Cedric
Kelly
Senior Javascript Developer
Edinburgh
22
2012/03/29
$433,060
6224
c.kelly@datatables.net
Airi
Satou
Accountant
Tokyo
33
2008/11/28
$162,700
5407
a.satou@datatables.net
Brielle
Williamson
Integration Specialist
New York
61
2012/12/02
$372,000
4804
b.williamson@datatables.net
Herrod
Chandler
Sales Assistant
San Francisco
59
2012/08/06
$137,500
9608
h.chandler@datatables.net
Rhona
Davidson
Integration Specialist
Tokyo
55
2010/10/14
$327,900
6200
r.davidson@datatables.net
Colleen
Hurst
Javascript Developer
San Francisco
39
2009/09/15
$205,500
2360
c.hurst@datatables.net
Sonya
Frost
Software Engineer
Edinburgh
23
2008/12/13
$103,600
1667
s.frost@datatables.net
Jena
Gaines
Office Manager
London
30
2008/12/19
$90,560
3814
j.gaines@datatables.net
Quinn
Flynn
Support Lead
Edinburgh
22
2013/03/03
$342,000
9497
q.flynn@datatables.net
Charde
Marshall
Regional Director
San Francisco
36
2008/10/16
$470,600
6741
c.marshall@datatables.net
Haley
Kennedy
Senior Marketing Designer
London
43
2012/12/18
$313,500
3597
h.kennedy@datatables.net
Tatyana
Fitzpatrick
Regional Director
London
19
2010/03/17
$385,750
1965
t.fitzpatrick@datatables.net
Michael
Silva
Marketing Designer
London
66
2012/11/27
$198,500
1581
m.silva@datatables.net
Paul
Byrd
Chief Financial Officer (CFO)
New York
64
2010/06/09
$725,000
3059
p.byrd@datatables.net
Gloria
Little
Systems Administrator
New York
59
2009/04/10
$237,500
1721
g.little@datatables.net
Bradley
Greer
Software Engineer
London
41
2012/10/13
$132,000
2558
b.greer@datatables.net
Dai
Rios
Personnel Lead
Edinburgh
35
2012/09/26
$217,500
2290
d.rios@datatables.net
Jenette
Caldwell
Development Lead
New York
30
2011/09/03
$345,000
1937
j.caldwell@datatables.net
Yuri
Berry
Chief Marketing Officer (CMO)
New York
40
2009/06/25
$675,000
6154
y.berry@datatables.net
Caesar
Vance
Pre-Sales Support
New York
21
2011/12/12
$106,450
8330
c.vance@datatables.net
Doris
Wilder
Sales Assistant
Sydney
23
2010/09/20
$85,600
3023
d.wilder@datatables.net
Angelica
Ramos
Chief Executive Officer (CEO)
London
47
2009/10/09
$1,200,000
5797
a.ramos@datatables.net
Gavin
Joyce
Developer
Edinburgh
42
2010/12/22
$92,575
8822
g.joyce@datatables.net
Jennifer
Chang
Regional Director
Singapore
28
2010/11/14
$357,650
9239
j.chang@datatables.net
Brenden
Wagner
Software Engineer
San Francisco
28
2011/06/07
$206,850
1314
b.wagner@datatables.net
Fiona
Green
Chief Operating Officer (COO)
San Francisco
48
2010/03/11
$850,000
2947
f.green@datatables.net
copy
<table id="kt_datatable_fixed_columns" class="table table-striped table-row-bordered gy-5 gs-7">
<thead>
<tr class="fw-semibold fs-6 text-gray-800">
<th class="min-w-200px">First name</th>
<th class="min-w-150px">Last name</th>
<th class="min-w-300px">Position</th>
<th class="min-w-200px">Office</th>
<th class="min-w-100px">Age</th>
<th class="min-w-150px">Start date</th>
<th class="min-w-150px">Salary</th>
<th class="min-w-150px">Extn.</th>
<th class="min-w-150px">E-mail</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger</td>
<td>Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>5421</td>
<td>t.nixon@datatables.net</td>
</tr>
<tr>
<td>Garrett</td>
<td>Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
<td>8422</td>
<td>g.winters@datatables.net</td>
</tr>
</tbody>
</table>
$("#kt_datatable_fixed_columns").DataTable({
scrollY: "300px",
scrollX: true,
scrollCollapse: true,
fixedColumns: {
left: 2
}
});