zeroGrid
This is for practice and learning. Do not use this grid when you work for something.
Browser Support
![]() |
---|
Latest ✔ |
Installing
Using npm:
npm i zerogrid
how to start
- initialize the grid with the format
let zeroGrid = "gridID" columns: fieldName: "f1" width: 120 visible: true header: text: "NAME" fontSize: "12px" fontWeight: "bold" color: "#000000" backgroundColor: "" body: fontSize: "12px" fontWeight: "" color: "#000000" backgroundColor: "rgb(255, 255, 255)" ... data: f1: "Jack" f2: 11 f3: false f4: "bus" f6: "Happy" f1: "Merry" f2: 21 f3: false f4: "car" f6: "Happy" f1: "David" f2: 31 f3: true f4: "taxi" f6: "Happy" f1: "Yang" f2: 26 f3: true f4: "train" f6: "Happy" f1: "Kim" f2: 47 f3: false f4: "subway" f6: "Unhappy"
- in html
- please, refer the example.
- import zeroGrid
//with style...
- The path that indicates
main.js
could be different depending on the directory structure. - When you use on the browser, it's okay to use
main.min.js
instead ofmain.js
API
provided method of Grid
name | parameter | description |
---|---|---|
setColumns() |
columns: Array of IColumnStyle |
delete all column and add corresponding columns |
addColumns() |
columns: Array of IColumnStyle |
add corresponding columns |
deleteColumns() |
fieldNames: Array of string |
delete correspoding columns |
dataBind() |
data: Array of IRowData |
add data to the Grid and bind with view |
addRows() |
data: Array of IRowData |
add rowData and apply on the view |
deleteRows() |
indexes: rowIndex:number |
delete rowData and apply on the view |
updateCell() |
rowIndex: number , fieldName: string , value:valueType |
update data and bind by Cell unit |
setProperties() |
fieldNames: Array of string , propertyStyle: propStyle , value: ValueType |
update correspoding columns with designed propStyle |
setColumnsStyle |
fieldNames: Array of string , propertyStyle: IColumnStyle |
update correspoding columns with designed IColumnStyle |
addtional reference
;
propStyle: string
header.[property] || body.[property] || [property]
ex) header.color
ex2) body.backgroundColor
ex3) width
Inquiry or Advice
Please, mail : zerosheepmoo@gmail.com (Korean / English available)
License
This project is licensed under the ISC license.