DataGrid Documentation
Search…
Controls
Double Sort (Multiple Column Ordering)
DataGrid library allows sorting on multiple columns at the same time. Let's see an example with double sorting a list of DIV elements.
.gif?alt=media&token=64aad84f-ed54-412c-9734-2701d1d698df)
Let's add a basic HTML structure:
1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
<meta charset="UTF-8">
5
<title>Double Sort (Multiple Column Ordering)</title>
6
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
7
8
<!-- Demo page CSS -->
9
<link href="styles.css" rel="stylesheet" />
10
11
</head>
12
<body>
13
14
<div class="wrapper">
15
<div class="item header">
16
<div>Name</div>
17
<div>Birth Year</div>
18
</div>
19
20
<!-- items to sort -->
21
<div class="data">
22
<div class="item">
23
<div class="name">Arch</div>
24
<div class="year">1956</div>
25
</div>
26
27
<div class="item">
28
<div class="name">Birdie</div>
29
<div class="year">1987</div>
30
</div>
31
32
<div class="item">
33
<div class="name">Denver</div>
34
<div class="year">1976</div>
35
</div>
36
37
<div class="item">
38
<div class="name">Arch</div>
39
<div class="year">1955</div>
40
</div>
41
42
<div class="item">
43
<div class="name">Oberon</div>
44
<div class="year">1965</div>
45
</div>
46
47
<div class="item">
48
<div class="name">Heath</div>
49
<div class="year">2013</div>
50
</div>
51
52
<div class="item">
53
<div class="name">Filippo</div>
54
<div class="year">1973</div>
55
</div>
56
57
<div class="item">
58
<div class="name">Kip</div>
59
<div class="year">1940</div>
60
</div>
61
62
<div class="item">
63
<div class="name">Filippo</div>
64
<div class="year">1972</div>
65
</div>
66
67
<div class="item">
68
<div class="name">Oberon</div>
69
<div class="year">1967</div>
70
</div>
71
72
<div class="item">
73
<div class="name">Kip</div>
74
<div class="year">1939</div>
75
</div>
76
77
<div class="item">
78
<div class="name">Arch</div>
79
<div class="year">1957</div>
80
</div>
81
82
<div class="item">
83
<div class="name">Filippo</div>
84
<div class="year">1971</div>
85
</div>
86
87
<div class="item">
88
<div class="name">Kip</div>
89
<div class="year">1941</div>
90
</div>
91
92
<div class="item">
93
<div class="name">Oberon</div>
94
<div class="year">1966</div>
95
</div>
96
</div>
97
</div>
98
</body>
99
</html>
Copied!
Page styles could be:
styles.css
1
.wrapper{
2
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
3
font-size: 1rem;
4
width: 400px;
5
max-width: 95%;
6
margin: 3rem auto;
7
display: flex;
8
flex-direction: column;
9
border-radius: 0.5rem;
10
overflow: hidden;
11
border: 1px solid #ccc;
12
}
13
14
.item{
15
display: flex;
16
border-bottom: 1px solid #ccc;
17
padding: 0.5rem 1rem;
18
}
19
20
.item:last-child{
21
border-bottom: 0;
22
}
23
24
.header{
25
font-weight: bold;
26
background: #e0f9ff;
27
}
28
29
.item >div{
30
width: 50%;
31
}
32
33
.item a{
34
color: #000
35
}
36
37
.item a::after{
38
margin-left: 1rem;
39
display: inline-block;
40
font-size: 1rem;
41
content: '\2195';
42
}
43
44
.dg-sort-selected.dg-asc::after{
45
content: '\25BC';
46
font-size: 0.8rem;
47
}
48
49
.dg-sort-selected.dg-desc::after{
50
content: '\25B2';
51
font-size: 0.8rem;
52
}
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!
Now we need to define what exactly should be sorted. Let's add the
data-grid attribute to the div that wraps data and the data-grid-item property to each data element. Now the HTML will look like follows:1
<!-- items to sort -->
2
<div class="data" data-grid>
3
<div class="item" data-grid-item>
4
<div class="name">Arch</div>
5
<div class="year">1956</div>
6
</div>
7
8
<div class="item" data-grid-item>
9
<div class="name">Birdie</div>
10
<div class="year">1987</div>
11
</div>
12
13
<div class="item" data-grid-item>
14
<div class="name">Denver</div>
15
<div class="year">1976</div>
16
</div>
17
18
<div class="item" data-grid-item>
19
<div class="name">Arch</div>
20
<div class="year">1955</div>
21
</div>
22
23
<div class="item" data-grid-item>
24
<div class="name">Oberon</div>
25
<div class="year">1965</div>
26
</div>
27
28
<div class="item" data-grid-item>
29
<div class="name">Heath</div>
30
<div class="year">2013</div>
31
</div>
32
33
<div class="item" data-grid-item>
34
<div class="name">Filippo</div>
35
<div class="year">1973</div>
36
</div>
37
38
<div class="item" data-grid-item>
39
<div class="name">Kip</div>
40
<div class="year">1940</div>
41
</div>
42
43
<div class="item" data-grid-item>
44
<div class="name">Filippo</div>
45
<div class="year">1972</div>
46
</div>
47
48
<div class="item" data-grid-item>
49
<div class="name">Oberon</div>
50
<div class="year">1967</div>
51
</div>
52
53
<div class="item" data-grid-item>
54
<div class="name">Kip</div>
55
<div class="year">1939</div>
56
</div>
57
58
<div class="item" data-grid-item>
59
<div class="name">Arch</div>
60
<div class="year">1957</div>
61
</div>
62
63
<div class="item" data-grid-item>
64
<div class="name">Filippo</div>
65
<div class="year">1971</div>
66
</div>
67
68
<div class="item" data-grid-item>
69
<div class="name">Kip</div>
70
<div class="year">1941</div>
71
</div>
72
73
<div class="item" data-grid-item>
74
<div class="name">Oberon</div>
75
<div class="year">1966</div>
76
</div>
77
</div>
Copied!
Now let's replace table headers with Sort Button controls. Please note that
data-id should have different values:1
<div class="item header">
2
<div>
3
<a
4
href="#"
5
data-id="name"
6
data-grid-control="sort-button"
7
data-path=".name"
8
data-direction="asc"
9
data-toggle-direction
10
data-type="text">Name</a>
11
</div>
12
<div>
13
<a
14
href="#"
15
data-id="year"
16
data-grid-control="sort-button"
17
data-path=".year"
18
data-direction="asc"
19
data-toggle-direction
20
data-type="number">Birth Year</a>
21
</div>
22
</div>
Copied!
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>Double Sort (Multiple Column Ordering)</title>
6
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
7
8
<!-- DataGrid library CSS -->
9
<link href="datagrid.min.css" rel="stylesheet" />
10
11
<!-- Demo page CSS -->
12
<link href="styles.css" rel="stylesheet" />
13
</head>
14
<body>
15
16
<div class="wrapper">
17
<div class="item header">
18
<div>
19
<a
20
href="#"
21
data-id="name"
22
data-grid-control="sort-button"
23
data-path=".name"
24
data-direction="asc"
25
data-toggle-direction
26
data-type="text">Name</a>
27
</div>
28
<div>
29
<a
30
href="#"
31
data-id="year"
32
data-grid-control="sort-button"
33
data-path=".year"
34
data-direction="asc"
35
data-toggle-direction
36
data-type="number">Birth Year</a>
37
</div>
38
</div>
39
40
<!-- items to sort -->
41
<div class="data" data-grid>
42
<div class="item" data-grid-item>
43
<div class="name">Arch</div>
44
<div class="year">1956</div>
45
</div>
46
47
<div class="item" data-grid-item>
48
<div class="name">Birdie</div>
49
<div class="year">1987</div>
50
</div>
51
52
<div class="item" data-grid-item>
53
<div class="name">Denver</div>
54
<div class="year">1976</div>
55
</div>
56
57
<div class="item" data-grid-item>
58
<div class="name">Arch</div>
59
<div class="year">1955</div>
60
</div>
61
62
<div class="item" data-grid-item>
63
<div class="name">Oberon</div>
64
<div class="year">1965</div>
65
</div>
66
67
<div class="item" data-grid-item>
68
<div class="name">Heath</div>
69
<div class="year">2013</div>
70
</div>
71
72
<div class="item" data-grid-item>
73
<div class="name">Filippo</div>
74
<div class="year">1973</div>
75
</div>
76
77
<div class="item" data-grid-item>
78
<div class="name">Kip</div>
79
<div class="year">1940</div>
80
</div>
81
82
<div class="item" data-grid-item>
83
<div class="name">Filippo</div>
84
<div class="year">1972</div>
85
</div>
86
87
<div class="item" data-grid-item>
88
<div class="name">Oberon</div>
89
<div class="year">1967</div>
90
</div>
91
92
<div class="item" data-grid-item>
93
<div class="name">Kip</div>
94
<div class="year">1939</div>
95
</div>
96
97
<div class="item" data-grid-item>
98
<div class="name">Arch</div>
99
<div class="year">1957</div>
100
</div>
101
102
<div class="item" data-grid-item>
103
<div class="name">Filippo</div>
104
<div class="year">1971</div>
105
</div>
106
107
<div class="item" data-grid-item>
108
<div class="name">Kip</div>
109
<div class="year">1941</div>
110
</div>
111
112
<div class="item" data-grid-item>
113
<div class="name">Oberon</div>
114
<div class="year">1966</div>
115
</div>
116
</div>
117
</div>
118
119
<!-- DataGrid library JavaScript -->
120
<script src="datagrid.min.js"></script>
121
122
<script>
123
datagrid();
124
</script>
125
</body>
126
</html>
Copied!
Last modified 1yr ago
Copy link