# 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
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(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 = 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 (const 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

# 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

# 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
export default {
  data() {
    return {
      records: generatePersons(1000)
    }
  },
  methods: {
    onClickRecord(rec) { alert(JSON.stringify(rec)); }
  }
};
1
2
3
4
5
6
7
8
9
10