grid-js-component
A reactjs and vuejs grid component.
features
- vuejs component
- reactjs component
- scrollbar
- custom cell component
- freeze columns
- sort
- resize
link css
<link rel="stylesheet" href="./node_modules/grid-js-component/dist/grid.min.css" />vuejs component
npm i grid-js-vue-component
import "grid-js-vue-component";or
<script src="./node_modules/vue/dist/vue.min.js"></script>
<script src="./node_modules/vue-class-component/dist/vue-class-component.min.js"></script>
<script src="./node_modules/grid-js-vue-component/dist/grid-js-vue-component.min.js"></script><grid :data="data"
@sort="sort($event)"
@click="click($event)"
@action="action($event)">
</grid>the online demo: https://plantain-00.github.io/grid-js-component/packages/vue/demo
reactjs component
npm i grid-js-react-component
import { Grid } from "grid-js-react-component";or
<script src="./node_modules/react/umd/react.production.min.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.production.min.js"></script>
<script src="./node_modules/grid-js-react-component/dist/grid-js-react-component.min.js"></script><Grid data={this.data}
sort={sortData => this.sort(sortData)}
click={clickData => this.click(clickData)}
action={actionData => this.action(actionData)}>
</Grid>the online demo: https://plantain-00.github.io/grid-js-component/packages/react/demo
properties and events of the component
| name | type | description |
|---|---|---|
| data | GridData | the data of the grid |
| resize | boolean? | whether the column can be resized |
| sort | (sortData: SortData) => void | triggered when click a header to sort |
| click | (clickData: ClickData) => void | triggered when click a cell |
| action | (actionData: ActionData) => void | triggered when custom component triggered events |
| resized | (resizeData: ResizeData) => void | triggered when resizing action finished |
grid data structure
type GridData = {
headers: GridRowData;
rows: GridRowData[];
leftHeaders?: GridRowData;
leftRows?: GridRowData[];
rightHeaders?: GridRowData;
rightRows?: GridRowData[];
sortColumn?: string;
sortType?: "asc" | "desc";
};
type GridRowData = {
cells: GridCellData[];
style?: string; // the class string of the row, used to set style
width?: number;
};
type GridCellData<T = any> = {
value: T; // 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
width?: number;
};sort data structure
type SortData = {
cell: GridCellData; // the cell object clicked
header: GridRowData; // the header object clicked
columnIndex: number; // the column index clicked
};click data structure
type ClickData = {
cell: GridCellData; // the cell object clicked
row: GridRowData; // the row object clicked
body: GridRowData[]; // the body object clicked
rowIndex: number; // the row index clicked
columnIndex: number; // the column index clicked
};action data structure
type ActionData<T = any> = {
data: T; // the raw event data from the custom component
} & (SortData | ClickData);resize data structure
type ResizeData = {
cellWidth: number;
rowWidth: number;
index: number;
};properties and events of the custom component
| name | type | description |
|---|---|---|
| data | any | is GridCellData.value
|
| action | (actionData: any) => void | the actionData is ActionData.data
|
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
changelogs
# v4
npm i grid-js-component
# v5
npm i grid-js-vue-component
npm i grid-js-react-component// v4
import "grid-js-component/vue";
import { Grid } from "grid-js-component/react";
// v5
import "grid-js-vue-component";
import { Grid } from "grid-js-react-component";// v4
<link rel="stylesheet" href="./node_modules/grid-js-component/grid.min.css" />
// v5
<link rel="stylesheet" href="./node_modules/grid-js-component/dist/grid.min.css" />v4
// v3
import "grid-js-component/dist/vue";
// v4
import "grid-js-component/vue";v3
// v2
sort: (columnName: string) => void;
// v3
sort: (sortData: common.SortData) => void;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
