# @aligov/components-gov-table
> 数政业务table
Latest version **1.1.2** (published 2020-12-07) · MIT license · 0 weekly downloads
## Install
```sh
npm install @aligov/components-gov-table
pnpm add @aligov/components-gov-table
yarn add @aligov/components-gov-table
bun add @aligov/components-gov-table
```
## Health
**Score 30/100 (F)** — status: abandoned.
Positive: no vulnerabilities; popular repo.
Warnings: low downloads; no types; no esm support.
Negative: abandoned.
## Facts
| | |
|---|---|
| Version | 1.1.2 |
| Published | 2020-12-07 |
| First published | 2019-08-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 904.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 18614 |
| Maintainers | jasoncapricorn, leezq, baizhao, zhaojian6516, daip, ccs0118, zhangcong52, zwhu, guoliang.hgl, mo.zhou, zhousufa, jerrywang12, xiazhiqiang, liunian, itrip, tao1991123 |
| Keywords | ice, react, component |
## Links
- npm: https://www.npmjs.com/package/@aligov/components-gov-table
- Repository: https://github.com/alibaba/ice
- Homepage: https://unpkg.com/@aligov/components-gov-table@1.1.2/build/index.html
- Issues: https://github.com/alibaba/ice/issues
- npm.io page: https://npm.io/package/@aligov/components-gov-table
## Dependencies (5)
- [moment](https://npm.io/package/moment.md) ^2.24.0
- [prop-types](https://npm.io/package/prop-types.md) ^15.5.8
- [@alifd/next](https://npm.io/package/@alifd/next.md) ^1.16.6
- [lodash.omit](https://npm.io/package/lodash.omit.md) ^4.5.0
- [@aligov/util](https://npm.io/package/@aligov/util.md) ^1.0.15
## Alternatives
- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads
## Recent versions
- 1.1.2 (latest) — 2020-12-07
- 1.1.1 — 2020-12-07
- 1.1.0 — 2020-12-06
- 1.0.6 — 2019-10-12
- 1.0.5 — 2019-10-12
- 1.0.4 — 2019-10-12
- 1.0.2 — 2019-09-07
- 1.0.1 — 2019-09-05
- 1.0.0 — 2019-08-08
## README
# govtable
@aligov/components-gov-table
数政业务table
---
扩展 @alifd/next 的 table，增加如自定义列和 action bar 等功能
## Install
```bash
tnpm i @aligov/components-gov-table -S
```
## 普通使用
可以使用 fusion table 的写法来实现其原支持的所有功能，如：
```jsx
```
## 扩展用法
扩展用法不能直接使用 `` 的方式来生命列，需要使用 `columns` prop 来配置列，这个属性实际就是列属性的数组, 更多配置参考 [Table.Column][table/column] 的 prop。
| 属性 | 说明 | 类型 | 默认值 |
|------------------------|----------------------------------------------------------------------|---------------------|--------|
| columns | 配置表格列，数组中的每一项的基本和 Table.Column 的一致 | Array | |
| showColumnPicker | 是否展示自定义列 | boolean | false |
| columnPickerStorageKey | 设定 key 来支持保存到 localStorage 中，建议使用 'page.module' 的形式 | string | '' |
| actionBar | 表格上方的操作栏内容，填写任何合法的 react 元素 | ReactNode | null |
| supportFullscreen | TODO: 表格支持全屏展示 | boolean | false |
| verticalAlign | 单元格垂直方向的对其方式，支持 baseline、top、middle 和 bottom | string | 'top' |
| style | 给最外层元素添加样式 | object | {} |
| className | 给最外层元素添加 class 属性 | string | '' |
### columns
columns 用来配置表格列。
`columns`: `Array`
`ColumnConfig` 是每一列的属性配置，基本上和 `` 上的 prop 一致，所以下面只列出比较特殊的属性。
| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| key | column 的 key 属性，供 react 区分使用 | string | |
| group | 表明是 [Table.ColumnGroup][table/columnGroup] 元素，同时作为 group 的 title | string | |
| groupHeader | 表明是 [Table.GroupHeader][table/groupHeader] 元素 | boolean | |
| groupFooter | 表明是 [Table.GroupFooter][table/groupFooter] 元素 | boolean | |
| type | 用来简化常用的类型的字段的渲染，如日期、时间、金钱
**可选值**：
'id', 'money', 'date', 'datetime' | Enum | |
| children | 主要是配合 `group` 来达到[多表头][table/group-title] 的目的 | Array | |
> 获取 key 的优先级是 key > title > dataIndex > group
#### 不同 type 下的渲染
如果有 `dataIndex` 属性，有 `type` 属性，切无 `cell` 属性，那么会根据 `type` 来做渲染。如果 type 不在枚举里，那么不做任何变更。
##### id
渲染结果包在 `span.cell-nowrap` 里，不折行。
##### money
配合对应行数据里的 `currency` 字段来格式化金钱为形如 `123,456.78 (CNY)` 的形式，格式化使用的工具是 [@alife/whale-util][whale-util] 里提供的 `formatAmount(value, currency, config)`。
渲染结果包在 `span.cell-money` 元素里，不折行。
额外配合属性：
- appendCurrency: {boolean}，用来控制展示结果是否添加形如 `(CNY)` 的后缀。默认情况下，不是空字符串且有 `currency` 字段值，将自动添加后缀。如果需要禁用，显示地设置 `appendCurrency: false`
##### date / datetime
`type` 是 `date` 或 `datetime` 的区别是默认的时间格式化方式，前者是 `YYYY-MM-DD`，后者是 `YYYY-MM-DD HH:mm:ss`，都可通过 `format` 属性来取代默认的格式化方式。
渲染结果包在 `span.cell-datetime` 元素里，不折行。
额外配合属性：
- format: {string}，取代默认的格式化方式，合法的格式化字符串参考 [momentjs#format][momentjs-format]。
#### enum
适用于对于一系列选择类型的枚举值，接口返回的是值，但需要展示为可读文案，这个方法用于简化这种情况的渲染。
额外配合属性：
- enums: {Array