Uh oh!
There was an error while loading.Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork121
The fastest open-source data table for web.
License
future-architect/cheetah-grid
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
The fastest open-source data table for web.
<scriptsrc="https://unpkg.com/cheetah-grid@2.1"></script>
npm install -S cheetah-grid
import"cheetah-grid/main.css";import*ascheetahGridfrom"cheetah-grid";
git clone https://github.com/future-architect/cheetah-grid.git
npm installnpm run build
built file is created in the./packages/cheetah-grid/dist directory
<divid="sample"style="height: 300px; border: solid 1px #ddd;"></div><script>// initializeconstgrid=newcheetahGrid.ListGrid({// Parent element on which to place the gridparentElement:document.querySelector("#sample"),// Header definitionheader:[{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 positionfrozenColCount:2,});</script>
Please refer to thedocuments for details
Using the Vue Component of Cheetah Grid
Please refer to thevue-cheetah-gridUsing the React Component of Cheetah Grid
Please refer to thereact-cheetah-grid
Theheader property, the property ofcheetahGrid.ListGrid, decides the behave and appearance of columns and header cells.We can set this property by constructor arguments or instance property.
Theheader 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 theheader property.
constgrid=newcheetahGrid.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 usingcolumnType.
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 thecolumn types documents for details
Define column action by usingaction 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 thecolumn actions documents for details
Define column style by usingstyle 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 theArray. |
| textOverflow | define how to display when text overflows the area of a cell.clip orellipsis is available. |
In addition, there is an extended style property for each column type.
Please refer to thedocuments for details
See theLICENSE file for license rights and limitations (MIT).
About
The fastest open-source data table for web.
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Sponsor this project
Uh oh!
There was an error while loading.Please reload this page.
Packages0
Uh oh!
There was an error while loading.Please reload this page.
Contributors7
Uh oh!
There was an error while loading.Please reload this page.