grid-js-component v5.3.1

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

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

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