找到文档了... AntDesign Pro中的高级组件基本都在这：https://procomponents.ant.design/components

前言 - 官网没找到Protable的说明文档 ，这些是从依赖包里的README.md里扒来的；
还有 - 下面request方法要求返回一个object，格式如下：

   const res:any[] = [{···},{···}];
   const result = {
     data: res,
     total: res.length,
     success: true,
     pageSize: 10,
     current: 1,
   };
   return result;

Demo

codesandbox

API

pro-table 在 antd 的 table 上进行了一层封装，支持了一些预设，并且封装了一些行为。这里只列出与 antd table 不同的 api。

Table

Columns

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 转化值为金额 eg. ¥10,000.26
• date 日期 eg. 2019-11-16
• dateTime 日期和时间 eg. 2019-11-16 12:50:00
• time 时间 eg. 12:50:00
• option 操作项，会自动增加 marginRight，只支持一个数组
• text 默认值，不做任何处理
• index 序号列
• indexBorder 带 border 的序号列

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 ProTable, { ProColumns } from '@ant-design/pro-table';

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 () => (
  <ProTable
    size="small"
    columns={columns}
    url={request}
    rowKey="key"
    params={{ keyword }}
    toolBarRender={action => [
      <Input.Search
        style={{
          width: 200,
        }}
        onSearch={value => setKeyword(value)}
      />,
      <Button
        onClick={() => {
          action.reload();
        }}
        type="primary"
        style={{
          marginRight: 8,
        }}
      >
        刷新
      </Button>,
      <Button
        onClick={() => {
          action.resetPageIndex();
        }}
        type="default"
        style={{
          marginRight: 8,
        }}
      >
        回到第一页
      </Button>,
    ]}
    pagination={{
      defaultCurrent: 10,
    }}
  />
);

LICENSE

MIT