Package Exports
- @ant-design/pro-table
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@ant-design/pro-table) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
@ant-design/pro-table
🏆 Use Ant Design Table like a Pro!
Demo
API
pro-table 在 antd 的 table 上进行了一层封装,支持了一些预设,并且封装了一些行为。这里只列出与 antd table 不同的 api。
Table
属性 | 描述 | 类型 | 默认值 |
---|---|---|---|
request | 一个获得 dataSource 的方法 | (params?: {pageSize: number;current: number;[key: string]: any;}) => Promise<RequestData<T>> |
- |
postData | 对通过 url 获取的数据进行一些处理 | (data: T[]) => T[] |
- |
defaultData | 默认的数据 | T[] |
- |
actionRef | get table action | React.MutableRefObject<ActionType> | ((actionRef: ActionType) => void) |
- |
toolBarRender | 渲染工具栏,支持返回一个 dom 数组,会自动增加 margin-right | (action: UseFetchDataAction<RequestData<T>>) => React.ReactNode[] |
- |
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' |
columnsStateMap | columns 的状态枚举 | `{[key: string]: { show:boolean, fixed: "right" | "left"} }` |
onColumnsStateChange | columns 状态发生改变 | `(props: {[key: string]: { show:boolean, fixed: "right" | "left"} }) => void` |
Columns
属性 | 描述 | 类型 | 默认值 |
---|---|---|---|
renderText | 类似 table 的 render,但是必须返回 string,如果只是希望转化枚举,可以使用 valueEnum | (text: any,record: T,index: number,action: UseFetchDataAction<RequestData<T>>) => string |
- |
render | 类似 table 的 render,第一个参数变成了 dom,增加了第四个参数 action | (text: React.ReactNode,record: T,index: number,action: UseFetchDataAction<RequestData<T>>) => React.ReactNode | React.ReactNode[] |
- |
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 } |
- |
ActionType
有些时候我们要触发 table 的 reload 等操作,action 可以帮助我们做到这一点。
interface ActionType {
reload: () => void;
fetchMore: () => void;
reset: () => void;
}
const ref = useRef<ActionType>();
<ProTable actionRef={ref} />;
// 刷新
ref.reload();
// 加载更多
ref.fetchMore();
// 重置到默认值
ref.reset();
valueType
类型 | 描述 | 示例 |
---|---|---|
money | 转化值为金额 | ¥10,000.26 |
date | 日期 | 2019-11-16 |
dateTime | 日期和时间 | 2019-11-16 12:50:00 |
time | 时间 | 12:50:00 |
option | 操作项,会自动增加 marginRight,只支持一个数组,表单中会自动忽略 | [<a>操作a</a>,<a>操作b</a>] |
text | 默认值,不做任何处理 | - |
textarea | 与 text 相同, form 转化时会转为 textarea 组件 | - |
index | 序号列 | - |
indexBorder | 带 border 的序号列 | - |
progress | 进度条 | - |
digit | 单纯的数字,form 转化时会转为 inputNumber | - |
progress | 进度条 | - |
valueEnum
当前列值的枚举
interface IValueEnum {
[key: string]:
| React.ReactNode
| {
text: React.ReactNode;
status: 'Success' | 'Error' | 'Processing' | 'Warning' | 'Default';
};
}
Usage
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) => [
<a
onClick={() => {
window.alert('确认删除?');
action.reload();
}}
>
delete
</a>,
<a
onClick={() => {
window.alert('确认刷新?');
action.reload();
}}
>
reload
</a>,
],
},
];
export default () => {
const [keywords, setKeywords] = useState('');
return (
<ProTable<{}, { keywords: string }>
size="small"
columns={columns}
request={() => ({
data: [
{
name: 'Jack',
age: 12,
date: '2020-01-02',
},
],
success: true,
})}
rowKey="name"
params={{ keywords }}
toolBarRender={action => [
<Input.Search
style={{
width: 200,
}}
onSearch={value => setKeywords(value)}
/>,
]}
pagination={{
defaultCurrent: 10,
}}
/>
);
};
LICENSE
MIT