@ant-design-vue/pro-table
TypeScript icon, indicating that this package has built-in type declarations

1.0.0 • Public • Published

Ant Design Pro Table

NPM version Vue Support Vue Grammar Level NPM downloads License

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.

layout

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 -

Readme

Keywords

none

Package Sidebar

Install

npm i @ant-design-vue/pro-table

Weekly Downloads

1

Version

1.0.0

License

none

Unpacked Size

2.46 MB

Total Files

57

Last publish

Collaborators

  • aibayanyu
  • sendya
  • amour1688
  • tangjinzhou