# @plasmicapp/pro-table

> 🏆 Use Ant Design Table like a Pro!

Latest version **3.8.0** (published 2023-06-02) · MIT license · 0 weekly downloads

## Install

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

## Health

**Score 40/100 (D)** — status: abandoned.

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

Warnings: low downloads.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 3.8.0 |
| Published | 2023-06-02 |
| First published | 2023-06-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 16 |
| Unpacked size | 13.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4831 |
| Maintainers | plasmicapp |
| Keywords | antd, admin, ant-design, ant-design-pro |

## Links

- npm: https://www.npmjs.com/package/@plasmicapp/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/@plasmicapp/pro-table

## Dependencies (16)

- [dayjs](https://npm.io/package/dayjs.md) ^1.11.4
- [omit.js](https://npm.io/package/omit.js.md) ^2.0.2
- [rc-util](https://npm.io/package/rc-util.md) ^5.0.1
- [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/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
- [use-json-comparison](https://npm.io/package/use-json-comparison.md) ^1.0.5
- [@plasmicapp/pro-card](https://npm.io/package/@plasmicapp/pro-card.md) ^2.5.0
- [@plasmicapp/pro-form](https://npm.io/package/@plasmicapp/pro-form.md) ^2.14.0
- [@plasmicapp/pro-field](https://npm.io/package/@plasmicapp/pro-field.md) ^2.10.0
- [@plasmicapp/pro-utils](https://npm.io/package/@plasmicapp/pro-utils.md) ^2.12.0
- [@plasmicapp/pro-provider](https://npm.io/package/@plasmicapp/pro-provider.md) ^2.11.0

## Recent versions

- 3.8.0 (latest) — 2023-06-02

## README

# @plasmicapp/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

| Properties | Description | Type | Default |
| --- | --- | --- | --- |
| request | Method to get `dataSource` | `(params?: {pageSize,current},sort,filter) => {data,success,total}` | - |
| params | redundant parameters for `request` queries, triggering a reload if they change | `object` | - |
| postData | Processes the data obtained by `request` | `(data: T[]) => T[]` | - |
| defaultData | The default data | `T[]` | - |
| actionRef | A reference to the Table action for custom triggering | `MutableRefObject<FormInstance>` | - |
| formRef | A reference to the form instance of the query form, for some flexible configuration | `MutableRefObject<ActionType>` | - |
| toolBarRender | Renders the toolbar, supports returning a dom array, and will automatically add margin-right | `(action) => ReactNode[]` | - |
| onLoad | Triggered when data is loaded, 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` | - |
| className of the encapsulated table | string | - |
| tableStyle | The style of the wrapped table | [CSSProperties](https://www.htmlhelp.com/reference/css/properties.html) | - |
| options | table toolbar, not shown when set to false | `{{ fullScreen: boolean \| function, reload: boolean \| function,setting: true }}` | `{ fullScreen: true, reload:true, setting: true}`` |
| search | Whether to display the search form, pass in the object for the search form configuration | `false`\| [SearchConfig](#search-search-form) | true |
| dateFormatter | Converts moment format data to a specific type, false does not convert | `"string"` \| `"number"` \| ((value: Moment, valueType: string) => string \| number) \| `false` | `"string"` |
| beforeSearchSubmit | make some changes before searching | `(params:T)=>T` | - |
| onSizeChange | table size changed | `(size: 'default' \| 'middle' \| 'small') => void` | - |
| type | pro-table type | `"form"` | - |
| form | configuration of antd form | [FormProps](https://ant.design/components/form-cn/#API) | - |
| onSubmit | Triggered when the form is submitted | `(params: U) => void` | - |
| onReset | Triggered when resetting the form | `() => void` | - |
| columnEmptyText | display when empty, display when not set `-`, false to disable this function | `string` \| `false` | false |
| tableRender | Custom rendering table function | `(props,dom,domList:{ toolbar,alert,table}) => ReactNode` | - |
| toolbar | pass through `ListToolBar` configuration items | [ListToolBarProps](#listtoolbarprops) | - |
| tableExtraRender | Custom table body functions | `(props: ProTableProps<T, U>, dataSource: T[]) => ReactNode;` | - |
| manualRequest | Whether or not the first request needs to be triggered manually, with `true` not hiding the search form | `boolean` | false |
| editable | Configuration for editable tables | [TableRowEditable<T>](#editable) | - |
| cardBordered | Borders for Table and Search outer Card components | `boolean \| {search?: boolean, table?: boolean}` | false |

#### RecordCreator

| property | description | type | default |
| --- | --- | --- | --- |
| record | The row to be added, generally containing a unique key | `T` | `{}` |
| position | where the row should be added, at the beginning or at the end | `top` \| `bottom` | `bottom` |
| (... .buttonProps) | antd's [ButtonProps](https://ant.design/components/button-cn/#API) | ButtonProps | - |

#### Search Search form

| Properties | Description | Type | Default |
| --- | --- | --- | --- |
| filterType | filterFormType | `'query'` \| `'light'` | `'query'` |
| searchText | the text of the query button | `string` | query |
| resetText | The text of the reset button | `string` | reset |
| submitText | the text of the submit button | `string` | submit |
| labelWidth | The width of the label | `'number'` \| `'auto'` | 80 |
| span | Configure the number of columns in the query form | `'number'` \| [`'ColConfig'`](#ColConfig) | defaultColConfig |
| collapseRender | render of the collapse button | `(collapsed: boolean,showCollapseButton?: boolean,) => ReactNode` | - |
| defaultCollapsed | whether to collapse by default | `boolean` | true |
| collapsed | collapsed or not | `boolean` | - |
| onCollapse | The event of the collapsed button | `(collapsed: boolean) => void;` | - |
| optionRender | Custom action bar | `((searchConfig,formProps,dom) => ReactNode[])\|`false` | - |

### editable edit line configuration

| property | description | type | default |
| --- | --- | --- | --- |
| type | The type of editable form, single or multiple | `single` \| `multiple` | - |
| editableKeys | The row being edited, a controlled property. The default `key` will use the `rowKey` configuration, if not configured it will use `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 savedd | `(key: Key, row: T,originRow:T,newLine?:newLineConfig) => Promise<boolean>` | - |
| onDelete | Triggered when a line is deleted | `(key: Key, row: T) => Promise<boolean>` | - |
| onCancel | Triggered when you cancel editing a line | `(key: Key, row: T,newLine?:newLineConfig) => Promise<boolean>` | - |
| actionRender | Customize the action bar for edit mode | `(row: T, config: ActionRenderConfig<T>) => ReactNode[]` | - |
| deletePopconfirmMessage | popup confirmation message when deleting | `ReactNode` | `Delete this row?` |
| onlyOneLineEditorAlertMessage | Message that only one line can be edited | `ReactNode` | `Only one line can be edited at a time` |
| onlyAddOneLineAlertMessage | A prompt that can only add one line at a time | `ReactNode` | `Can only add one line at a time` |

#### ColConfig

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

## Install

Using npm:

```bash
$ npm install --save  @plasmicapp/pro-table
```

or using yarn:

```bash
$ yarn add @plasmicapp/pro-table
```

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