# zerogrid

> Web datagrid

Latest version **1.0.0-beta.13** (published 2019-12-05) · ISC license · 0 weekly downloads

## Install

```sh
npm install zerogrid
pnpm add zerogrid
yarn add zerogrid
bun add zerogrid
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0-beta.13 |
| Published | 2019-12-05 |
| First published | 2019-08-23 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 319.9 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | youngmu yang |
| Maintainers | zerosheepmoo |
| Keywords | grid, webgrid |

## Links

- npm: https://www.npmjs.com/package/zerogrid
- Repository: https://github.com/zerosheepmoo/zeroGrid
- Homepage: https://github.com/zerosheepmoo/zeroGrid#readme
- Issues: https://github.com/zerosheepmoo/zeroGrid/issues
- npm.io page: https://npm.io/package/zerogrid

## Dependencies (2)

- [madge](https://npm.io/package/madge.md) ^3.4.4
- [@types/node](https://npm.io/package/@types/node.md) ^12.7.2

## Alternatives

- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads

## Recent versions

- 1.0.0-beta.13 (latest) — 2019-12-05
- 1.0.0-beta.12 — 2019-12-05
- 1.0.0-beta.11 — 2019-09-03
- 1.0.0-beta.10 — 2019-08-28
- 1.0.0-beta.9 — 2019-08-28
- 1.0.0-beta.8 — 2019-08-28
- 1.0.0-beta.7 — 2019-08-28
- 1.0.0-beta.6 — 2019-08-27
- 1.0.0-beta.5 — 2019-08-27
- 1.0.0-beta.4 — 2019-08-27
- 1.0.0-beta.3 — 2019-08-23
- 1.0.0-beta.2 — 2019-08-23
- 1.0.0-beta.1 — 2019-08-23
- 1.0.0-beta.0 — 2019-08-23

## README

# zeroGrid

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

![preview](https://github.com/zerosheepmoo/zeroGrid/blob/master/preview/preview.png?raw=true)

## Browser Support

| ![Chrome](https://raw.github.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png) |
| --- | 
| Latest ✔ |

## Installing

Using npm: 
```bash
npm i zerogrid
```
## how to start

- initialize the grid with the format

```javascript

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

```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 

```javascript

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
```ts

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.

---
_Source: https://npm.io/package/zerogrid · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._