0.4.0 • Published 1 year ago
@tawa/mario-table v0.4.0
title: Table 表格 nav: title: 组件 path: /components order: 1 group: title: ' ' path: /table
order: 120
Table 表格
展示行列数据。
使用
import Table from '@tawa/mario-table';
<Table />;代码演示
基本用法
扩展渲染类型
表头过滤
API
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| fields | 表格列属性配置。具体属性见TableField | TableField[] | - |
| nextFields | 动态修改 fields 中渲染节点的属性 | TableField[] | - |
| fieldTypes | 扩展 fields 中渲染类型，可覆盖内置的基本渲染类型，请注意 type 命名 | { [type: string]: (props: object) => React.ReactNode} | - |
| emptyRender | 空值渲染函数，默认将undefined、null、''渲染为'--' | (value: any) => React.ReactNode | - |
| data | 数据源，同 table 的 dataSource | array | [] |
| total | 数据总量，pagination 的 total | number | 0 |
| columnFilter | 是否开启表头显示列过滤 | boolean | false |
| columnFilterKey | 表头显示列过滤的操作按钮挂载的 column 的 key，默认为'action'，即操作栏 | string | action |
其他属性见 antd Table
TableField
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| key | 表格列唯一标识 | string | - |
| name | 列头显示文字, 同 Column title | ReactNode | - |
| type | 渲染类型，包括基本渲染类型或自定义。 | string | - |
| visible | 控制列的显示隐藏 | boolean | true |
| props | 用于对应 type 的函数或者组件传递属性参数 | object | (value, record, index) => object | - |
其他属性见 antd Table Column
基本渲染类型
可通过 fieldTypes 注入其他自定义类型。形如
fieldTypes: {
// value, index为内部注入的属性
customed: ({ value, index, ...otherProps }) => (
<CustomedSome {...otherProps} />
);
unit: ({ value }) => `${value}元`;
}其中 props 有自动注入{ value: xx, index: xx }(value 为当前表格的值，index 为行序号，从 0 开始)。当然你可以通过 type 返回函数的形式覆盖这两个属性。建议自定义的组件或者函数的一些操作可以直接基于 value 进行。
内置的基本类型如下
| Type | 说明 |
|---|---|
action | 表格操作项 |
avatar | 用户头像 |
index | 表格行序号 |
enums | 枚举值转化 |
date | YYYY-MM-DD 日期格式 |
datetime | YYYY-MM-DD HH:mm:ss 日期格式 |
time | HH:mm:ss 时间格式 |
FAQ
为 widgets 配置公共属性
自定义渲染类型的组件如果使用useWidgetProps处理了 props, 可以通过 ConfigProvider 的widgets属性配置公共属性
import { useWidgetProps } from '@tawa/mario-hooks';
const combineProps = useWidgetProps(type, props);用法见 扩展渲染类型