# Getting Started
# Installation
# Via npm
npm install -S cheetah-grid
1
const cheetahGrid = require("cheetah-grid");
1
# Via CDN
<script src="https://unpkg.com/cheetah-grid@1.15"></script>
1
# Via Source Code
cheetahGrid.es5.min.js (opens new window)
# SourceMap
cheetahGrid.es5.min.js.map (opens new window)
# Via GitHub
# git clone
git clone https://github.com/future-architect/cheetah-grid.git
1
# npm install & build
npm install
npm run build
1
2
2
built file is created in the ./packages/cheetah-grid/dist directory
# JavaScript & HTML
Please refer to the more documents for details
<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
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