# Introduction
# What it is
Cheetah Grid is a high performance JavaScript data table component that works on canvas
# Show 1,000,000 records without stress
You can display data of 1 million records in a moment.
<div>
<label>Grid initial processing time : </label><strong class="time"></strong><br>
<br>
<label>theme</label><select class="theme"><option value="default" selected="true">default</option></select>
</div>
<div class="grid-sample" style="height: 500px; border: solid 1px #ddd;"></div>
1
2
3
4
5
6
2
3
4
5
6
const personsDataSource = generatePersonsDataSource(1000000);
const startTime = new Date();
const grid = new cheetahGrid.ListGrid({
parentElement: document.querySelector('.grid-sample'),
header: [
{field: 'check', caption: '', width: 50, columnType: 'check', action: 'check'},
{field: 'personid', caption: 'ID', width: 100},
{ /* multiple header */
caption: 'Name',
columns: [
{field: 'fname', caption: 'First Name', width: 200},
{field: 'lname', caption: 'Last Name', width: 200},
],
},
{field: 'email', caption: 'Email', width: 250},
{
/* callback field */
field: function (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: function (rec) {
alert(JSON.stringify(rec));
},
}),
}
],
frozenColCount: 2,
});
grid.dataSource = personsDataSource;
const endTime = new Date();
document.querySelector('.time').textContent = (endTime - startTime) + 'ms';
// THEME
const themeSelect = document.querySelector('.theme');
themeSelect.onchange = function() {
if (themeSelect.value === 'default') {
grid.theme = null;
} else {
grid.theme = themeSelect.value;
}
console.log(themeSelect.value);
};
for (let name in cheetahGrid.themes.choices) {
const opt = document.createElement('option');
opt.value = name;
opt.textContent = name;
themeSelect.appendChild(opt);
}
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
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
# Simple Example
# JavaScript
<div class="grid-sample" style="height: 500px; border: solid 1px #ddd;"></div>
1
// initialize
grid = new cheetahGrid.ListGrid({
// Parent element on which to place the grid
parentElement: document.querySelector('.grid-sample'),
// Header definition
header: [
{field: 'check', caption: '', width: 50, columnType: 'check', action: 'check'},
{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},
],
// Array data to be displayed on the grid
records: generatePersons(1000),
// Column fixed position
frozenColCount: 2,
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# Vue.js
<div style="height: 500px; border: solid 1px #ddd;">
<c-grid
:data="records"
:frozen-col-count="1">
<!-- define checkbox -->
<c-grid-check-column
field="check"
width="50" />
<c-grid-column
field="personid"
width= "85"
>
ID
</c-grid-column>
<!-- multiple header -->
<c-grid-column-group
caption="Name">
<c-grid-input-column
field="fname"
width="20%"
min-width="150"
>
First Name
</c-grid-input-column>
<c-grid-input-column
field="lname"
width= "20%"
min-width="150"
>
Last Name
</c-grid-input-column>
</c-grid-column-group>
<!-- button -->
<c-grid-button-column
caption="SHOW REC"
width="120"
@click="onClickRecord"
/>
</c-grid>
</div>
<div class="grid-sample" ></div>
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
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
export default {
data: function () {
return {
records: generatePersons(1000)
}
},
methods: {
onClickRecord: function (rec) { alert(JSON.stringify(rec)); }
}
};
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10