中文

🏆 Use Ant Design Table like a Pro!

Demo

codesandbox

API

pro-table is encapsulated in an antd table, supports some presets, and encapsulates some behavior. Only apis different from antd table are listed here.

Table

| Property | Description | Type | Default Value | | --- | --- | --- | --- | | request | a method to get the dataSource. | (params?: {pageSize: number;current: number;[key: string]: any;}) => Promise<RequestData<T>> | - | | filterData | Do some processing on the data obtained through the url. | (data: T[]) => T[] | - | | defaultData | Default data array. | T[] | - | | manual | Whether manual mode, you need to manually call fetch. | boolean | - | | effects | When the dependent parameter changes, the load data is automatically removed. | (number \| string \| boolean)[] | [] | | onInit | Triggered after the table data is successfully initialized, it will be triggered multiple times. | (action: UseFetchDataAction<RequestData<T>>) => void | [] | | toolBarRender | Render toolbar, support for returning a dom array, will automatically increase margin-right. | (action: UseFetchDataAction<RequestData<T>>) => React.ReactNode[] | - | | onLoad | Triggered after the data is loaded, it will be triggered multiple times. | (dataSource: T[]) => void | - | | tableClassName | The className of the packaged table | string | - | | tableStyle | The style of the packaged table | CSSProperties | - | | options | table's default operation, set to false to close it | {{ fullScreen: boolean \| function, reload: boolean \| function,setting: true }} | {{ fullScreen: true, reload:true,setting: true }} | | search | whether to search the form | boolean | true | | momentFormat | formatting moment type | "string" \| "number" \| false | string | | beforeSearchSubmit | Make some changes before searching | (params:T)=>T | - |

Columns

| Property | Description | Type | Default Value | | --- | --- | --- | --- | | renderText | Similar to table render, but must return string, if you just want to convert the enumeration, you can use this scheme | (text: any,record: T,index: number,action: UseFetchDataAction<RequestData<T>>) => string | - | | render | Like table's render, the first argument becomes dom, and the fourth argument is added. | (text: React.ReactNode,record: T,index: number,action: UseFetchDataAction<RequestData<T>>) => React.ReactNode \| React.ReactNode[] | - | | renderFormItem | input component for rendering query form | (item, props: {value, onChange}) => React.ReactNode | - | | ellipsis | Whether to automatically abbreviate | boolean | - | | copyable | Whether to support replication | boolean | - | | valueEnum | The enumeration of values will automatically convert the value as a key to get the content to be displayed | {[key: string]: React.ReactNode} | - | | valueType | Type of value | 'money' \| 'option' \| 'date' \| 'dateTime' \| 'time' \| 'text'\| 'index' \| 'indexBorder' | 'text' | | hideInSearch | Do not show this in the query form | boolean | - | | hideInTable | Do not show this column in Table | boolean | - |

valueType

• money conversion value is the amount of eg. ¥10,000.26
• date date eg. 2019-11-16
• dateTime date and time eg. 2019-11-16 12:50:00
• time time eg. 12:50:00
• option operation item, it will automatically increase marginRight, only one array is supported.
• text default value, no processing

valueEnums

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: 'date',
    dataIndex: 'date',
    valueType: 'date',
  },
  {
    title: 'option',
    valueType: 'option',
    dataIndex: 'id',
    render: (text, row, index, action) => [
      <a
        onClick={() => {
          window.alert('确认删除？');
          action.reload();
        }}
      >
        delete
      </a>,
    ],
  },
];

export default () => (
  <ProTable
    size="small"
    columns={columns}
    url={request}
    rowKey="key"
    params={{}}
    toolBarRender={action => [
      <Input.Search
        style={{
          width: 200,
        }}
        onSearch={value => setKeyword(value)}
      />,
      <Button
        onClick={() => {
          action.reload();
        }}
        type="primary"
        style={{
          marginRight: 8,
        }}
      >
        reload
      </Button>,
    ]}
  />
);

LICENSE

MIT