Antd官网没找到Pro-Table的相关说明文档, 下面是从依赖包里捞出来的readme。
codesandbox
pro-table 在 antd 的 table 上进行了一层封装,支持了一些预设,并且封装了一些行为。这里只列出与 antd table 不同的 api。
可以搭配antd-table的文档食用 https://ant.design/components/table-cn/
属性 | 描述 | 类型 | 默认值 |
---|---|---|---|
request | 一个获得 dataSource 的方法 | (params?: {pageSize: number;current: number;[key: string]: any;}) => Promise |
- |
postData | 对通过 url 获取的数据进行一些处理 | (data: T[]) => T[] |
- |
defaultData | 默认的数据 | T[] |
- |
actionRef | get table action | React.MutableRefObject |
- |
toolBarRender | 渲染工具栏,支持返回一个 dom 数组,会自动增加 margin-right | (action: UseFetchDataAction |
- |
onLoad | 数据加载完成后触发,会多次触发 | (dataSource: T[]) => void |
- |
onRequestError | 数据加载失败时触发 | (e: Error) => void |
- |
tableClassName | 封装的 table 的 className | string | - |
tableStyle | 封装的 table 的 style | CSSProperties | - |
options | table 的默认操作,设置为 false 可以关闭它 | {{ fullScreen: boolean \| function, reload: boolean \| function,setting: true }} |
{ fullScreen: true, reload:true , setting: true } |
search | 是否显示搜索表单,传入对象时为搜索表单的配置 | boolean \| { span?: number \| DefaultColConfig,searchText?: string, resetText?: string, collapseRender?: (collapsed: boolean) => React.ReactNode, collapsed:boolean, onCollapse: (collapsed:boolean)=> void } |
true |
dateFormatter | moment 的格式化方式 | "string" \| "number" \| false |
string |
beforeSearchSubmit | 搜索之前进行一些修改 | (params:T)=>T |
- |
onSizeChange | table 尺寸发生改变 | (size: 'default' | 'middle' | 'small' | undefined) => void |
- |
columnsStateMap | columns 的状态枚举 | {[key: string]: { show:boolean, fixed: "right"|"left"} } |
- |
onColumnsStateChange | columns 状态发生改变 | (props: {[key: string]: { show:boolean, fixed: "right"|"left"} }) => void |
- |
form | search From 配置 type=“form” 和 搜索表单 的 Form 配置 基本配置与 antd Form 相同 但是劫持了 form 的配置,可用来初始化 formData | Omit |
- |
属性 | 描述 | 类型 | 默认值 |
---|---|---|---|
renderText | 类似 table 的 render,但是必须返回 string,如果只是希望转化枚举,可以使用 valueEnum | (text: any,record: T,index: number,action: UseFetchDataAction |
- |
render | 类似 table 的 render,第一个参数变成了 dom,增加了第四个参数 action | (text: React.ReactNode,record: T,index: number,action: UseFetchDataAction |
- |
renderFormItem | 渲染查询表单的输入组件 | (item,props:{value,onChange}) => React.ReactNode |
- |
ellipsis | 是否自动缩略 | boolean | - |
copyable | 是否支持复制 | boolean | - |
valueEnum | 值的枚举,会自动转化把值当成 key 来取出要显示的内容 | valueEnum | - |
valueType | 值的类型 | 'money' \| 'option' \| 'date' \| 'dateTime' \| 'time' \| 'text'\| 'index' \| 'indexBorder' |
‘text’ |
hideInSearch | 在查询表单中不展示此项 | boolean | - |
hideInTable | 在 Table 中不展示此列 | boolean | - |
formItemProps | 查询表单的 props,会透传给表单项 | { [prop: string]: any } |
- |
有些时候我们要触发 table 的 reload 等操作,action 可以帮助我们做到这一点。
interface ActionType {
reload: () => void;
fetchMore: () => void;
reset: () => void;
}
const ref = useRef();
;
// 刷新
ref.reload();
// 加载更多
ref.fetchMore();
// 重置到默认值
ref.reset();
类型 | 描述 | 示例 |
---|---|---|
money | 转化值为金额 | ¥10,000.26 |
date | 日期 | 2019-11-16 |
dateTime | 日期和时间 | 2019-11-16 12:50:00 |
time | 时间 | 12:50:00 |
option | 操作项,会自动增加 marginRight,只支持一个数组,表单中会自动忽略 | [操作a,操作b] |
text | 默认值,不做任何处理 | - |
textarea | 与 text 相同, form 转化时会转为 textarea 组件 | - |
index | 序号列 | - |
indexBorder | 带 border 的序号列 | - |
progress | 进度条 | - |
digit | 单纯的数字,form 转化时会转为 inputNumber | - |
progress | 进度条 | - |
当前列值的枚举
interface IValueEnum {
[key: string]:
| React.ReactNode
| {
text: React.ReactNode;
status: 'Success' | 'Error' | 'Processing' | 'Warning' | 'Default';
};
}
npm install @ant-design/pro-table
# or
yarn add @ant-design/pro-table
import React, { useState } from 'react';
import ProTable, { ProColumns } from '@ant-design/pro-table';
import { Input, Button } from 'antd';
const columns: ProColumns[] = [
{
title: 'Name',
dataIndex: 'name',
copyable: true,
},
{
title: 'Age',
dataIndex: 'age',
},
{
title: 'date',
dataIndex: 'date',
valueType: 'date',
},
{
title: 'option',
valueType: 'option',
dataIndex: 'id',
render: (text, row, index, action) => [
{
window.alert('确认删除?');
action.reload();
}}
>
delete
,
{
window.alert('确认刷新?');
action.reload();
}}
>
reload
,
],
},
];
export default () => {
const [keywords, setKeywords] = useState('');
return (
size="small"
columns={columns}
request={() => ({
data: [
{
name: 'Jack',
age: 12,
date: '2020-01-02',
},
],
success: true,
})}
rowKey="name"
params={{ keywords }}
toolBarRender={action => [
setKeywords(value)}
/>,
]}
pagination={{
defaultCurrent: 10,
}}
/>
);
};