A reactjs and vuejs grid component.
npm i grid-js-component
<link rel="stylesheet" href="./node_modules/grid-js-component/dist/grid.min.css" />
This component should work with webpack
, and it requires npm install raw-loader --save-dev
to load templates.
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
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
name | type | description |
---|---|---|
data | GridData | the data of the tree |
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
};
- 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
- vuejs component
- reactjs component
- scrollbar
- custom cell component
- freeze columns
// 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