gjc

grid-js-component

A reactjs and vuejs grid component.

Showing:

Popularity

Downloads/wk

0

GitHub Stars

3

Maintenance

Last Commit

2yrs ago

Contributors

3

Package

Dependencies

2

License

MIT

Type Definitions

Built-In

Tree-Shakeable

No?

Categories

Readme

grid-js-component

Dependency Status devDependency Status Build Status: Linux Build Status: Windows npm version Downloads type-coverage

A reactjs and vuejs grid component.

features

  • vuejs component
  • reactjs component
  • scrollbar
  • custom cell component
  • freeze columns
  • sort
  • resize
<link rel="stylesheet" href="./node_modules/grid-js-component/dist/grid.min.css" />

vuejs component

gzip size

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

gzip size

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

nametypedescription
dataGridDatathe data of the grid
resizeboolean?whether the column can be resized
sort(sortData: SortData) => voidtriggered when click a header to sort
click(clickData: ClickData) => voidtriggered when click a cell
action(actionData: ActionData) => voidtriggered when custom component triggered events
resized(resizeData: ResizeData) => voidtriggered 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

nametypedescription
dataanyis GridCellData.value
action(actionData: any) => voidthe 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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial