@tawa/mario-table

---

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);

用法见 扩展渲染类型