# @beisen-platform/platform-datatable

> 用于大量结构化的数据展示，有排序、分页、自定义操作列，支持头部冻结、首尾列冻结；宽度有紧凑、始终、宽松三种模式

Latest version **1.3.51-rc.10** (published 2019-11-05) · ISC license · 0 weekly downloads

## Install

```sh
npm install @beisen-platform/platform-datatable
pnpm add @beisen-platform/platform-datatable
yarn add @beisen-platform/platform-datatable
bun add @beisen-platform/platform-datatable
```

## 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 | 1.3.51-rc.10 |
| Published | 2019-11-05 |
| First published | 2018-12-02 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 8 |
| Unpacked size | 214.9 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | beisencorp |

## Links

- npm: https://www.npmjs.com/package/@beisen-platform/platform-datatable
- npm.io page: https://npm.io/package/@beisen-platform/platform-datatable

## Dependencies (8)

- [uuid](https://npm.io/package/uuid.md) 3.3.2
- [immer](https://npm.io/package/immer.md) ^1.7.4
- [css-loader](https://npm.io/package/css-loader.md) ^2.1.0
- [autoprefixer](https://npm.io/package/autoprefixer.md) ^9.4.7
- [@beisen/helper](https://npm.io/package/@beisen/helper.md) ^1.0.1
- [@beisen-platform/react-icons](https://npm.io/package/@beisen-platform/react-icons.md)
- [@beisen-platform/platform-base](https://npm.io/package/@beisen-platform/platform-base.md) 0.2.2
- [@beisen-platform/platform-prompt-page](https://npm.io/package/@beisen-platform/platform-prompt-page.md) 1.0.2

## Recent versions

- 1.3.51-rc.10 (latest) — 2019-11-05
- 1.3.51-rc.9 — 2019-11-03
- 1.3.51-rc.7 — 2019-10-31
- 1.3.51-rc.6 — 2019-10-28
- 1.3.51-rc.5 — 2019-10-24
- 1.3.51-rc.3 — 2019-10-17
- 1.3.51-rc.2 — 2019-10-14
- 1.3.51-rc.1 — 2019-10-12
- 1.3.50-rc.6 — 2019-10-11
- 1.3.50-rc.5 — 2019-09-11
- 1.3.50-rc.4 — 2019-09-11
- 1.3.50-rc.3 — 2019-09-10
- 1.3.50-rc.2 — 2019-09-05
- 1.3.50-rc.1 — 2019-08-26
- 1.3.50 — 2019-08-26
- … 107 more at https://npm.io/package/@beisen-platform/platform-datatable/versions

## README

#### DataTable使用方式如下

```javascript
<DataTable
  {...this.tableDefin}   //table的元数据，平台配置生成
  loading={this.state.isTableFetching} //table组件loading状态
  singleChecked={this.props.singleChecked} //table是否是单选
  onSelect={this.handleDataRowChecked.bind(this)} //table 行选中之后的回调
  selectedData={this.props.resultsData} //当前table已经选中的数据
  reloadData={this.reloadDataTable.bind(this)} //重新刷新当前table
  onCrossPageSelectChanged={this.handleDataTableCrossPageSelect.bind(this)} //跨页全选状态选择后的回调实践
  tableSize={this.props.stretch ? 'stretch' : 'Auto'} //table组件的渲染的模式，stretch: 自动充满父容器,滚动条在table内部。Auto: table根据自身高度渲染，滚动条出现在外部
  tableContainer={this.props.tableContainer || dataGrid.parentElement}
  containerHeight={this.props.containerHeight} //提供一个计算好的高度，table渲染到这个高度内
  containerWidth={this.props.containerWidth} //提供一个计算好的宽度，table选择到这个宽度内
  mainObjectContext={this.props.mainObjectContext || null} //上下文相关，用于当当前table数据属于子对象的时候，mainObjectContext传递是主对象相关的信息,包含PObjectDataID,parentDataId,parentMetaObjName，用于行操作的逻辑处理
  ext_genColDef={this.genCustomColDef}
  ext_getColumns={this.genCustomColumns}
/>
```

##### 属性说明

| 属性  | 说明 | 类型 | 默认值 |
| ----- | ---- | ---- | ---- |
| `loading` | table组件loading状态 | `bool` | `false`|
| `singleChecked` | table是否是单选 | `bool` | `false` |
| `selectedData` | table默认选中数据的ids | `array` | `[]` |
| `onSelect` | table行选中之后的回调函数,selectedItems:table选中行的所有数据，与metadata中的biz_data中行记录结构一致，outsideSelectedIds是selectedData的子集，排除了table操作过程中取消选中的那部分selectedData的数据 | `function (selectedItems, outsideSelectedIds) {}` | - |
| `reloadData` | 重新加载table列表数据 | `function (tableMetaData, reloadReson) {}` | `[]` |
| `onCrossPageSelectChanged` | table跨页全选点击回调 | `function (isActive) {}` | `bool` |
| `tableSize` | table组件的渲染的模式，stretch: 自动充满父容器,滚动条在table内部。Auto: table根据自身高度渲染，滚动条出现在外部 | `string` | `Auto` |
| `tableContainer` | 配置tableSize为stretch的时候使用，父容器的DOM | `DOM` | `table组件所在的parentElement` |
| `containerHeight` | 给table一个计算好的显式高度 | `int` | - |
| `containerWidth` | 给table一个计算好的显式宽度 | `int` | - |
| `ext_genColDef` | 重写某个列 | `function (colData, index, column) {}` | - |
| `ext_getColumns` | 重写列（拿到所有的列） | `function (columns) {}` | - |


##### 自定义列渲染

```javascript
let column = {
  key: string, //列唯一ID
  name: string, //列名
  title: string, //列表头显示
  sortable: bool, //是否需要排序
  visible: bool, //是否可见
  fixed: bool, // 是否fixed
  fixedWidth: colData.width ? +colData.width < 40 ? 40 : +colData.width : null // 后端接口给的宽度居然是 string 转换成数字再传递
  };

  column.render = (v, data, cellProps) => {
    console.log(v,data,cellProps);
    return (<div>自定义列渲染</div>);
  }
  ```

---
_Source: https://npm.io/package/@beisen-platform/platform-datatable · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._