Cheetah Grid

The fastest open-source data table for web.

TableSpreadsheet
future-architect/cheetah-gridfuture-architect.github.io/cheetah-grid/cheetah-grid

README

Cheetah Grid

GitHub npm npm npm npm npm Build Status
Cheetah Grid

The fastest open-source data table for web.
capture.png

DEMO & Documents

Downloading Cheetah Grid


Using Cheetah Grid with a CDN

npm

  1. ``` html
  2. <script src="https://unpkg.com/cheetah-grid@1.8"></script>
  3. ```

Downloading Cheetah Grid using npm

npm

  1. ```sh
  2. npm install -S cheetah-grid
  3. ```

  1. ``` js
  2. import * as cheetahGrid from "cheetah-grid";

  4. // or

  6. const cheetahGrid = require("cheetah-grid");
  7. ```

Downloading Cheetah Grid source code

npm

cheetahGrid.es5.min.js

SourceMap  
cheetahGrid.es5.min.js.map

Downloading Cheetah Grid using GitHub

GitHub package version

git clone


  1. ``` sh
  2. git clone https://github.com/future-architect/cheetah-grid.git
  3. ```

npm install & build


  1. ``` sh
  2. npm install
  3. npm run build
  4. ```

built file is created in the ./packages/cheetah-grid/dist directory

Usage


Example for basic usage


  1. ``` html
  2. <div id="sample" style="height: 300px; border: solid 1px #ddd;"></div>
  3. <script>
  4.   // initialize
  5.   const grid = new cheetahGrid.ListGrid({
  6.     // Parent element on which to place the grid
  7.     parentElement: document.querySelector("#sample"),
  8.     // Header definition
  9.     header: [
  10.       {
  11.         field: "check",
  12.         caption: "",
  13.         width: 50,
  14.         columnType: "check",
  15.         action: "check",
  16.       },
  17.       { field: "personid", caption: "ID", width: 100 },
  18.       { field: "fname", caption: "First Name", width: 200 },
  19.       { field: "lname", caption: "Last Name", width: 200 },
  20.       { field: "email", caption: "Email", width: 250 },
  21.     ],
  22.     // Array data to be displayed on the grid
  23.     records,
  24.     // Column fixed position
  25.     frozenColCount: 2,
  26.   });
  27. </script>
  28. ```

Please refer to the documents for details

Using the Vue Component of Cheetah Grid

Please refer to the [vue-cheetah-grid](https://www.npmjs.com/package/vue-cheetah-grid)

>

Using the React Component of Cheetah Grid

Please refer to the [react-cheetah-grid](https://www.npmjs.com/package/react-cheetah-grid)


Definition of columns and headers


The header property, the property of cheetahGrid.ListGrid, decides the behave and appearance of columns and header cells.
We can set this property by constructor arguments or instance property.

The `header` property must be set by objects array (`Array`).
In the standard definition, each object consists of following properties.

PropertyDescription
-------------------------------------------------------------------------------------------
captiondefine
fielddefine
widthdefine
columnTypedefine
styledefine
actiondefine

To use multiple header, set the hierarchical structured Object to the header property.

  1. ``` js
  2. const grid = new cheetahGrid.ListGrid({
  3.   //...
  4.   header: [
  5.     //...
  6.     {
  7.       /* multiple header */
  8.       caption: "Name",
  9.       columns: [
  10.         { field: "fname", caption: "First Name", width: 200 },
  11.         { field: "lname", caption: "Last Name", width: 200 },
  12.       ],
  13.     },
  14.     //...
  15.   ],
  16.   //...
  17. });
  18. ```

Definition of column type


Set the column type by using columnType.

For example, you can set the following strings:

PropertyDescription
-------------------------------------------------------------
nonedraw
`'number'`draw
`'check'`draw
`'button'`draw
`'image'`draw
`'multilinetext'`draw

If you define a class instance you can define an advanced column types.

Please refer to the column types documents for details

Definition of column action


Define column action by using action property.

`action`Description
--------------------------------------
`'check'`make
`'input'`make

If you define a class instance you can define an advanced column actions.

Please refer to the column actions documents for details

Definition of column style


Define column style by using style property.

Properties below are prepared in standard.

PropertyDescription
------------------------------------------------------------------------------------------------------------
colordefine
textAligndefine
textBaselinedefine
bgColordefine
fontdefine
paddingdefine
textOverflowdefine

In addition, there is an extended style property for each column type.


Please refer to the documents for details

License


See the LICENSE file for license rights and limitations (MIT).

Supporting Cheetah Grid

sponsors