# bee-complex-grid
> Complex Grid for React, AdvancedDataGrid
Latest version **3.0.1-beta.3** (published 2023-03-17) · MIT license · 0 weekly downloads
## Install
```sh
npm install bee-complex-grid
pnpm add bee-complex-grid
yarn add bee-complex-grid
bun add bee-complex-grid
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 3.0.1-beta.3 |
| Published | 2023-03-17 |
| First published | 2018-10-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=4.0.0 |
| Dependencies | 9 |
| Unpacked size | 249.4 KB |
| Known vulnerabilities | 0 (+5 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 12 |
| Author | Yonyou FED |
| Maintainers | shaohlr, honely1314, xiaoshutong, yonyoufed, jonyw, guoyongfeng, kvkens, whizbz, npm_yx, bjyxszd, tinper-bot, houjitong, gaox2025f, gcht163, cnkvkens, diozhu, wangjings123 |
| Keywords | react, react-component, bee-grid, iuap-design, tinper-bee, Grid |
## Links
- npm: https://www.npmjs.com/package/bee-complex-grid
- Repository: https://github.com/tinper-bee/bee-complex-grid
- Homepage: https://github.com/tinper-bee/bee-complex-grid.git
- Issues: https://github.com/tinper-bee/bee-complex-grid/issues
- npm.io page: https://npm.io/package/bee-complex-grid
## Dependencies (9)
- [xlsx](https://npm.io/package/xlsx.md) ^0.11.17
- [blob.js](https://npm.io/package/blob.js.md) ^1.0.1
- [classnames](https://npm.io/package/classnames.md) ^2.2.6
- [file-saver](https://npm.io/package/file-saver.md) ^1.3.3
- [script-loader](https://npm.io/package/script-loader.md) 0.7.2
- [lodash.isequal](https://npm.io/package/lodash.isequal.md) ^4.5.0
- [@tinper/next-ui](https://npm.io/package/@tinper/next-ui.md) ^4.1.8
- [async-validator](https://npm.io/package/async-validator.md) ^3.2.2
- [lodash.clonedeep](https://npm.io/package/lodash.clonedeep.md) ^4.5.0
## Alternatives
- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads
## Recent versions
- 3.0.1-beta.3 (latest) — 2023-03-17
- 2.0.28-alpha.0 (alpha) — 2019-11-18
- 2.0.24-beta.1 (beta) — 2019-08-20
- 3.0.1-beta.4 — 2024-12-26
- 2.3.0 — 2024-05-17
- 2.1.6-beta.1 — 2024-05-14
- 2.1.6-beta.0 — 2024-05-14
- 3.0.1-beta.2 — 2022-11-09
- 3.0.1-beta.1 — 2022-07-18
- 2.2.11 — 2022-06-13
- 3.0.0 — 2022-01-05
- 2.2.10 — 2021-12-27
- 2.2.7 — 2021-11-12
- 2.2.6 — 2021-09-26
- 2.2.5 — 2021-09-08
- … 143 more at https://npm.io/package/bee-complex-grid/versions
## README
# bee-complex-grid
[](https://www.npmjs.com/package/bee-complex-grid)
[](https://travis-ci.org/tinper-bee/bee-complex-grid)
[](https://coveralls.io/github/tinper-bee/bee-complex-grid?branch=master)
[](https://david-dm.org/tinper-bee/bee-complex-grid#info=devDependencies)
[](https://npmjs.org/package/bee-complex-grid)
[](http://isitmaintained.com/project/tinper-bee/bee-complex-grid "Average time to resolve an issue")
[](http://isitmaintained.com/project/tinper-bee/bee-complex-grid "Percentage of issues still open")
## 高级表格
bee-complex-grid 是基于bee-table上封装，将多选、过滤、排序、分页、固定列等多功能基于一身。在使用bee-table实现复杂功能时，需要高级组件嵌套高级组件，使用起来经常有问题。有了bee-complex-grid ，用户仅需要引入Grid即可，大大减少代码量，提供代码质量。
## 依赖
- react >= 15.3.0
- react-dom >= 15.3.0
- prop-types >= 15.6.0
## 使用方法
```js
import Grid from "bee-complex-grid";
const columns = [
{ title: '用户名', dataIndex: 'a', key: 'a', width: 100 },
{ id: '123', title: '性别', dataIndex: 'b', key: 'b', width: 100 },
{ title: '年龄', dataIndex: 'c', key: 'c', width: 200 },
{
title: '操作', dataIndex: '', key: 'd', render() {
return 一些操作;
},
},
];
const data = [
{ a: '令狐冲', b: '男', c: 41, key: '1' },
{ a: '杨过', b: '男', c: 67, key: '2' },
{ a: '郭靖', b: '男', c: 25, key: '3' },
];
class Demo extends Component {
render () {
return (
)
}
}
```
## API
table相关API参考[这里](http://bee.tinper.org/bee-table#bee-table),下面是Grid扩充的API
|参数|说明|类型|默认值|
|:--|:---:|:--:|---:|
|paginationObj|表格分页，具体参考[分页API](http://bee.tinper.org/bee-pagination#bee-pagination)|Object|{activePage: 1, total: 0,items:1}
|showHeaderMenu|是否显示表头菜单(动态设置显示隐藏、锁定解锁)|boolean|true|
|multiSelect|是否显示多选功能或单选功能，multiSelect={{type:"radio"}}时为单选表格，multiSelect={{type:"checkbox"}}时为多选表格，传其他值时均为普通表格|Object|{type:"checkbox"}|
|showFilterMenu|是否显示行过滤菜单|boolean|false|
|columnFilterAble|是否显示列过滤功能|boolean|true|
|sheetName【excel】| 设置导出excel 的sheet的名称 | string | -- |
|sheetIsRowFilter【excel】| 是否要设置数据的行高 | boolean | false |
|sheetHeader【excel】| 设置导出excel 的Head的高度 | Object | eg:{{height:30, //设置高度ifshow:false //是否显示}} |
|resetColumns|重置columns|function|this.refs.grid.resetColumns(columns)|
|exportData|要导出的数据源|array |-|
### Column(新增)
|参数|说明|类型|默认值|
|:--|:---|:--|:---|
|exportHidden|是否在导出中隐藏此列|boolean |false|
|exportKey|单独设置当前列的key[eg:性别 返回字段中 table 使用 id ，而导出中使用 name ]|string |-|
#### 导出excel 使用
```js
exportExcel=()=>{
this.refs.grid.exportExcel();
}
```
#### 开发调试
```sh
$ npm install -g bee-tools
$ git clone https://github.com/tinper-bee/bee-complex-grid
$ cd bee-complex-grid
$ npm install
$ npm run dev
```
---
_Source: https://npm.io/package/bee-complex-grid · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._