@aligov/components-gov-table

1.1.2 • Public • Published

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 元素里,不折行。

额外配合属性:

  • appendCurrency: {boolean},用来控制展示结果是否添加形如 (CNY) 的后缀。默认情况下,不是空字符串且有 currency 字段值,将自动添加后缀。如果需要禁用,显示地设置 appendCurrency: false
date / datetime

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

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

额外配合属性:

  • format: {string},取代默认的格式化方式,合法的格式化字符串参考 momentjs#format

enum

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

额外配合属性:

  • enums: {Array},数据源,默认要求数组元素的格式至少包含 { label, value },其中 label 是文案,value 是模型的值。如果不是这种命名,那么需要配置 labelKeyvalueKey
  • labelKey: 数据源中表示文案的 key
  • valueKey: 数据源中表示值的 key

Readme

Keywords

Package Sidebar

Install

npm i @aligov/components-gov-table

Weekly Downloads

9

Version

1.1.2

License

MIT

Unpacked Size

926 kB

Total Files

12

Last publish

Collaborators

  • jasoncapricorn
  • qingkaili
  • huguoxin
  • shenyu.wsy
  • liunian
  • tao1991123
  • itrip
  • xiazhiqiang
  • mo.zhou
  • guoliang.hgl
  • daip
  • baizhao