# @ant-design/pro-table

> 🏆 Use Ant Design Table like a Pro!

Latest version **3.21.0** (published 2025-07-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install @ant-design/pro-table
pnpm add @ant-design/pro-table
yarn add @ant-design/pro-table
bun add @ant-design/pro-table
```

## Health

**Score 50/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities; high maintenance score.

Warnings: low downloads.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 3.21.0 |
| Published | 2025-07-17 |
| First published | 2019-11-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 18 |
| Unpacked size | 559.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4829 |
| Maintainers | afc163, zombiej, chenshuai2144, arvinxx, madccc |
| Keywords | antd, admin, ant-design, ant-design-pro |

## Links

- npm: https://www.npmjs.com/package/@ant-design/pro-table
- Repository: https://github.com/ant-design/pro-components
- Homepage: https://github.com/ant-design/pro-components/tree/master/packages/table#readme
- Issues: http://github.com/umijs/plugins/issues
- npm.io page: https://npm.io/package/@ant-design/pro-table

## Dependencies (18)

- [dayjs](https://npm.io/package/dayjs.md) ^1.11.10
- [lodash](https://npm.io/package/lodash.md) ^4.17.21
- [rc-util](https://npm.io/package/rc-util.md) ^5.0.1
- [lodash-es](https://npm.io/package/lodash-es.md) ^4.17.21
- [classnames](https://npm.io/package/classnames.md) ^2.3.2
- [@dnd-kit/core](https://npm.io/package/@dnd-kit/core.md) ^6.0.8
- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.18.0
- [@ant-design/icons](https://npm.io/package/@ant-design/icons.md) ^5.0.0
- [@dnd-kit/sortable](https://npm.io/package/@dnd-kit/sortable.md) ^7.0.2
- [@dnd-kit/modifiers](https://npm.io/package/@dnd-kit/modifiers.md) ^6.0.1
- [@dnd-kit/utilities](https://npm.io/package/@dnd-kit/utilities.md) ^3.2.1
- [rc-resize-observer](https://npm.io/package/rc-resize-observer.md) ^1.0.0
- [@ant-design/cssinjs](https://npm.io/package/@ant-design/cssinjs.md) ^1.21.1
- [@ant-design/pro-card](https://npm.io/package/@ant-design/pro-card.md) 2.10.0
- [@ant-design/pro-form](https://npm.io/package/@ant-design/pro-form.md) 2.32.0
- [@ant-design/pro-field](https://npm.io/package/@ant-design/pro-field.md) 3.1.0
- [@ant-design/pro-utils](https://npm.io/package/@ant-design/pro-utils.md) 2.18.0
- [@ant-design/pro-provider](https://npm.io/package/@ant-design/pro-provider.md) 2.16.2

## Recent versions

- 3.21.0 (latest) — 2025-07-17
- 2.80.8 (old) — 2022-10-26
- 3.0.0-alpha.43 (next) — 2022-10-13
- 3.0.0-experimental.42 (experimental) — 2022-09-07
- 2.67.0 (tag) — 2022-03-14
- 1.1.0 (1x) — 2020-05-27
- 3.20.1 — 2025-06-10
- 3.20.0 — 2025-06-10
- 3.19.0 — 2025-03-31
- 3.18.6 — 2025-02-17
- 3.18.5 — 2025-02-12
- 3.18.4 — 2025-01-18
- 3.18.3 — 2025-01-06
- 3.18.2 — 2024-11-14
- 3.18.1 — 2024-10-22
- … 546 more at https://npm.io/package/@ant-design/pro-table/versions

## README

# @ant-design/pro-table

> ProTable was created to solve the problem of having to write a lot of sample code for tables in a project, so a lot of common logic was encapsulated in it. These wrappers can be simply categorized as pre-defined behaviors and pre-defined logic.

![](https://cdn.nlark.com/yuque/0/2020/png/84868/1582038656687-065b40ef-5029-4bf7-8941-6e843570e4e0.png?x-oss-process=image%2Fresize%2Cw_2031)

ProTable puts a layer of wrapping on top of antd's Table, supports some presets, and encapsulates some behaviors. Only api's that differ from antd Table are listed here.

### request

`request` is the most important API of ProTable, `request` takes an object. The object must have `data` and `success` in it, and `total` is also required if manual paging is needed. `request` takes over the `loading` settings and re-executes them when the query form is queried and the `params` parameters are modified. Also the query form values and `params` parameters are brought in. The following is an example.

```tsx | pure
<ProTable<DataType, Params>
  // params is a parameter that needs to be self-contained
  // This parameter has higher priority and will override the parameters of the query form
  params={params}
  request={async (
    // The first parameter params is the combination of the query form and params parameters
    // The first parameter will always have pageSize and current, which are antd specifications
    params: T & {
      pageSize: number;
      current: number;
    },
    sort,
    filter,
  ) => {
    // Here you need to return a Promise, and you can transform the data before returning it
    // If you need to transform the parameters you can change them here
    const msg = await myQuery({
      page: params.current,
      pageSize: params.pageSize,
    });
    return {
      data: msg.result,
      // Please return true for success.
      // otherwise the table will stop parsing the data, even if there is data
      success: boolean,
      // not passed will use the length of the data, if it is paged you must pass
      total: number,
    };
  }}
/>
```

### ProTable

| Property | Description | Type | Default Value |
| --- | --- | --- | --- |
| request | How to get `dataSource` | `(params?: {pageSize,current},sort,filter) => {data,success,total}` | - |
| params | Additional parameters used for `request` query, once changed will trigger reloading | `object` | - |
| postData | Process the data obtained through `request` | `(data: T[]) => T[]` | - |
| defaultData | Default data | `T[]` | - |
| dataSource | Table data, protable recommends using request to load | `T[]` | - |
| onDataSourceChange | Triggered when Table data changes | `(dataSource: T[]) => void` | - |
| actionRef | Reference to Table action for custom triggering | `MutableRefObject<ActionType>` | - |
| formRef | The form instance of the query form can be obtained for some flexible configuration | `MutableRefObject<FormInstance>` | - |
| toolBarRender | Render toolbar, support returning a dom array, will automatically increase margin-right | `(action) => ReactNode[]` | - |
| onLoad | Triggered after the data is loaded, it will be triggered multiple times | `(dataSource: T[]) => void` | - |
| onLoadingChange | Triggered when loading is modified, usually caused by network requests | `(loading:boolean)=>void` | - |
| onRequestError | Triggered when data loading fails | `(error) => void` | - |
| tableClassName | className of the encapsulated table | `string` | - |
| tableStyle | style of the encapsulated table | [CSSProperties](https://www.htmlhelp.com/reference/css/properties.html) | - |
| options | table toolbar, not displayed when set to false | `{{ density?: boolean, fullScreen?: boolean \| function, reload?: boolean \| function, reloadIcon?: React.ReactNode, densityIcon?: React.ReactNode, setting?: boolean \|` [SettingOptionType](#menu-bar-options-configuration) `}}` | `{ fullScreen: false, reload :true, density: true, setting: true}` |
| search | Whether to display the search form, when the object is passed in, it is the configuration of the search form | `false` \| [SearchConfig](#search-search-form) | - |
| dateFormatter | Convert moment format data to a specific type, false will not be converted | `"string"` \| `"number"` \| ((value: Moment, valueType: string) => string \| number) \|`false` | `"string"` |
| defaultSize | Default size | SizeType | - |
| beforeSearchSubmit | Make some changes before searching | `(params:T)=>T` | - |
| onSizeChange | The table size has changed | `(size:'default' \|'middle' \|'small') => void` | - |
| type | pro-table type | `"form"` | - |
| form | antd form configuration | [FormProps](https://ant.design/components/form-cn/#API) | - |
| onSubmit | Triggered when the form is submitted | `(params: U) => void` | - |
| onReset | Triggered when the form is reset | `() => void` | - |
| columnEmptyText | Display when it is empty, display `-` when it is not set, false can turn off this function | `string` \| `false` | false |
| tableRender | Custom rendering table function | `(props,dom,domList:{ toolbar,alert,table}) => ReactNode` | - |
| toolbar | Transparent transmission of `ListToolBar` configuration items | [ListToolBarProps](#listtoolbarprops) | - |
| tableExtraRender | The main function of the custom table | `(props: ProTableProps<T, U>, dataSource: T[]) => ReactNode;` | - |
| manualRequest | Do you need to manually trigger the first request? When configured as `true`, the search form cannot be hidden | `boolean` | false |
| editable | Related configuration of editable table | [TableRowEditable](/en-US/components/editable-table#editable-edit-line-configuration) | - |
| cardBordered | Border of Card components around Table and Search | `boolean \| {search?: boolean, table?: boolean}` | false |
| ghost | Ghost mode, that is, whether to cancel the padding of the table content area. | `boolean` | false |
| debounceTime | Debounce time | `number` | 10 |
| revalidateOnFocus | Automatically re-request when the window is focused | `boolean` | `false` |
| columnsState | Column Status Control, you can operate the display hide | `ColumnStateType` | - |

#### RecordCreator

| Property | Description | Type | Default Value |
| --- | --- | --- | --- |
| record | The row data to be added, generally contains a unique key | `T` | `{}` |
| position | Where does the line increase, start or end | `top` \| `bottom` | `bottom` |
| (...buttonProps) | [ButtonProps](https://ant.design/components/button-cn/#API) of antd | ButtonProps | — |

#### ColumnStateType

| Property | Description | Type | Default |
| --- | --- | --- | --- |
| defaultValue | The default value of the column status, only for the first time. Used for resetting value | `Record <string, ColumnsState>;` |  |
| value | Column status, support controlled mode | `Record <string, ColumnsState>;` |  |
| onChange | Column status After changing | `(value: Record <string, ColumnsState>) => void` |  |
| PersistenceKey | The key of the persistence column is used to determine if it is the same table | `string \| Number` |  |
| PersistenceType | The type of persistence column, localStorage is also existing after closing the browser, sessionStorage closes the browser will be lost | `localStorage \| sessionStorage` |  |

#### Search Search form

| Property | Description | Type | Default Value |
| --- | --- | --- | --- |
| filterType | Filter form type | `'query'` \| `'light'` | `'query'` |
| searchText | Search button text | `string` | Search |
| resetText | reset button text | `string` | reset |
| submitText | The text of the submit button | `string` | Submit |
| labelWidth | Label width | `'number'` \| `'auto'` | 80 |
| span | Configure the number of columns in the query form | `'number'` \| [`'ColConfig'`](#ColConfig) | defaultColConfig |
| className | Encapsulated search Form className | `string` | - |
| collapseRender | Collapse button render | `((collapsed: boolean,showCollapseButton?: boolean) => ReactNode)`\|`false` | - |
| defaultCollapsed | Whether to collapse by default | `boolean` | true |
| collapsed | collapsed | `boolean` | - |
| onCollapse | Collapse button event | `(collapsed: boolean) => void;` | - |
| optionRender | Custom action bar | `((searchConfig,formProps,dom) => ReactNode[])`\|`false` | - |
| showHiddenNum | Whether to show the number of hidden items after storing | `boolean` | `false` |

### editable edit line configuration

| Property | Description | Type | Default Value |
| --- | --- | --- | --- |
| type | Type of editable table, single or multiple | `single` \| `multiple` | - |
| form | Form instance of editable form, use `Form.useForm` to generate and use | `FormInstance` | - |
| formProps | form properties can be configured, but onFinish is not supported | [\`FormProps'](https://procomponents.ant.design/components/form#proform) | - |
| editableKeys | Row being edited, controlled attributes. The default`key` will use the configuration of `rowKey`,if there is no configuration, it will use the`index`, it is recommended to use rowKey | `Key[]` | - |
| onChange | Triggered when row data is modified | `(editableKeys: Key[], editableRows: T[]) => void` | - |
| onSave | Triggered when a row is saved | `(key: Key, row: T,originRow:T,newLine?:newLineConfig) => Promise<any>` | - |
| saveText | Text for saving a row | `React.ReactNode` | `Save` |
| onDelete | Triggered when a row is deleted | `(key: Key, row: T) => Promise<any>` | - |
| deleteText | Text for deleting a row | `React.ReactNode` | `Delete` |
| onCancel | Triggered when cancel editing a line | `(key: Key, row: T,originRow:T,newLine?:newLineConfig) => Promise<any>` | - |
| cancelText | Text for canceling the editing of a row | `React.ReactNode` | `Cancel` |
| actionRender | Custom edit mode action bar | `(row: T, config: ActionRenderConfig<T>) => ReactNode[]` | - |
| deletePopconfirmMessage | The pop-up confirmation box prompt message when deleting | `ReactNode` | `Delete this line?` |
| onlyOneLineEditorAlertMessage | Only one line can be edited | `ReactNode` | `Only one line can be edited at the same time` |
| onlyAddOneLineAlertMessage | Only one line can be added at the same time | `ReactNode` | `Only add one line` |

#### ColConfig

```tsx | pure
const defaultColConfig = {
  xs: 24,
  sm: 24,
  md: 12,
  lg: 12,
  xl: 8,
  xxl: 6,
};
```

## Install

Using npm:

```bash
$ npm install --save  @ant-design/pro-table
```

or using yarn:

```bash
$ yarn add @ant-design/pro-table
```

---
_Source: https://npm.io/package/@ant-design/pro-table · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._