Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/plantain-00/grid-js-component
A reactjs and vuejs grid component.
https://github.com/plantain-00/grid-js-component
Last synced: 12 days ago
JSON representation
A reactjs and vuejs grid component.
- Host: GitHub
- URL: https://github.com/plantain-00/grid-js-component
- Owner: plantain-00
- License: mit
- Created: 2017-04-05T08:29:13.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2020-03-13T23:40:09.000Z (over 4 years ago)
- Last Synced: 2024-04-26T19:02:30.975Z (6 months ago)
- Language: TypeScript
- Homepage:
- Size: 3.19 MB
- Stars: 3
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# grid-js-component
[](https://david-dm.org/plantain-00/grid-js-component)
[](https://david-dm.org/plantain-00/grid-js-component#info=devDependencies)
[](https://travis-ci.org/plantain-00/grid-js-component)
[](https://ci.appveyor.com/project/plantain-00/grid-js-component/branch/master)
[](https://badge.fury.io/js/grid-js-component)
[](https://www.npmjs.com/package/grid-js-component)
[](https://github.com/plantain-00/grid-js-component)
A reactjs and vuejs grid component.
## features
+ vuejs component
+ reactjs component
+ scrollbar
+ custom cell component
+ freeze columns
+ sort
+ resize
## link css
```html
```
## vuejs component
[](https://unpkg.com/grid-js-vue-component)
`npm i grid-js-vue-component`
```ts
import "grid-js-vue-component";
```
or
```html
```
```html
```
the online demo:
## reactjs component
[](https://unpkg.com/grid-js-react-component)
`npm i grid-js-react-component`
```ts
import { Grid } from "grid-js-react-component";
```
or
```html
```
```jsx
this.sort(sortData)}
click={clickData => this.click(clickData)}
action={actionData => this.action(actionData)}>
```
the online demo:
## properties and events of the component
name | type | description
--- | --- | ---
data | [GridData](#grid-data-structure) | the data of the grid
resize | boolean? | whether the column can be resized
sort | (sortData: [SortData](#sort-data-structure)) => void | triggered when click a header to sort
click | (clickData: [ClickData](#click-data-structure)) => void | triggered when click a cell
action | (actionData: [ActionData](#action-data-structure)) => void | triggered when custom component triggered events
resized | (resizeData: [ResizeData](#resize-data-structure)) => void | triggered when resizing action finished
## grid data structure
```ts
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 = {
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
```ts
type SortData = {
cell: GridCellData; // the cell object clicked
header: GridRowData; // the header object clicked
columnIndex: number; // the column index clicked
};
```
### click data structure
```ts
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
```ts
type ActionData = {
data: T; // the raw event data from the custom component
} & (SortData | ClickData);
```
### resize data structure
```ts
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
```bash
# v4
npm i grid-js-component
# v5
npm i grid-js-vue-component
npm i grid-js-react-component
```
```ts
// 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";
```
```html
// v4
// v5
```
#### v4
```ts
// v3
import "grid-js-component/dist/vue";
// v4
import "grid-js-component/vue";
```
#### v3
```bash
// v2
sort: (columnName: string) => void;
// v3
sort: (sortData: common.SortData) => void;
```
#### v2
```bash
// 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
```