ProTable API

ProTable is an enhanced table component built on top of Ant Design Table with advanced features like data fetching, column state management, and integrated search forms.

ProTableProps

columns

ProColumns[]

Column configuration with extended features beyond standard Ant Design columns.

request

function

A method to fetch dataSource from the server.

(params: U & {
  pageSize?: number;
  current?: number;
  keyword?: string;
}, sort: Record<string, SortOrder>, filter: Record<string, FilterValue>) => Promise<RequestData<DataSource>>

params

Additional parameters for the request. Modifying this will trigger a reload.

Show Example

<ProTable params={{ userId: currentUser.id }} />

dataSource

DataSource[]

Static data source for the table (alternative to using request).

defaultData

DataSource[]

Default data to display before request completes.

actionRef

React.Ref<ActionType>

Reference to control the table programmatically.

Show ActionType Methods

reload() - Reload table data
reset() - Reset table and form state
clearSelected() - Clear row selection
reloadAndRest() - Reload data and reset to page 1
setPageInfo(pageInfo) - Set pagination info
scrollTo(config) - Scroll to specific position
fullScreen() - Toggle fullscreen mode

formRef

FormInstance

Reference to the search form instance.

Configuration for the list toolbar.

toolBarRender

function | false

Render function for custom toolbar actions.

(action: ActionType, rows: DataSource[]) => React.ReactNode[]

optionsRender

function

Render function for the options area (density, column settings, etc.).

false | SearchConfig

Configuration for the search form. Set to false to disable.

Show SearchConfig Properties

filterType?: 'query' | 'light' - Type of filter form
searchText?: string - Text for search button
resetText?: string - Text for reset button
submitText?: string - Text for submit button
labelWidth?: number | 'auto' - Label width
span?: number - Column span for form items
collapsed?: boolean - Whether form is collapsed
collapseRender?: function - Custom render for collapse button
optionRender?: function - Custom render for form actions

form

ProFormProps & QueryFilterProps

Configuration for the search form (applies to both form type and search form).

dateFormatter

string | number | function | false

default:"string"

How to format dates in the request.

"string" - Format as YYYY-MM-DD
"number" - Format as timestamp
false - No formatting
function - Custom formatter

beforeSearchSubmit

function

Transform search form data before submission.

(params: Partial<U>) => any

onLoad

function

Callback triggered after data is loaded.

(dataSource: DataSource[]) => void

onLoadingChange

function

Callback triggered when loading state changes.

(loading: boolean | SpinProps) => void

onRequestError

function

Callback triggered when request fails.

(e: Error) => void

onSubmit

function

Callback triggered when search form is submitted.

(params: U) => void

onReset

function

Callback triggered when search form is reset.

() => void

postData

function

Process data after request returns.

(data: any[]) => any[]

columnsState

ColumnStateType

Configuration for column state persistence.

Show ColumnStateType Properties

persistenceKey?: string - Key for storage
persistenceType?: 'localStorage' | 'sessionStorage' - Storage type
defaultValue?: Record<string, ColumnsState> - Default column state
value?: Record<string, ColumnsState> - Controlled column state
onChange?: (map: Record<string, ColumnsState>) => void - Change callback

options

OptionConfig | false

default:"{ reload: true, density: true, setting: true }"

Configuration for table options (reload, density, column settings).

Show OptionConfig Properties

reload?: boolean | function - Show reload button
density?: boolean - Show density adjustment
setting?: boolean - Show column settings
fullScreen?: boolean - Show fullscreen toggle

rowSelection

TableRowSelection | false

Row selection configuration (extends Ant Design rowSelection).Additional properties:

alwaysShowAlert?: boolean - Always show selection alert

tableAlertRender

AlertRenderType

Custom render for the selection alert.

(props: {
  selectedRowKeys: Key[];
  selectedRows: DataSource[];
  onCleanSelected: () => void;
}) => React.ReactNode

tableAlertOptionRender

AlertRenderType

Custom render for selection alert actions.

editable

RowEditableConfig

Configuration for editable rows.

Show RowEditableConfig Properties

type?: 'single' | 'multiple' - Edit mode
form?: FormInstance - Form instance
editableKeys?: Key[] - Controlled editable keys
onChange?: (editableKeys: Key[], editableRows: DataSource[]) => void
onSave?: (key: Key, row: DataSource) => Promise<void> - Save callback
onDelete?: (key: Key, row: DataSource) => Promise<void> - Delete callback
onCancel?: (key: Key, row: DataSource) => void - Cancel callback
actionRender?: function - Custom action render

onDataSourceChange

function

Callback when data source changes (for editable table).

(dataSource: DataSource[]) => void

cardProps

ProCardProps | false

Props for the outer card wrapper. Set to false to disable card.

cardBordered

boolean | Bordered

Border configuration for search form and table card.

type Bordered = boolean | { search?: boolean; table?: boolean }

ghost

boolean

default:"false"

Ghost mode - removes card padding and background.

headerTitle

React.ReactNode

Title in the top left corner.

Tooltip for the header title.

tableRender

function

Custom render for the entire table.

(props: ProTableProps, defaultDom: React.ReactNode, domList: {
  toolbar: React.ReactNode;
  alert: React.ReactNode;
  table: React.ReactNode;
}) => React.ReactNode

tableViewRender

function

Custom render for the table view (used internally by ProList).

tableExtraRender

function

Render extra content between search form and table.

(props: ProTableProps, dataSource: DataSource[]) => React.ReactNode

Custom render for the search form.

(props: ProTableProps, defaultDom: JSX.Element) => React.ReactNode

tableClassName

string

ClassName for the table wrapper.

tableStyle

React.CSSProperties

Style for the table wrapper.

columnEmptyText

string | false

default:"-"

Text to display when cell value is empty.

polling

number | function

Polling interval in milliseconds. Minimum is 2000ms.

number | ((dataSource: DataSource[]) => number)

manualRequest

boolean

default:"false"

Whether to manually trigger the request.

revalidateOnFocus

boolean

default:"false"

Auto reload when window gains focus (only works with request).

debounceTime

number

default:"10"

Debounce time for form changes in milliseconds.

defaultSize

SizeType

Default table size.

type SizeType = 'small' | 'middle' | 'large'

onSizeChange

function

Callback when table size changes.

(size: DensitySize) => void

type

ProSchemaComponentTypes

default:"table"

Component type for schema rendering.

name

NamePath

Name for editable table to communicate with form directly.

ErrorBoundary

React.ComponentClass | false

Custom error boundary component.

ProColumns

Extends Ant Design’s ColumnType with additional properties.

dataIndex

string | string[]

required

Data index for the column.

title

React.ReactNode | function

Column title.

valueType

ProFieldValueType

default:"text"

Type of the value for rendering and editing.

Show Available Value Types

text, textarea, date, dateTime, dateWeek, dateMonth, dateQuarter, dateYear, dateRange, dateTimeRange, time, timeRange, select, checkbox, radio, radioButton, progress, money, percent, digit, digitRange, second, code, jsonCode, rate, switch, option, password, image, cascader, treeSelect, color, segmented, fromNow, avatar, index, indexBorder

valueEnum

Record<string, any> | Map<string, any>

Value enum for mapping values to display text.

fieldProps

any

Props passed to the field component.

formItemProps

FormItemProps

Props for the Form.Item wrapper.

render

function

Custom render for the cell in read mode.

(text: any, record: T, index: number, action: ActionType, schema: ProSchema) => React.ReactNode

renderText

function

Transform the value before rendering.

(text: any, record: T, index: number, action: ActionType) => any

renderFormItem

function

Custom render for the form field in edit mode.

boolean | { transform: function }

default:"true"

Configuration for search form.

false - Hide in search form
transform - Transform value before submission

hideInTable

boolean

default:"false"

Hide column in table.

hideInForm

boolean

default:"false"

Hide in create form.

hideInSearch

boolean

default:"false"

Hide in search form.

hideInSetting

boolean

default:"false"

Hide in column settings.

hideInDescriptions

boolean

default:"false"

Hide in descriptions.

order

number

Sort order in form (higher values appear first).

index

number

Index for the column.

colSize

number

default:"1"

Number of grid columns the form item occupies.

initialValue

any

Initial value for search form.

ellipsis

boolean | { showTitle?: boolean }

Whether to show ellipsis for long text.

copyable

boolean

default:"false"

Whether the value is copyable.

Tooltip for the column header.

filters

boolean | ColumnFilterItem[]

Filter menu items.

onFilter

boolean | function

Filter function. Set to false to disable local filtering.

sorter

boolean | string | CompareFn | ProSorter

Sorter configuration.

boolean - Enable/disable sorting
string - Field name for remote sorting
function - Local compare function
object - Advanced sorter config

editable

boolean | function

Whether the column is editable.

boolean | ((text: any, record: T, index: number) => boolean)

readonly

boolean

default:"false"

Whether the column is readonly.

disable

boolean | { checkbox: boolean }

Disable column settings.

listSlot

string

List item slot for ProList.Options: title, subTitle, avatar, description, content, actions, aside, type

request

function

Async function to load remote data for select/cascader fields.

(params?: any) => Promise<{ label: React.ReactNode; value: any; [key: string]: any }[]>

params

any

Parameters for the request function.

debounceTime

number

default:"10"

Debounce time for request in milliseconds.

RequestData

Return type for the request function.

type RequestData<T> = {
  data: T[];
  success?: boolean;
  total?: number;
} & Record<string, any>;

data

T[]

required

Array of data items.

success

boolean

Whether the request was successful.

total

number

Total number of items (for pagination).

Usage Examples

Basic Usage
With Search Form
With ActionRef

import { ProTable } from '@ant-design/pro-components';

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    valueType: 'text',
  },
  {
    title: 'Age',
    dataIndex: 'age',
    valueType: 'digit',
  },
];

export default () => {
  return (
    <ProTable
      columns={columns}
      request={async (params, sort, filter) => {
        const response = await fetch('/api/users');
        const data = await response.json();
        return {
          data: data.list,
          success: true,
          total: data.total,
        };
      }}
    />
  );
};

<ProTable
  columns={[
    {
      title: 'Name',
      dataIndex: 'name',
      search: true,
    },
    {
      title: 'Status',
      dataIndex: 'status',
      valueType: 'select',
      valueEnum: {
        active: { text: 'Active', status: 'Success' },
        inactive: { text: 'Inactive', status: 'Default' },
      },
    },
  ]}
  search={{
    labelWidth: 'auto',
  }}
  request={async (params) => {
    // params includes search form values
    return fetchData(params);
  }}
/>

import { useRef } from 'react';

const actionRef = useRef();

return (
  <>
    <Button onClick={() => actionRef.current?.reload()}>
      Reload
    </Button>
    <ProTable
      actionRef={actionRef}
      columns={columns}
      request={fetchData}
    />
  </>
);

Components API

Form Fields API

Utilities

ProTable

ProTable API

ProTableProps

ProColumns

RequestData

Usage Examples

Build docs developers (and LLMs) love

Components API

Form Fields API

Utilities

​ProTable API

​ProTableProps

​ProColumns

​RequestData

​Usage Examples

Build docs developers (and LLMs) love

ProTable API

ProTableProps

ProColumns

RequestData

Usage Examples