Natural Performance Manager

    TypeScript icon, indicating that this package has built-in type declarations

    1.1.3 • Public • Published

    Cheetah Grid

    GitHub npm npm npm npm npm Build Status

    Cheetah Grid

    The fastest open-source data table for web.


    DEMO & Documents

    Downloading Cheetah Grid

    Using Cheetah Grid with a CDN


    <script src=""></script>

    Downloading Cheetah Grid using npm


    npm install -S cheetah-grid
    import * as cheetahGrid from 'cheetah-grid'
    // or
    const cheetahGrid = require("cheetah-grid")

    Downloading Cheetah Grid source code




    Downloading Cheetah Grid using GitHub

    GitHub package version

    git clone

    git clone

    npm install & build

    npm install
    npm run build

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


    Example for basic usage

    <div id="sample" style="height: 300px; border: solid 1px #ddd;">
      // 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
        // Column fixed position
        frozenColCount: 2,

    Please refer to the documents for details

    Using the Vue Component of Cheetah Grid
    Please refer to the vue-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<object>). In the standard definition, each object consists of following properties.

    property description
    caption define the header caption
    field define the field name or function of the record to display in the cell
    width (optional) define the width of column
    columnType (optional) define the type of column
    style (optional) define the style of column
    action (optional) define the action of column

    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},

    Definition of column type

    Set the column type by using columnType.

    For example, you can set the following strings:

    property description
    none draw text in the cell
    'number' draw number in the cell with comma-separated
    'check' draw checkbox in the cell
    'button' draw button in the cell
    'image' draw image in the cell
    'multilinetext' draw multiline text in the cell

    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 the check box clickable.
    'input' make the cell enterable.

    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.

    property description
    color define the color of cell.
    textAlign define the horizontal position of text in cell.
    textBaseline define the vertical position of text in cell.
    bgColor define the background color of cell.
    font define the font of cell.
    padding define the padding of cell. if you set 4 values separately, please set the Array.
    textOverflow define how to display when text overflows the area of a cell. clip or ellipsis is available.

    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).

    Supporting Cheetah Grid

    Let's fund issues in this repository 


    npm i cheetah-grid

    DownloadsWeekly Downloads






    Unpacked Size

    8.76 MB

    Total Files


    Last publish


    • ota-meshi
    • future_oss