Atmos
Search…
Tables
Atmos extensively uses bootstrap 4 .table classes you can refer their documentation on their site below
Tables
getbootstrap

Datatables

Datatables provides advanced interaction controls to your HTML tables it also supports bootstrap 4 tables. to use data table please follow the steps.
you can read detailed documentation of datatable at
DataTables | Table plug-in for jQuery

Step 1

Include the following in head
1
<link rel="stylesheet" href="assets/vendor/DataTables/datatables.min.css">
2
<link rel="stylesheet" href="assets/vendor/DataTables/DataTables-1.10.18/css/dataTables.bootstrap4.min.css">
Copied!

Step 2

Include the following before </body>
1
<script src="assets/vendor/DataTables/datatables.min.js"></script>
Copied!

Step 3

1
<table id="example" class="table table-hover" cellspacing="0" width="100%">
2
<thead>
3
<tr>
4
<th>Name</th>
5
<th>Position</th>
6
<th>Office</th>
7
<th>Age</th>
8
<th>Start date</th>
9
<th>Salary</th>
10
</tr>
11
</thead>
12
13
<tfoot>
14
<tr>
15
<th>Name</th>
16
<th>Position</th>
17
<th>Office</th>
18
<th>Age</th>
19
<th>Start date</th>
20
<th>Salary</th>
21
</tr>
22
</tfoot>
23
24
<tbody>
25
<tr>
26
<td>Tiger Nixon</td>
27
<td>System Architect</td>
28
<td>Edinburgh</td>
29
<td>61</td>
30
<td>2011/04/25</td>
31
<td>$320,800</td>
32
</tr>
33
<tr>
34
<td>Garrett Winters</td>
35
<td>Accountant</td>
36
<td>Tokyo</td>
37
<td>63</td>
38
<td>2011/07/25</td>
39
<td>$170,750</td>
40
</tr>
41
<tr>
42
<td>Ashton Cox</td>
43
<td>Junior Technical Author</td>
44
<td>San Francisco</td>
45
<td>66</td>
46
<td>2009/01/12</td>
47
<td>$86,000</td>
48
</tr>
49
<tr>
50
<td>Cedric Kelly</td>
51
<td>Senior Javascript Developer</td>
52
<td>Edinburgh</td>
53
<td>22</td>
54
<td>2012/03/29</td>
55
<td>$433,060</td>
56
</tr>
57
</tbody>
58
</table>
Copied!

Step 4

Initialize the datatable
1
$('#example').DataTable({
2
//DataTable Options
3
});
Copied!
Last modified 2yr ago
Copy link
Contents
Datatables