# Getting Started

# Installation

# Via npm

npm (opens new window)

npm install -S cheetah-grid
1
const cheetahGrid = require("cheetah-grid")
1

# Via CDN

npm (opens new window)

<script src="https://unpkg.com/cheetah-grid@1.1"></script>
1

# Via Source Code

npm (opens new window)

cheetahGrid.es5.min.js (opens new window)

# SourceMap

cheetahGrid.es5.min.js.map (opens new window)

# Via GitHub

GitHub package version (opens new window)

# git clone

git clone https://github.com/future-architect/cheetah-grid.git
1

# npm install & build

npm install
npm run build
1
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