Zerogrid NPM | npm.io

zeroGrid

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

preview

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.

grid webgrid

@types/node madge

@infinitebrahmanuniverse/nolb-zer @everything-registry/sub-chunk-3226 zerogrid-vue2

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago