npm i @bicitech-design/pro-table


🏆 Use Ant Design like a Pro!

by ant-design

2.78.16 (see all)License:MITTypeScript:Built-In
npm i @bicitech-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.

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 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
  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;
  ) => {
    // 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,


requestMethod to get dataSource(params?: {pageSize,current},sort,filter) => {data,success,total}-
paramsredundant parameters for request queries, triggering a reload if they changeobject-
postDataProcesses the data obtained by request(data: T[]) => T[]-
defaultDataThe default dataT[]-
actionRefA reference to the Table action for custom triggeringMutableRefObject<FormInstance>-
formRefA reference to the form instance of the query form, for some flexible configurationMutableRefObject<ActionType>-
toolBarRenderRenders the toolbar, supports returning a dom array, and will automatically add margin-right(action) => ReactNode[]-
onLoadTriggered when data is loaded, 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-
className of the encapsulated tablestring-
tableStyleThe style of the wrapped tableCSSProperties-
optionstable toolbar, not shown when set to false{{ fullScreen: boolean \| function, reload: boolean \| function,setting: true }}`{ fullScreen: true, reload:true, setting: true}``
searchWhether to display the search form, pass in the object for the search form configurationfalse| SearchConfigtrue
dateFormatterConverts moment format data to a specific type, false does not convert"string" | "number" | ((value: Moment, valueType: string) => string | number) | false"string"
beforeSearchSubmitmake some changes before searching(params:T)=>T-
onSizeChangetable size changed(size: 'default' \| 'middle' \| 'small') => void-
typepro-table type"form"-
formconfiguration of antd formFormProps-
onSubmitTriggered when the form is submitted(params: U) => void-
onResetTriggered when resetting the form() => void-
columnEmptyTextdisplay when empty, display when not set -, false to disable this functionstring | falsefalse
tableRenderCustom rendering table function(props,dom,domList:{ toolbar,alert,table}) => ReactNode-
toolbarpass through ListToolBar configuration itemsListToolBarProps-
tableExtraRenderCustom table body functions(props: ProTableProps<T, U>, dataSource: T[]) => ReactNode;-
manualRequestWhether or not the first request needs to be triggered manually, with true not hiding the search formbooleanfalse
editableConfiguration for editable tablesTableRowEditable-
cardBorderedBorders for Table and Search outer Card componentsboolean \| {search?: boolean, table?: boolean}false


recordThe row to be added, generally containing a unique keyT{}
positionwhere the row should be added, at the beginning or at the endtop | bottombottom
(... .buttonProps)antd's ButtonPropsButtonProps-

Search Search form

filterTypefilterFormType'query' | 'light''query'
searchTextthe text of the query buttonstringquery
resetTextThe text of the reset buttonstringreset
submitTextthe text of the submit buttonstringsubmit
labelWidthThe width of the label'number' | 'auto'80
spanConfigure the number of columns in the query form'number' | 'ColConfig'defaultColConfig
collapseRenderrender of the collapse button(collapsed: boolean,showCollapseButton?: boolean,) => ReactNode-
defaultCollapsedwhether to collapse by defaultbooleantrue
collapsedcollapsed or notboolean-
onCollapseThe event of the collapsed button(collapsed: boolean) => void;-
optionRenderCustom action bar((searchConfig,formProps,dom) => ReactNode[])\|false`-

editable edit line configuration

typeThe type of editable form, single or multiplesingle | multiple-
editableKeysThe 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 rowKeyKey[]-
onChangetriggered when row data is modified(editableKeys: Key[], editableRows: T[]) => void-
onSaveTriggered when a row is savedd(key: Key, row: T,originRow:T,newLine?:newLineConfig) => Promise<boolean>-
onDeleteTriggered when a line is deleted(key: Key, row: T) => Promise<boolean>-
onCancelTriggered when you cancel editing a line(key: Key, row: T,newLine?:newLineConfig) => Promise<boolean>-
actionRenderCustomize the action bar for edit mode(row: T, config: ActionRenderConfig<T>) => ReactNode[]-
deletePopconfirmMessagepopup confirmation message when deletingReactNodeDelete this row?
onlyOneLineEditorAlertMessageMessage that only one line can be editedReactNodeOnly one line can be edited at a time
onlyAddOneLineAlertMessageA prompt that can only add one line at a timeReactNodeCan only add one line at a time


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


Using npm:

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

or using yarn:

$ yarn add @bicitech-design/pro-table



GitHub Stars



7mos ago








24d ago
No alternatives found
No tutorials found
Add a tutorial

Rate & Review

No reviews found
Be the first to rate