ProTable - Advanced Tables

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.

Thanks to ProForm's capabilities, ProForm can take many forms, switch between query form types, set up deformations to become a simple Form form, perform new creation, etc.

When to Use

When your forms need to interact with the server or need multiple cell styles, ProTable is the right choice.

API

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.

<ProTable
  // 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
    { current, pageSize, ...params },
    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 {
      data: { result: data, total },
    } = await axios.get<{
      result: Record<string, unknown>[];
      total: number;
    }>('/api', {
      params: { page: current, pageSize, ...params },
    });
    return {
      data,
      // not passed will use the length of the data, if it is paged you must pass
      total,
      // Please return true for success.
      // otherwise the table will stop parsing the data, even if there is data
      success: true,
    };
  }}
/>

Attributes

| Name | 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 | - | | cardBordered | Border of Card components around Table and Search | boolean \| {search?: boolean, table?: boolean} | false | | cardProps | Card's props which wrap the Table, not displayed when set to false | false | CardProps | - | | toolbar | Transparent transmission of ListToolBar configuration items, not displayed when set to false | false | ListToolBarProps | | | options | table toolbar, not displayed when set to false | {{ reload: boolean \| function, density?: boolean, setting: boolean, fullScreen: boolean \| function }} | { reload :true, density: true, setting: true } |

Slots

| Name | Description | Tag | | --- | --- | --- | | actions | Render toolbar actions area | v-slot:actions | | settings | Render toolbar settings area, will overwrite the options | v-slot:settings |

Events

| Name | Description | Arguments | | --- | --- | --- | | load | Triggered after the data is loaded, it will be triggered multiple times | (dataSource: T[]) => void | | requestError | Triggered when data loading fails | (error: Error) => void |

ListToolbar

Toolbar section for customizing forms.

ListToolBarProps

Toolbar configuration properties for lists and tables

| Parameters | Description | Type | Default | | --- | --- | --- | --- | | title | title | not implemented | - | | subTitle | subTitle | not implemented | - | | description | description | not implemented | - | | search | query area | not implemented | - | | actions | actions area | false \| VNode[] | - | | settings | settings area | false \| (VNode \| Setting)[] | - | | filter | The filter area, usually used with LightFilter | not implemented | - | | multipleLine | Whether to display multiple lines | not implemented | - | | menu | menu configuration | not implemented | - | | tabs | Tabs configuration, only valid if multipleLine is true | not implemented | - |

Setting

| Parameters | Description | Type | Default | | --- | --- | --- | --- | | icon | icon | ReactNode | - | | tooltip | tooltip Description | string | - | | key | operation unique identifier | string | - | | onClick | set to be triggered | (key: string)=>void | - |