govtable

@aligov/components-gov-table

数政业务table

扩展 @alifd/next 的 table，增加如自定义列和 action bar 等功能

Install

tnpm i @aligov/components-gov-table -S

普通使用

可以使用 fusion table 的写法来实现其原支持的所有功能，如：

<Table hasBorder dataSource={dataSource}>
  <Table.Column title="Id" dataIndex="id"/>
  <Table.Column title="Time" dataIndex="time" cell={renderTime}/>
</Table>

扩展用法

扩展用法不能直接使用 <Table.Column /> 的方式来生命列，需要使用 columns prop 来配置列，这个属性实际就是列属性的数组, 更多配置参考 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>

ColumnConfig 是每一列的属性配置，基本上和 <Table.Column /> 上的 prop 一致，所以下面只列出比较特殊的属性。

属性 说明 类型 默认值
key column 的 key 属性，供 react 区分使用 string
group 表明是 Table.ColumnGroup 元素，同时作为 group 的 title string
groupHeader 表明是 Table.GroupHeader 元素 boolean
groupFooter 表明是 Table.GroupFooter 元素 boolean
type 用来简化常用的类型的字段的渲染，如日期、时间、金钱

可选值：
'id', 'money', 'date', 'datetime'		 Enum
children 主要是配合 group 来达到多表头 的目的 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 里提供的 formatAmount(value, currency, config)。

渲染结果包在 span.cell-money 元素里，不折行。

额外配合属性：

date / datetime

type 是 date 或 datetime 的区别是默认的时间格式化方式，前者是 YYYY-MM-DD，后者是 YYYY-MM-DD HH:mm:ss，都可通过 format 属性来取代默认的格式化方式。

渲染结果包在 span.cell-datetime 元素里，不折行。

额外配合属性：

enum

适用于对于一系列选择类型的枚举值，接口返回的是值，但需要展示为可读文案，这个方法用于简化这种情况的渲染。

额外配合属性：