# Sort by Column
Define sort settings of each column by using sort
property.
When you set truthy value, records are sorted by internal logic pre-defined in Cheetah Grid.
Please define function if you want to sort by your own logic.
<div class="sample1 demo-grid middle"></div>
1
const records = [
{
no: 1,
name: 'Asiatic',
},
{
no: 2,
name: 'South African',
},
{
no: 3,
name: 'Tanzanian',
},
{
no: 4,
name: 'Sudan',
},
{
no: 5,
name: 'King',
},
];
const grid = new cheetahGrid.ListGrid({
parentElement: document.querySelector('.sample1'),
header: [
{
field: 'no',
caption: 'no',
width: 50,
// define custom sort logic
sort(order, col, grid) {
const compare = order === 'desc'
? (v1, v2) => v1 === v2 ? 0 : v1 > v2 ? 1 : -1
: (v1, v2) => v1 === v2 ? 0 : v1 < v2 ? 1 : -1;
records.sort((r1, r2) => compare(r1.no, r2.no));
console.log('sorted:',records)
grid.records = records;
}
},
{
field: 'name',
caption: 'name',
width: 200,
// use default sort logic
sort: true
}
],
});
grid.records = records;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
# Color of sort arrow
In order to change the color of the sort arrow you implement as follows.
<div class="sample2 demo-grid middle"></div>
1
const records = [
{
no: 1,
name: 'Asiatic',
},
{
no: 2,
name: 'South African',
},
{
no: 3,
name: 'Tanzanian',
},
{
no: 4,
name: 'Sudan',
},
{
no: 5,
name: 'King',
},
];
const grid = new cheetahGrid.ListGrid({
parentElement: document.querySelector('.sample2'),
header: [
{
field: 'no',
caption: 'no',
width: 50,
sort(order, col, grid) {
const compare = order === 'desc'
? (v1, v2) => v1 === v2 ? 0 : v1 > v2 ? 1 : -1
: (v1, v2) => v1 === v2 ? 0 : v1 < v2 ? 1 : -1;
records.sort((r1, r2) => compare(r1.no, r2.no));
grid.records = records;
},
// define color of sort arrow
headerStyle: {sortArrowColor: 'red'}
},
{
field: 'name',
caption: 'name',
width: 200,
sort: true,
// define color of sort arrow
headerStyle() {
return {sortArrowColor: 'blue'};
}
}
],
});
grid.records = records;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
# Reset
If you set sortState
property to null
, the sort state is initialized.
(only the arrow icon of the header is initialized.)
<div class="sample3 demo-grid middle"></div>
<button class="sample3-reset">Reset</button>
1
2
2
const records = [
{
no: 1,
name: 'Asiatic',
},
{
no: 2,
name: 'South African',
},
{
no: 3,
name: 'Tanzanian',
},
{
no: 4,
name: 'Sudan',
},
{
no: 5,
name: 'King',
},
];
const grid = new cheetahGrid.ListGrid({
parentElement: document.querySelector('.sample3'),
header: [
{
field: 'no',
caption: 'no',
width: 50,
sort(order, col, grid) {
const compare = order === 'desc'
? (v1, v2) => v1 === v2 ? 0 : v1 > v2 ? 1 : -1
: (v1, v2) => v1 === v2 ? 0 : v1 < v2 ? 1 : -1;
records.sort((r1, r2) => compare(r1.no, r2.no));
grid.records = records;
}
},
{
field: 'name',
caption: 'name',
width: 200,
sort: true
}
],
});
grid.records = records;
const button = document.querySelector('.sample3-reset');
button.onclick = () => {
grid.sortState = null;
// does not redraw automatically, please call `invalidate`.
grid.invalidate();
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53