Atmos
Search…
Getting Started
Build System
Gulp
Page Structure
Sass Modules
UI Elements
Colors
Buttons
Icons
Cards
Alerts
Modals
Avatar
Tables
Mail Templates
forms
Form Layouts
Switch
Tag Input
Radio Box
Select2
Datepickers
Masked Input
Rangeslider
Dropzone Fileupload
Form Wizard
Form Validation
Charts
Charts
Apex Charts
Chartjs
Google Charts
Chartist
Maps
Google Maps
Vector Maps
Starter Template
blank template Markup
Powered By
GitBook
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!
UI Elements - Previous
Avatar
Next - UI Elements
Mail Templates
Last modified
3yr ago
Copy link
Contents
Datatables