title: Table 表格 nav: title: 组件 path: /components order: 1 group: title: ' ' order: 120

Table 表格

展示行列数据。

使用

import Table from '@monsterooo/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 | | toolbar | 用于渲染操作栏 | ReactNode | - | | toolbarPosition | 操作拦内容渲染位置 | left|right | left |

其他属性见 antd Table

TableField

| 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | key | 表格列唯一标识 | string | - | | name | 列头显示文字, 同 Column title | ReactNode | - | | type | 渲染类型，包括基本渲染类型或自定义。 | string | - | | columnFilterItemName | columnFilter 展示的列名称 | 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 '@monsterooo/hooks';
const combineProps = useWidgetProps(type, props);

用法见 扩展渲染类型