zerogrid

v1.0.0-beta.13

Published

4 years ago

Web datagrid

0High
0Medium
0Low

zerosheepmoo

grid webgrid

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 : [email protected] (Korean / English available)

License

This project is licensed under the ISC license.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme