# 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
/**
 * @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
62
63
64
65
66
67
68
69
70

# Using Promises

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
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
66
67
68
69
70
71
72
73
74
75
76
77
Last Updated: 10/23/2024, 6:31:33 AM