zerogrid

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