npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

cheetah-grid

v1.15.1

Published

Cheetah Grid is a high performance grid engine that works on canvas

Downloads

4,869

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

<script src="https://unpkg.com/[email protected]"></script>

Downloading Cheetah Grid using npm

npm

npm install -S cheetah-grid
import * as cheetahGrid from "cheetah-grid";

// or

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

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

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

npm install & build

npm install
npm run build

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

Usage

Example for basic usage

<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

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

License

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

Supporting Cheetah Grid

sponsors