The fastest open-source data table for web.

DEMO & Documents

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

npm install -S cheetah-grid

import * as cheetahGrid from "cheetah-grid";

// or

const cheetahGrid = require("cheetah-grid");

cheetahGrid.es5.min.js

SourceMap
cheetahGrid.es5.min.js.map

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

npm install
npm run build

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

<div id="sample" style="height: 300px; border: solid 1px #ddd;"></div>
<script>
  // initialize
  const grid = new cheetahGrid.ListGrid({
    // Parent element on which to place the grid
    parentElement: document.querySelector("#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,
    // Column fixed position
    frozenColCount: 2,
  });
</script>

Please refer to the documents for details

Using the Vue Component of Cheetah Grid
Please refer to the vue-cheetah-grid

Using the React Component of Cheetah Grid
Please refer to the react-cheetah-grid

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<object>). In the standard definition, each object consists of following properties.

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

const grid = new cheetahGrid.ListGrid({
  //...
  header: [
    //...
    {
      /* multiple header */
      caption: "Name",
      columns: [
        { field: "fname", caption: "First Name", width: 200 },
        { field: "lname", caption: "Last Name", width: 200 },
      ],
    },
    //...
  ],
  //...
});

Set the column type by using columnType.

For example, you can set the following strings:

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

Please refer to the column types documents for details

Define column action by using action property.

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

Please refer to the column actions documents for details

Define column style by using style property.

Properties below are prepared in standard.

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

Please refer to the documents for details

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