grid-js-component

A reactjs and vuejs grid component.

install

npm i grid-js-component

link css

<link rel="stylesheet" href="./node_modules/grid-js-component/dist/grid.min.css" />

module bundler

This component should work with webpack, and it requires npm install raw-loader --save-dev to load templates.

vuejs component demo

npm i vue vue-class-component

import "grid-js-component/dist/vue";

<grid :data="data">
</grid>

the online demo: https://plantain-00.github.io/grid-js-component/demo/vue/index.html

the source code of the demo: https://github.com/plantain-00/grid-js-component/tree/master/demo/vue

reactjs component demo

import { Grid } from "grid-js-component/dist/react";

<Grid data={data} />

the online demo: https://plantain-00.github.io/grid-js-component/demo/react/index.html

the source code of the demo: https://github.com/plantain-00/grid-js-component/tree/master/demo/react

properties and events of the component

name	type	description
data	GridData	the data of the tree

grid data structure

type GridData = {
    headers: GridRowData;
    rows: GridRowData[];
    leftHeaders?: GridRowData;
    leftRows?: GridRowData[];
    rightHeaders?: GridRowData;
    rightRows?: GridRowData[];
};

type GridRowData = {
    cells: GridCellData[];
    style?: string; // the class string of the row, used to set style
};

type GridCellData = {
    value: any; // the value in the cell
    component?: string | Function; //  if exists, show the component rather than the value in the cell
    style?: string; // the class string of the cell, used to set style
};

general styles

• grid
• grid-main
• grid-main-head
• grid-main-head-row
• grid-main-head-row-cell
• grid-main-body
• grid-main-body-row
• grid-main-body-row-cell
• grid-left
• grid-left-head
• grid-left-head-row
• grid-left-head-row-cell
• grid-left-body
• grid-left-body-row
• grid-left-body-row-cell
• grid-right
• grid-right-head
• grid-right-head-row
• grid-right-head-row-cell
• grid-right-body
• grid-right-body-row
• grid-right-body-row-cell

features

• vuejs component
• reactjs component
• scrollbar
• custom cell component
• freeze columns

changelogs

v2

// v1
+ grid
+ grid-head
+ grid-head-row
+ grid-head-row-cell
+ grid-body
+ grid-body-row
+ grid-body-row-cell

// v2
+ grid-main
+ grid-main-head
+ grid-main-head-row
+ grid-main-head-row-cell
+ grid-main-body
+ grid-main-body-row
+ grid-main-body-row-cell