# FilterDataSource
Filtering the data to be displayed using FilterDataSource
.
Generate a FilterDataSource
instance by passing DataSource
as the constructor argument.
If you want to generate from array, describe as new cheetahGrid.data.FilterDataSource(cheetahGrid.data.DataSource.ofArray(array))
.
<label>Filter:</label><input class="sample1-filter-input">
<div class="sample1 demo-grid large"></div>
1
2
2
/**
* @type {DataSource}
*/
const personsDataSource = generatePersonsDataSource(1000000);
const filterDataSource = new cheetahGrid.data.FilterDataSource(personsDataSource);
const grid = new cheetahGrid.ListGrid({
parentElement: document.querySelector('.sample1'),
header: [
{field: 'check', caption: '', width: 50, columnType: 'check', action: 'check'},
{field: 'personid', caption: 'ID', width: 100},
{
caption: 'name',
columns: [
{field: 'fname', caption: 'First Name', width: 200},
{field: 'lname', caption: 'Last Name', width: 200},
],
},
{field: 'email', caption: 'Email', width: 250},
{
field(rec) {
const d = rec.birthday;
return `${d.getFullYear()}/${d.getMonth() + 1}/${d.getDate()}`;
},
caption: 'birthday',
width: 100
},
{
caption: 'button',
width: 120,
/* button column */
columnType: new cheetahGrid.columns.type.ButtonColumn({
caption: 'SHOW REC',
}),
action: new cheetahGrid.columns.action.ButtonAction({
action(rec) {
alert(JSON.stringify(rec));
},
}),
}
],
frozenColCount: 2,
});
grid.dataSource = filterDataSource;
const input = document.querySelector('.sample1-filter-input');
input.addEventListener('input', () => {
const filterValue = input.value;
filterDataSource.filter = filterValue ? (record) => {
// filtering method
for (const k in record) {
if ((`${record[k]}`).indexOf(filterValue) >= 0) {
return true;
}
}
return false;
} : null;
// 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
54
55
56
57
58
59
60
61
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
54
55
56
57
58
59
60
61
# Using Promise
s
This feature is available even if record data is Promise
.
<label>Filter:</label><input class="sample2-filter-input">
<div class="sample2 demo-grid large"></div>
1
2
2
const personsDataSource = new cheetahGrid.data.CachedDataSource({
get(index) {
return new Promise((resolve) => {
console.log(`get record:${index}`);
setTimeout(() => { resolve(generatePerson(index)); }, 300);
});
},
length: 1000000,
});
const grid = new cheetahGrid.ListGrid({
parentElement: document.querySelector('.sample2'),
header: [
{field: 'check', caption: '', width: 50, columnType: 'check', action: 'check'},
{field: 'personid', caption: 'ID', width: 100},
{
caption: 'name',
columns: [
{field: 'fname', caption: 'First Name', width: 200},
{field: 'lname', caption: 'Last Name', width: 200},
],
},
{field: 'email', caption: 'Email', width: 250},
{
field(rec) {
const d = rec.birthday;
return `${d.getFullYear()}/${d.getMonth() + 1}/${d.getDate()}`;
},
caption: 'birthday',
width: 100
},
{
caption: 'button',
width: 120,
/* button column */
columnType: new cheetahGrid.columns.type.ButtonColumn({
caption: 'SHOW REC',
}),
action: new cheetahGrid.columns.action.ButtonAction({
action(rec) {
alert(JSON.stringify(rec));
},
}),
}
],
frozenColCount: 2,
});
const filterDataSource = new cheetahGrid.data.FilterDataSource(personsDataSource);
grid.dataSource = filterDataSource;
const input = document.querySelector('.sample2-filter-input');
input.addEventListener('input', () => {
const filterValue = input.value;
filterDataSource.filter = filterValue ? (record) => {
// filtering method
for (const k in record) {
if ((`${record[k]}`).indexOf(filterValue) >= 0) {
return true;
}
}
return false;
} : null;
// 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
54
55
56
57
58
59
60
61
62
63
64
65
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
54
55
56
57
58
59
60
61
62
63
64
65