3.15.2 • Published 2 days ago

@ant-design/pro-table v3.15.2

Weekly downloads
12,481
License
MIT
Repository
github
Last release
2 days ago

@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.

npm.io

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<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

PropertyDescriptionTypeDefault Value
requestHow to get dataSource(params?: {pageSize,current},sort,filter) => {data,success,total}-
paramsAdditional parameters used for request query, once changed will trigger reloadingobject-
postDataProcess the data obtained through request(data: T[]) => T[]-
defaultDataDefault dataT[]-
dataSourceTable data, protable recommends using request to loadT[]-
onDataSourceChangeTriggered when Table data changes(dataSource: T[]) => void-
actionRefReference to Table action for custom triggeringMutableRefObject<ActionType>-
formRefThe form instance of the query form can be obtained for some flexible configurationMutableRefObject<FormInstance>-
toolBarRenderRender toolbar, support returning a dom array, will automatically increase margin-right(action) => ReactNode[]-
onLoadTriggered after the data is loaded, it will be triggered multiple times(dataSource: T[]) => void-
onLoadingChangeTriggered when loading is modified, usually caused by network requests(loading:boolean)=>void-
onRequestErrorTriggered when data loading fails(error) => void-
tableClassNameclassName of the encapsulated tablestring-
tableStylestyle of the encapsulated tableCSSProperties-
optionstable toolbar, not displayed when set to false{{ density?: boolean, fullScreen?: boolean \| function, reload?: boolean \| function, reloadIcon?: React.ReactNode, densityIcon?: React.ReactNode, setting?: boolean \| SettingOptionType }}{ fullScreen: false, reload :true, density: true, setting: true}
searchWhether to display the search form, when the object is passed in, it is the configuration of the search formfalse | SearchConfig-
dateFormatterConvert moment format data to a specific type, false will not be converted"string" | "number" | ((value: Moment, valueType: string) => string | number) |false"string"
defaultSizeDefault sizeSizeType-
beforeSearchSubmitMake some changes before searching(params:T)=>T-
onSizeChangeThe table size has changed(size:'default' \|'middle' \|'small') => void-
typepro-table type"form"-
formantd form configurationFormProps-
onSubmitTriggered when the form is submitted(params: U) => void-
onResetTriggered when the form is reset() => void-
columnEmptyTextDisplay when it is empty, display - when it is not set, false can turn off this functionstring | falsefalse
tableRenderCustom rendering table function(props,dom,domList:{ toolbar,alert,table}) => ReactNode-
toolbarTransparent transmission of ListToolBar configuration itemsListToolBarProps-
tableExtraRenderThe main function of the custom table(props: ProTableProps<T, U>, dataSource: T[]) => ReactNode;-
manualRequestDo you need to manually trigger the first request? When configured as true, the search form cannot be hiddenbooleanfalse
editableRelated configuration of editable tableTableRowEditable-
cardBorderedBorder of Card components around Table and Searchboolean \| {search?: boolean, table?: boolean}false
ghostGhost mode, that is, whether to cancel the padding of the table content area.booleanfalse
debounceTimeDebounce timenumber10
revalidateOnFocusAutomatically re-request when the window is focusedbooleanfalse
columnsStateColumn Status Control, you can operate the display hideColumnStateType-

RecordCreator

PropertyDescriptionTypeDefault Value
recordThe row data to be added, generally contains a unique keyT{}
positionWhere does the line increase, start or endtop | bottombottom
(...buttonProps)ButtonProps of antdButtonProps

ColumnStateType

PropertyDescriptionTypeDefault
defaultValueThe default value of the column status, only for the first time. Used for resetting valueRecord <string, ColumnsState>;
valueColumn status, support controlled modeRecord <string, ColumnsState>;
onChangeColumn status After changing(value: Record <string, ColumnsState>) => void
PersistenceKeyThe key of the persistence column is used to determine if it is the same tablestring \| Number
PersistenceTypeThe type of persistence column, localStorage is also existing after closing the browser, sessionStorage closes the browser will be lostlocalStorage \| sessionStorage

Search Search form

PropertyDescriptionTypeDefault Value
filterTypeFilter form type'query' | 'light''query'
searchTextSearch button textstringSearch
resetTextreset button textstringreset
submitTextThe text of the submit buttonstringSubmit
labelWidthLabel width'number' | 'auto'80
spanConfigure the number of columns in the query form'number' | 'ColConfig'defaultColConfig
classNameEncapsulated search Form classNamestring-
collapseRenderCollapse button render((collapsed: boolean,showCollapseButton?: boolean) => ReactNode)|false-
defaultCollapsedWhether to collapse by defaultbooleantrue
collapsedcollapsedboolean-
onCollapseCollapse button event(collapsed: boolean) => void;-
optionRenderCustom action bar((searchConfig,formProps,dom) => ReactNode[])|false-
showHiddenNumWhether to show the number of hidden items after storingbooleanfalse

editable edit line configuration

PropertyDescriptionTypeDefault Value
typeType of editable table, single or multiplesingle | multiple-
formForm instance of editable form, use Form.useForm to generate and useFormInstance-
formPropsform properties can be configured, but onFinish is not supported`FormProps'-
editableKeysRow being edited, controlled attributes. The defaultkey will use the configuration of rowKey,if there is no configuration, it will use theindex, it is recommended to use rowKeyKey[]-
onChangeTriggered when row data is modified(editableKeys: Key[], editableRows: T[]) => void-
onSaveTriggered when a row is saved(key: Key, row: T,originRow:T,newLine?:newLineConfig) => Promise<any>-
saveTextText for saving a rowReact.ReactNodeSave
onDeleteTriggered when a row is deleted(key: Key, row: T) => Promise<any>-
deleteTextText for deleting a rowReact.ReactNodeDelete
onCancelTriggered when cancel editing a line(key: Key, row: T,originRow:T,newLine?:newLineConfig) => Promise<any>-
cancelTextText for canceling the editing of a rowReact.ReactNodeCancel
actionRenderCustom edit mode action bar(row: T, config: ActionRenderConfig<T>) => ReactNode[]-
deletePopconfirmMessageThe pop-up confirmation box prompt message when deletingReactNodeDelete this line?
onlyOneLineEditorAlertMessageOnly one line can be editedReactNodeOnly one line can be edited at the same time
onlyAddOneLineAlertMessageOnly one line can be added at the same timeReactNodeOnly add one line

ColConfig

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

Install

Using npm:

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

or using yarn:

$ yarn add @ant-design/pro-table
mikorab-uupm-uiumi-antdcpdm-ui-components-v2liuzy-ant-design-proreact-antd-ssr-spa-demoelena-libresetjs-remcpdm-componentstuyeetablerayplus_fus_frontyw-goodssamtools-web-template@jshos/antant-views@resetjs/remxh-common-pcksimple-antd-management-fast-framework@huimei/huimei-designdumifile@infini-soft/contactssd-components-react@watasi/wuicimc-components@jiankeyihao/pro-componentscem-ui-dx@everything-registry/sub-chunk-69@digitalzz/antd-lowcode-materialskreakin-rbaclgt-uihm-web-componentsgrazy-protablegrazy-tablelayout_antdjad-quickjiguang-lowcode-componentsjostoolsmytest-abcnnusercentermisyuanmisyuan-antdmy-lowcode-componentsmuy17examplenext-business-componentsm-demolreact-componentmg-es-tablensn-pagensn-complyj-lowcode-materialmatecomponentseditformfordnddynamic-onestopeasycc-rc-4eaa-bzs-componentduliday-ftfdtusercenterdtusercentercompeip-formily-pluginsgs-notebookgtmis-ant-componentsfe-antd-wealth-mgtfe-basis-framefactory-generate-clifitech-react-sheetfhxumihedelibpublic_loginprotable-plusqlqz-framepopfex-cloud-designreact-min-modelowenflyowenfly-bioss-uipaxy-uipm-common-componentsreact-admin-kitzs-first-npm-antzy-web-comps@gui-one/material@gui-one/material-printxpodxiongdemo@hemyn/web-componentszd_module_for_test@huhuche/antd-materials@hosoft/hos-admin-common@hosoft/hos-plugin-auto-crud-page@jjz-ui/pc@hz-iris/pro-list@ice/antd-pro-scaffold@iced/skeletonuat-form-builderuat-lowcode-componentvia-test-rbacunified-login-centerwallbvzhangdev_fta_clientview_investment_overview@medisys/component@infinitebrahmanuniverse/nolb-_ant-
3.15.2

2 days ago

3.15.1

9 days ago

3.15.0

14 days ago

3.14.2

2 months ago

3.14.1

2 months ago

3.14.0

2 months ago

3.13.13

2 months ago

3.13.14

2 months ago

3.13.12

4 months ago

3.13.11

4 months ago

3.13.9

4 months ago

3.13.4

5 months ago

3.13.6

4 months ago

3.13.5

4 months ago

3.13.8

4 months ago

3.13.7

4 months ago

3.13.10

4 months ago

3.13.2

5 months ago

3.13.1

5 months ago

3.13.3

5 months ago

3.13.0

5 months ago

3.12.1

7 months ago

3.12.0

7 months ago

3.9.1

9 months ago

3.9.0

9 months ago

3.10.1

8 months ago

3.10.0

8 months ago

3.10.3

8 months ago

3.10.2

8 months ago

3.12.3

7 months ago

3.12.2

7 months ago

3.8.3

9 months ago

3.12.5

6 months ago

3.12.4

7 months ago

3.12.7

6 months ago

3.12.6

6 months ago

3.12.9

6 months ago

3.12.8

6 months ago

3.11.0

7 months ago

3.11.1

7 months ago

3.12.10

6 months ago

3.12.12

6 months ago

3.12.11

6 months ago

3.12.14

6 months ago

3.12.13

6 months ago

3.12.15

5 months ago

3.10.5

8 months ago

3.10.4

8 months ago

3.10.6

8 months ago

3.7.5

10 months ago

3.7.4

10 months ago

3.7.3

10 months ago

3.7.2

10 months ago

3.7.9

10 months ago

3.7.8

10 months ago

3.7.7

10 months ago

3.7.6

10 months ago

3.7.11

10 months ago

3.7.10

10 months ago

3.8.0

9 months ago

3.8.2

9 months ago

3.8.1

9 months ago

3.7.1

10 months ago

3.7.0

10 months ago

3.6.2

11 months ago

3.6.6

11 months ago

3.6.5

11 months ago

3.6.4

11 months ago

3.6.3

11 months ago

3.6.9

11 months ago

3.6.8

11 months ago

3.6.7

11 months ago

3.6.11

11 months ago

3.6.10

11 months ago

3.2.13

1 year ago

3.2.14

1 year ago

3.6.1

1 year ago

3.6.0

1 year ago

3.5.2

1 year ago

3.5.1

1 year ago

3.5.0

1 year ago

3.4.0

1 year ago

3.3.1

1 year ago

3.3.0

1 year ago

3.3.2

1 year ago

3.2.9

1 year ago

3.2.8

1 year ago

3.2.12

1 year ago

3.2.11

1 year ago

3.2.10

1 year ago

3.2.2

1 year ago

3.2.1

1 year ago

3.2.0

1 year ago

3.2.6

1 year ago

3.2.5

1 year ago

3.2.4

1 year ago

3.2.3

1 year ago

3.2.7

1 year ago

3.1.3

1 year ago

3.1.2

1 year ago

3.1.1

1 year ago

3.1.0

1 year ago

3.1.7

1 year ago

3.1.6

1 year ago

3.1.5

1 year ago

3.1.4

1 year ago

3.1.9

1 year ago

3.1.8

1 year ago

2.80.8

1 year ago

3.0.0-alpha.43

1 year ago

3.0.12

1 year ago

3.0.13

1 year ago

3.0.16

1 year ago

3.0.17

1 year ago

3.0.14

1 year ago

3.0.15

1 year ago

3.0.21

1 year ago

3.0.22

1 year ago

3.0.20

1 year ago

3.0.18

1 year ago

3.0.19

1 year ago

2.80.7

1 year ago

3.0.11

2 years ago

2.79.0

2 years ago

3.0.4

2 years ago

3.0.3

2 years ago

3.0.2

2 years ago

3.0.1

2 years ago

3.0.8

2 years ago

3.0.7

2 years ago

3.0.6

2 years ago

3.0.5

2 years ago

3.0.0

2 years ago

3.0.9

2 years ago

2.80.4

2 years ago

2.80.3

2 years ago

2.80.2

2 years ago

2.80.6

2 years ago

2.80.1

2 years ago

2.80.0

2 years ago

3.0.10

2 years ago

2.78.0

2 years ago

2.78.3

2 years ago

2.78.2

2 years ago

2.78.1

2 years ago

2.77.1

2 years ago

2.77.0

2 years ago

2.77.3

2 years ago

2.77.2

2 years ago

2.76.2

2 years ago

2.76.1

2 years ago

2.76.0

2 years ago

2.76.4

2 years ago

2.76.3

2 years ago

2.72.1

2 years ago

2.72.0

2 years ago

2.75.1

2 years ago

2.75.0

2 years ago

2.74.0

2 years ago

2.74.4

2 years ago

2.74.3

2 years ago

2.74.2

2 years ago

2.74.1

2 years ago

2.73.0

2 years ago

2.69.0

2 years ago

2.68.0

2 years ago

2.68.1

2 years ago

2.68.2

2 years ago

2.68.3

2 years ago

2.71.3

2 years ago

2.71.2

2 years ago

2.71.1

2 years ago

2.71.0

2 years ago

2.71.7

2 years ago

2.71.6

2 years ago

2.71.5

2 years ago

2.71.4

2 years ago

2.67.0

2 years ago

2.67.1

2 years ago

2.70.0

2 years ago

2.66.3

2 years ago

2.66.4

2 years ago

2.66.0

2 years ago

2.66.1

2 years ago

2.66.2

2 years ago

2.65.0

2 years ago

2.61.7

2 years ago

2.61.8

2 years ago

2.61.9

2 years ago

2.60.0

2 years ago

2.60.1

2 years ago

2.64.0

2 years ago

2.64.1

2 years ago

2.59.10

2 years ago

2.63.1

2 years ago

2.63.2

2 years ago

2.63.3

2 years ago

2.63.4

2 years ago

2.63.0

2 years ago

2.63.5

2 years ago

2.63.6

2 years ago

2.63.7

2 years ago

2.59.6

2 years ago

2.59.7

2 years ago

2.59.8

2 years ago

2.59.9

2 years ago

2.59.3

2 years ago

2.59.4

2 years ago

2.59.5

2 years ago

2.62.2

2 years ago

2.62.3

2 years ago

2.62.4

2 years ago

2.62.5

2 years ago

2.62.0

2 years ago

2.62.1

2 years ago

2.62.6

2 years ago

2.62.7

2 years ago

2.62.8

2 years ago

2.61.3

2 years ago

2.61.4

2 years ago

2.61.5

2 years ago

2.61.6

2 years ago

2.61.0

2 years ago

2.61.1

2 years ago

2.61.2

2 years ago

2.57.0

2 years ago

2.57.1

2 years ago

2.57.2

2 years ago

2.57.3

2 years ago

2.56.9

2 years ago

2.56.8

2 years ago

2.59.2

2 years ago

2.59.0

2 years ago

2.59.1

2 years ago

2.58.0

2 years ago

2.58.1

2 years ago

2.56.5

2 years ago

2.56.6

2 years ago

2.56.7

2 years ago

2.56.4

2 years ago

2.55.0-alpha.0

2 years ago

2.56.0

2 years ago

2.56.1

2 years ago

2.56.2

2 years ago

2.56.3

2 years ago

2.55.0

2 years ago

2.54.5

2 years ago

2.54.4

3 years ago

2.54.3

3 years ago

2.54.1

3 years ago

2.54.2

3 years ago

2.54.0

3 years ago

2.53.2

3 years ago

2.53.0

3 years ago

2.53.1

3 years ago

2.52.0

3 years ago

2.51.2

3 years ago

2.51.0

3 years ago

2.51.1

3 years ago

2.50.1

3 years ago

2.50.0

3 years ago

2.49.0

3 years ago

2.48.0

3 years ago

2.47.1

3 years ago

2.47.0

3 years ago

2.46.1

3 years ago

2.46.0

3 years ago

2.45.0

3 years ago

2.44.0

3 years ago

2.43.6

3 years ago

2.43.5

3 years ago

2.43.4

3 years ago

2.43.2

3 years ago

2.43.3

3 years ago

2.43.1

3 years ago

2.43.0

3 years ago

2.42.1

3 years ago

2.42.0

3 years ago

2.41.0

3 years ago

2.40.1

3 years ago

2.40.0

3 years ago

2.39.2

3 years ago

2.39.1

3 years ago

2.39.0

3 years ago

2.38.0

3 years ago

2.37.2

3 years ago

2.37.1

3 years ago

2.37.0

3 years ago

2.36.0

3 years ago

2.35.1

3 years ago

2.35.0

3 years ago

2.34.5

3 years ago

2.34.2

3 years ago

2.34.4

3 years ago

2.34.3

3 years ago

2.34.1

3 years ago

2.34.0

3 years ago

2.33.0

3 years ago

2.32.2

3 years ago

2.32.1

3 years ago

2.32.0

3 years ago

2.31.0

3 years ago

2.30.8

3 years ago

2.30.7

3 years ago

2.30.6

3 years ago

2.30.4

3 years ago

2.30.5

3 years ago

2.30.3

3 years ago

2.30.2

3 years ago

2.30.1

3 years ago

2.30.0

3 years ago

2.29.0

3 years ago

2.28.0

3 years ago

2.27.2

3 years ago

2.27.1

3 years ago

2.27.0

3 years ago

2.26.1

3 years ago

2.26.0

3 years ago

2.25.0

3 years ago

2.25.1

3 years ago

2.24.0

3 years ago

2.23.0

3 years ago

2.22.2

3 years ago

2.22.1

3 years ago

2.22.0

3 years ago

2.21.1

3 years ago

2.21.0

3 years ago

2.20.1

3 years ago

2.20.0

3 years ago

2.19.1

3 years ago

2.19.0

3 years ago

2.18.3

3 years ago

2.18.2

3 years ago

2.18.1

3 years ago

2.18.0

3 years ago

2.17.3

3 years ago

2.17.2

3 years ago

2.17.1

3 years ago

2.17.0

3 years ago

2.16.4

3 years ago

2.16.3

3 years ago

2.16.2

3 years ago

2.16.1

3 years ago

2.16.0

3 years ago

2.15.1

3 years ago

2.15.0

3 years ago

2.14.0

3 years ago

2.13.3

3 years ago

2.13.2

3 years ago

2.13.1

3 years ago

2.13.0

3 years ago

2.12.2

3 years ago

2.12.1

3 years ago

2.12.0

3 years ago

2.11.4

3 years ago

2.11.3

3 years ago

2.11.2

3 years ago

2.11.1

3 years ago

2.11.0

3 years ago

1.2.9

3 years ago

1.2.7

3 years ago

2.10.1

3 years ago

2.10.0

3 years ago

2.9.16

3 years ago

2.9.14

3 years ago

2.9.15

3 years ago

2.9.13

3 years ago

2.9.12

3 years ago

2.9.11

3 years ago

2.9.10

3 years ago

2.9.9

3 years ago

2.9.8

3 years ago

2.9.7

3 years ago

2.9.6

3 years ago

2.9.5

3 years ago

2.9.4

3 years ago

2.9.3

3 years ago

2.9.2

3 years ago

2.9.1

3 years ago

2.9.0

3 years ago

2.8.1

4 years ago

2.8.0

4 years ago

1.2.6

4 years ago

1.2.5

4 years ago

2.7.4

4 years ago

2.7.3

4 years ago

2.7.2

4 years ago

2.7.1

4 years ago

2.7.0

4 years ago

2.6.3

4 years ago

2.6.2

4 years ago

2.6.1

4 years ago

2.6.0

4 years ago

1.2.4

4 years ago

2.5.15

4 years ago

2.5.14

4 years ago

2.5.13

4 years ago

2.5.11

4 years ago

2.5.12

4 years ago

2.5.10

4 years ago

2.5.9

4 years ago

2.5.8

4 years ago

2.5.7

4 years ago

2.5.6

4 years ago

2.5.5

4 years ago

2.5.2

4 years ago

2.5.1

4 years ago

2.5.4

4 years ago

2.5.3

4 years ago

1.2.3

4 years ago

1.2.2

4 years ago

1.2.1

4 years ago

2.5.0-beta.1

4 years ago

1.0.0-beta.3

4 years ago

2.4.4

4 years ago

2.4.3

4 years ago

2.4.2

4 years ago

1.0.0-beta.2

4 years ago

1.2.0

4 years ago

2.4.1

4 years ago

2.4.0

4 years ago

2.3.5

4 years ago

2.3.4

4 years ago

2.3.2

4 years ago

2.3.3

4 years ago

1.1.0

4 years ago

2.3.1

4 years ago

2.3.0

4 years ago

2.2.9

4 years ago

2.2.8

4 years ago

2.2.7

4 years ago

2.2.6

4 years ago

2.2.5

4 years ago

2.2.3

4 years ago

1.0.48

4 years ago

2.2.2

4 years ago

1.0.47

4 years ago

1.0.46

4 years ago

2.2.1

4 years ago

2.2.0

4 years ago

2.1.11

4 years ago

2.1.10

4 years ago

2.1.9

4 years ago

2.1.8

4 years ago

2.1.7

4 years ago

1.0.45

4 years ago

2.1.6

4 years ago

2.1.5

4 years ago

1.0.44

4 years ago

2.1.4

4 years ago

1.0.43

4 years ago

1.0.42

4 years ago

1.0.41

4 years ago

1.0.40

4 years ago

1.0.39

4 years ago

1.0.37

4 years ago

1.0.38

4 years ago

2.1.3

4 years ago

2.1.2

4 years ago

2.1.1

4 years ago

1.0.36

4 years ago

2.1.0

4 years ago

2.0.5

4 years ago

2.0.4

4 years ago

2.0.3

4 years ago

1.0.35

4 years ago

2.0.2

4 years ago

2.0.1

4 years ago

2.0.0

4 years ago

1.0.34

4 years ago

1.0.33

4 years ago

1.0.32

4 years ago

1.0.31

4 years ago

1.0.30

4 years ago

1.0.29

4 years ago

1.0.28

4 years ago

1.0.27

4 years ago

1.0.26

4 years ago

1.0.25

4 years ago

1.0.24

4 years ago

1.0.23

4 years ago

1.0.22

4 years ago

1.0.21

4 years ago

1.0.19

4 years ago

1.0.20

4 years ago

1.0.18

4 years ago

1.0.17

4 years ago

1.0.16

4 years ago

1.0.15

4 years ago

1.0.14

4 years ago

1.0.13

4 years ago

1.0.12

4 years ago

1.0.11

4 years ago

1.0.10

4 years ago

1.0.9

4 years ago

1.0.8

4 years ago

1.0.7

4 years ago

1.0.6

4 years ago

1.0.5

4 years ago

1.0.4

4 years ago

1.0.3

4 years ago

1.0.2

4 years ago

1.0.1

4 years ago

1.0.0

4 years ago