# Grid Data
Can use the Array object or cheetahGrid.data.DataSource object for grid data.
# Using Array object
<div class="sample1 demo-grid middle"></div>
1
const grid = new cheetahGrid.ListGrid({
parentElement: document.querySelector(".sample1"),
header: [
{ field: "personid", caption: "ID", width: 100 },
{ field: "fname", caption: "First Name", width: 200 },
{ field: "lname", caption: "Last Name", width: 200 },
{ field: "email", caption: "Email", width: 250 },
],
frozenColCount: 1,
});
// set array records
grid.records = [
{
personid: 1,
fname: "Sophia",
lname: "Hill",
email: "sophia_hill@example.com",
},
{
personid: 2,
fname: "Aubrey",
lname: "Martin",
email: "aubrey_martin@example.com",
},
{
personid: 3,
fname: "Avery",
lname: "Jones",
email: "avery_jones@example.com",
},
{
personid: 4,
fname: "Joseph",
lname: "Rodriguez",
email: "joseph_rodriguez@example.com",
},
{
personid: 5,
fname: "Samuel",
lname: "Campbell",
email: "samuel_campbell@example.com",
},
{
personid: 6,
fname: "Joshua",
lname: "Ortiz",
email: "joshua_ortiz@example.com",
},
{
personid: 7,
fname: "Mia",
lname: "Foster",
email: "mia_foster@example.com",
},
{
personid: 8,
fname: "Landon",
lname: "Lopez",
email: "landon_lopez@example.com",
},
{
personid: 9,
fname: "Audrey",
lname: "Cox",
email: "audrey_cox@example.com",
},
{
personid: 10,
fname: "Anna",
lname: "Ramirez",
email: "anna_ramirez@example.com",
},
];
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
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
# Using cheetahGrid.data.DataSource object
<div class="sample2 demo-grid middle"></div>
1
// define cache
const array = [];
const getPerson = (index) =>
array[index] || (array[index] = generatePerson(index));
const grid = new cheetahGrid.ListGrid({
parentElement: document.querySelector(".sample2"),
header: [
{ field: "personid", caption: "ID", width: 100 },
{ field: "fname", caption: "First Name", width: 200 },
{ field: "lname", caption: "Last Name", width: 200 },
{ field: "email", caption: "Email", width: 250 },
],
frozenColCount: 1,
});
grid.dataSource = new cheetahGrid.data.CachedDataSource({
// Get record method
get(index) {
return getPerson(index);
},
// Number of records
length: 10000,
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
cheetahGrid.data.DataSource has subclasses
cheetahGrid.data.CachedDataSource and cheetahGrid.data.FilterDataSource
CachedDataSource has the ability to cache the return value if the record is a Promise object.
If you know that the record does not become Promise, you can use DataSource,
In this case it is recommended to use CachedDataSource as CachedDataSource does not change in behavior.