How To Sort Table in JavaScript
​DataGrid Library may be used as a sort-only JavaScript plugin. It may sort any HTML content, including DIVs, lists, or tables. Let's see how to sort a basic table with random data.
First, let's add a minimal HTML structure:
1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
<meta charset="UTF-8" />
5
<title>Sort HTML Table with DataGrid Library</title>
6
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
7
</head>
8
<body>
9
​
10
</body>
11
</html>
Copied!
Now, let's add a table with some sample data. It will contain three columns - user first name, user last name, and age. Each column has an appropriate CSS class: .age, .first-name and .last-name.
1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
<meta charset="UTF-8" />
5
<title>Sort HTML Table with DataGrid Library</title>
6
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
7
</head>
8
<body>
9
<table class="demo-table">
10
<thead>
11
<tr>
12
<th>First Name</th>
13
<th>Last Name</th>
14
<th>Age</th>
15
</tr>
16
</thead>
17
<tbody>
18
<tr>
19
<td class="first-name">Wendye</td>
20
<td class="last-name">Lightwing</td>
21
<td class="age">24</td>
22
</tr>
23
<tr>
24
<td class="first-name">Milena</td>
25
<td class="last-name">Torre</td>
26
<td class="age">82</td>
27
</tr>
28
<tr>
29
<td class="first-name">Erinn</td>
30
<td class="last-name">Hills</td>
31
<td class="age">81</td>
32
</tr>
33
<tr>
34
<td class="first-name">Yoshiko</td>
35
<td class="last-name">Smithson</td>
36
<td class="age">62</td>
37
</tr>
38
<tr>
39
<td class="first-name">Umberto</td>
40
<td class="last-name">McFadden</td>
41
<td class="age">93</td>
42
</tr>
43
<tr>
44
<td class="first-name">Donaugh</td>
45
<td class="last-name-name">Huban</td>
46
<td class="age">75</td>
47
</tr>
48
<tr>
49
<td class="first-name">Cami</td>
50
<td class="last-name">Pickthorn</td>
51
<td class="age">45</td>
52
</tr>
53
<tr>
54
<td class="first-name">Alistair</td>
55
<td class="last-name">Reddell</td>
56
<td class="age">55</td>
57
</tr>
58
<tr>
59
<td class="first-name">Genia</td>
60
<td class="last-name">Crawshay</td>
61
<td class="age">60</td>
62
</tr>
63
<tr>
64
<td class="first-name">Allyn</td>
65
<td class="last-name">Liell</td>
66
<td class="age">37</td>
67
</tr>
68
</tbody>
69
</table>
70
</body>
71
</html>
Copied!
Also, let's add some styles:
1
.demo-table{
2
margin: 2rem auto;
3
border: 1px solid #ddd;
4
border-collapse: collapse;
5
}
6
​
7
.demo-table td,
8
.demo-table th{
9
padding: 1rem;
10
border: 1px solid #ddd;
11
}
12
​
13
.demo-table tr:nth-child(even) td{
14
background: #f4f4f4;
15
}
16
​
17
select{
18
margin: auto;
19
display: block;
20
}
Copied!
Now we need to add a DataGrid CSS to the HEAD of the document:
1
<!-- DataGrid library CSS -->
2
<link href="datagrid.min.css" rel="stylesheet" />
Copied!
And additionally, we need to add the DataGrid script at the bottom of the document.
1
<!-- DataGrid library JavaScript -->
2
<script src="datagrid.min.js"></script>
Copied!
All we need to do now is to define what exactly should be sorted. Let's add the data-grid attribute to the <tbody> element of the table, and data-grid-item property to each <tr> element. Now the table will look like follows:
1
<table class="demo-table">
2
<thead>
3
<tr>
4
<th>First Name</th>
5
<th>Last Name</th>
6
<th>Age</th>
7
</tr>
8
</thead>
9
<tbody data-grid>
10
<tr data-grid-item>
11
<td class="first-name">Wendye</td>
12
<td class="last-name">Lightwing</td>
13
<td class="age">24</td>
14
</tr>
15
<tr data-grid-item>
16
<td class="first-name">Milena</td>
17
<td class="last-name">Torre</td>
18
<td class="age">82</td>
19
</tr>
20
<tr data-grid-item>
21
<td class="first-name">Erinn</td>
22
<td class="last-name">Hills</td>
23
<td class="age">81</td>
24
</tr>
25
<tr data-grid-item>
26
<td class="first-name">Yoshiko</td>
27
<td class="last-name">Smithson</td>
28
<td class="age">62</td>
29
</tr>
30
<tr data-grid-item>
31
<td class="first-name">Umberto</td>
32
<td class="last-name">McFadden</td>
33
<td class="age">93</td>
34
</tr>
35
<tr data-grid-item>
36
<td class="first-name">Donaugh</td>
37
<td class="last-name-name">Huban</td>
38
<td class="age">75</td>
39
</tr>
40
<tr data-grid-item>
41
<td class="first-name">Cami</td>
42
<td class="last-name">Pickthorn</td>
43
<td class="age">45</td>
44
</tr>
45
<tr data-grid-item>
46
<td class="first-name">Alistair</td>
47
<td class="last-name">Reddell</td>
48
<td class="age">55</td>
49
</tr>
50
<tr data-grid-item>
51
<td class="first-name">Genia</td>
52
<td class="last-name">Crawshay</td>
53
<td class="age">60</td>
54
</tr>
55
<tr data-grid-item>
56
<td class="first-name">Allyn</td>
57
<td class="last-name">Liell</td>
58
<td class="age">37</td>
59
</tr>
60
</tbody>
61
</table>
Copied!
Now let's add a sort control HTML:
1
<select data-grid-control="sort">
2
<option data-path=".first-name" data-direction="asc" data-type="text" selected>Sort by first name asc</option>
3
<option data-path=".first-name" data-direction="desc" data-type="text">Sort by first name desc</option>
4
<option data-path=".last-name" data-direction="asc" data-type="text">Sort by last name asc</option>
5
<option data-path=".last-name" data-direction="desc" data-type="text">Sort by last name desc</option>
6
<option data-path=".age" data-direction="asc" data-type="number">Sort by age asc</option>
7
<option data-path=".age" data-direction="desc" data-type="number">Sort by age desc</option>
8
</select>
Copied!
You may find the detailed documentation of the sort dropdown control here.
The final step is to initialize the DataGrid library as follows:
1
<script>
2
datagrid();
3
</script>
Copied!
That's all! The final HTML is:
1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
<meta charset="UTF-8" />
5
<title>Sort HTML Table with DataGrid Library</title>
6
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
7
​
8
<!-- Demo page styles -->
9
<style>
10
.demo-table{
11
margin: 2rem auto;
12
border: 1px solid #ddd;
13
border-collapse: collapse;
14
}
15
16
.demo-table td,
17
.demo-table th{
18
padding: 1rem;
19
border: 1px solid #ddd;
20
}
21
22
.demo-table tr:nth-child(even) td{
23
background: #f4f4f4;
24
}
25
26
select{
27
margin: auto;
28
display: block;
29
}
30
</style>
31
​
32
<!-- DataGrid library CSS -->
33
<link href="datagrid.min.css" rel="stylesheet" />
34
</head>
35
<body>
36
<select data-grid-control="sort">
37
<option data-path=".first-name" data-direction="asc" data-type="text" selected>Sort by first name asc</option>
38
<option data-path=".first-name" data-direction="desc" data-type="text">Sort by first name desc</option>
39
<option data-path=".last-name" data-direction="asc" data-type="text">Sort by last name asc</option>
40
<option data-path=".last-name" data-direction="desc" data-type="text">Sort by last name desc</option>
41
<option data-path=".age" data-direction="asc" data-type="number">Sort by age asc</option>
42
<option data-path=".age" data-direction="desc" data-type="number">Sort by age desc</option>
43
</select>
44
​
45
<table class="demo-table">
46
<thead>
47
<tr>
48
<th>First Name</th>
49
<th>Last Name</th>
50
<th>Age</th>
51
</tr>
52
</thead>
53
<tbody data-grid>
54
<tr data-grid-item>
55
<td class="first-name">Wendye</td>
56
<td class="last-name">Lightwing</td>
57
<td class="age">24</td>
58
</tr>
59
<tr data-grid-item>
60
<td class="first-name">Milena</td>
61
<td class="last-name">Torre</td>
62
<td class="age">82</td>
63
</tr>
64
<tr data-grid-item>
65
<td class="first-name">Erinn</td>
66
<td class="last-name">Hills</td>
67
<td class="age">81</td>
68
</tr>
69
<tr data-grid-item>
70
<td class="first-name">Yoshiko</td>
71
<td class="last-name">Smithson</td>
72
<td class="age">62</td>
73
</tr>
74
<tr data-grid-item>
75
<td class="first-name">Umberto</td>
76
<td class="last-name">McFadden</td>
77
<td class="age">93</td>
78
</tr>
79
<tr data-grid-item>
80
<td class="first-name">Donaugh</td>
81
<td class="last-name-name">Huban</td>
82
<td class="age">75</td>
83
</tr>
84
<tr data-grid-item>
85
<td class="first-name">Cami</td>
86
<td class="last-name">Pickthorn</td>
87
<td class="age">45</td>
88
</tr>
89
<tr data-grid-item>
90
<td class="first-name">Alistair</td>
91
<td class="last-name">Reddell</td>
92
<td class="age">55</td>
93
</tr>
94
<tr data-grid-item>
95
<td class="first-name">Genia</td>
96
<td class="last-name">Crawshay</td>
97
<td class="age">60</td>
98
</tr>
99
<tr data-grid-item>
100
<td class="first-name">Allyn</td>
101
<td class="last-name">Liell</td>
102
<td class="age">37</td>
103
</tr>
104
</tbody>
105
</table>
106
​
107
<!-- DataGrid library JavaScript -->
108
<script src="datagrid.min.js"></script>
109
​
110
<script>
111
datagrid();
112
</script>
113
</body>
114
</html>
Copied!
​
Copy link