❤
npm
Sign UpSign In

zerogrid

1.0.0-beta.13 • Public • Published

zeroGrid

This is for practice and learning. Do not use this grid when you work for something.

preview

Browser Support

Chrome
Latest ✔

Installing

Using npm:

npm i zerogrid

how to start

  • initialize the grid with the format
 
let zeroGrid = new Grid( "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
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <script type="text/javascript" src="/node_modules/zerogrid/dist/main.js"></script> 
</head>
<body>
  <div id = "gridID">
  </div>
</body>
</html>
  • please, refer the example.
  • import zeroGrid
 
import Grid from 'zerogrid'
 
//with style...
import Grid from './node_modules/zerogrid/lib/assets/style/style.css'
 
  • 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 of main.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

 
type ValueType = string | number | boolean;
 
interface IRowData{
    [fieldName:string]:ValueType;
}
 
interface ICellStyle {
    backgroundColor?: string;
    color?: string;
    fontWeight?: string;
    fontSize?: string;
    textAlign?: string;
    text?: string;
}
 
interface IColumnStyle {
    header: ICellStyle;
    body: ICellStyle;
    fieldName: string;
    visible: boolean;
    width: number;
}
 
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.

Readme

Keywords

Package Sidebar

Install

npm i zerogrid

Repository

github.com/zerosheepmoo/zeroGrid

Homepage

github.com/zerosheepmoo/zeroGrid#readme

Weekly Downloads

1

Version

1.0.0-beta.13

License

ISC

Unpacked Size

328 kB

Total Files

53

Last publish

Collaborators

  • zerosheepmoo
Try on RunKit
Report malware