Skip to main content
ProTable is an enterprise-grade table component that extends Ant Design’s Table with powerful features for data management, including integrated search forms, toolbar actions, column settings, and request handling.

​
Features

  • Integrated Search: Built-in search form with multiple layouts (inline, light, query filter)
  • Request Handling: Automatic data fetching with pagination, sorting, and filtering
  • Column Management: Dynamic column show/hide with drag-and-drop reordering
  • Batch Operations: Multi-row selection with batch action support
  • Editable Rows: Inline editing with validation
  • Export & Print: Built-in data export and printing capabilities
  • State Persistence: Automatic URL state sync and local storage

​
Basic Usage

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

type DataItem = {
  id: number;
  name: string;
  status: string;
  created_at: string;
};

const columns: ProColumns<DataItem>[] = [
  {
    title: '序号',
    dataIndex: 'index',
    valueType: 'indexBorder',
    width: 48,
  },
  {
    title: '标题',
    dataIndex: 'title',
    copyable: true,
    ellipsis: true,
    search: true,
  },
  {
    title: '状态',
    dataIndex: 'state',
    valueType: 'select',
    valueEnum: {
      all: { text: '全部', status: 'Default' },
      open: { text: '未解决', status: 'Error' },
      closed: { text: '已解决', status: 'Success' },
    },
  },
  {
    title: '创建时间',
    dataIndex: 'created_at',
    valueType: 'dateTime',
    sorter: true,
  },
  {
    title: '操作',
    valueType: 'option',
    render: (_, record) => [
      <a key="view">查看</a>,
      <a key="edit">编辑</a>,
    ],
  },
];

export default () => {
  return (
    <ProTable<DataItem>
      columns={columns}
      request={async (params, sort, filter) => {
        const response = await fetch('/api/data', {
          method: 'POST',
          body: JSON.stringify({ ...params, sort, filter }),
        });
        const data = await response.json();
        return {
          data: data.list,
          success: true,
          total: data.total,
        };
      }}
      rowKey="id"
      pagination={{
        pageSize: 10,
      }}
      search={{
        labelWidth: 'auto',
      }}
      dateFormatter="string"
      headerTitle="数据表格"
      toolBarRender={() => [
        <Button key="button" icon={<PlusOutlined />} type="primary">
          新建
        </Button>,
      ]}
    />
  );
};

​
Search Form

ProTable integrates a search form that automatically generates from column configuration:

​
Search Layouts

<ProTable
  search={{
    layout: 'vertical',
    defaultCollapsed: false,
  }}
/>
Full-featured search form with collapse/expand functionality.

​
Search Configuration

const columns: ProColumns<DataItem>[] = [
  {
    title: '名称',
    dataIndex: 'name',
    // Enable search for this column
    search: true,
  },
  {
    title: '状态',
    dataIndex: 'status',
    valueType: 'select',
    valueEnum: {
      online: '在线',
      offline: '离线',
    },
    // Custom search configuration
    search: {
      transform: (value) => ({ statusCode: value }),
    },
  },
  {
    title: '创建日期',
    dataIndex: 'created',
    valueType: 'dateRange',
    // Hide in table, show only in search
    hideInTable: true,
    search: {
      transform: (value) => ({
        startTime: value[0],
        endTime: value[1],
      }),
    },
  },
];

​
Request Handling

The request function handles data fetching with automatic integration of pagination, sorting, and filtering: 
const request = async (
  params: any,
  sort: Record<string, SortOrder>,
  filter: Record<string, React.ReactText[] | null>,
) => {
  // params: { current, pageSize, ...searchFormValues }
  // sort: { columnKey: 'ascend' | 'descend' }
  // filter: { columnKey: [filterValue1, filterValue2] }
  
  const response = await fetch('/api/list', {
    method: 'POST',
    body: JSON.stringify({
      page: params.current,
      size: params.pageSize,
      ...params,
      sort,
      filter,
    }),
  });
  
  const data = await response.json();
  
  return {
    data: data.list,
    success: true,
    total: data.total,
  };
};

​
ActionRef

Use actionRef to control table behavior programmatically: 
import { useRef } from 'react';
import type { ActionType } from '@ant-design/pro-components';

const Demo = () => {
  const actionRef = useRef<ActionType>();
  
  return (
    <>
      <Button
        onClick={() => {
          // Reload table data
          actionRef.current?.reload();
        }}
      >
        刷新
      </Button>
      
      <Button
        onClick={() => {
          // Clear filters and sorters
          actionRef.current?.reset();
        }}
      >
        重置
      </Button>
      
      <Button
        onClick={() => {
          // Clear selected rows
          actionRef.current?.clearSelected();
        }}
      >
        清除选中
      </Button>
      
      <ProTable
        actionRef={actionRef}
        columns={columns}
        request={request}
      />
    </>
  );
};

​
Column Types

ProTable supports rich value types for automatic rendering: 
const columns: ProColumns<DataItem>[] = [
  // Index column with border
  { dataIndex: 'index', valueType: 'indexBorder' },
  
  // Money with currency formatting
  { dataIndex: 'amount', valueType: 'money' },
  
  // Progress bar
  { dataIndex: 'progress', valueType: 'progress' },
  
  // Date and time
  { dataIndex: 'created', valueType: 'dateTime' },
  
  // Image display
  { dataIndex: 'avatar', valueType: 'avatar' },
  
  // Status badge
  {
    dataIndex: 'status',
    valueType: 'select',
    valueEnum: {
      online: { text: '在线', status: 'Success' },
      offline: { text: '离线', status: 'Default' },
    },
  },
  
  // Code display
  { dataIndex: 'config', valueType: 'jsonCode' },
];

​
Editable Table

Enable inline editing with the editable configuration: 
import { EditableProTable } from '@ant-design/pro-components';

const Demo = () => {
  const [dataSource, setDataSource] = useState<DataItem[]>([]);
  const [editableKeys, setEditableRowKeys] = useState<React.Key[]>([]);
  
  return (
    <EditableProTable<DataItem>
      columns={columns}
      value={dataSource}
      onChange={setDataSource}
      recordCreatorProps={{
        newRecordType: 'dataSource',
        record: () => ({ id: Date.now() }),
      }}
      editable={{
        type: 'multiple',
        editableKeys,
        onChange: setEditableRowKeys,
        onSave: async (key, row) => {
          await saveData(row);
        },
        onDelete: async (key) => {
          await deleteData(key);
        },
      }}
    />
  );
};

​
Drag Sort Table

Enable row reordering with drag and drop: 
import { DragSortTable } from '@ant-design/pro-components';

const Demo = () => {
  const [dataSource, setDataSource] = useState<DataItem[]>([]);
  
  return (
    <DragSortTable
      columns={columns}
      dataSource={dataSource}
      dragSortKey="sort"
      onDragSortEnd={(newDataSource) => {
        setDataSource(newDataSource);
      }}
    />
  );
};

​
Toolbar & Actions

<ProTable
  headerTitle="用户列表"
  tooltip="展示所有注册用户信息"
  toolBarRender={() => [
    <Button key="export" icon={<DownloadOutlined />}>
      导出
    </Button>,
    <Button key="add" icon={<PlusOutlined />} type="primary">
      新建
    </Button>,
  ]}
  options={{
    setting: true,        // Column settings
    fullScreen: true,     // Full screen toggle
    reload: true,         // Reload button
    density: true,        // Density toggle
  }}
/>

​
Row Selection

const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);

<ProTable
  rowSelection={{
    selectedRowKeys,
    onChange: (keys) => setSelectedRowKeys(keys),
  }}
  tableAlertRender={({ selectedRowKeys }) => (
    <span>已选择 {selectedRowKeys.length} 项</span>
  )}
  tableAlertOptionRender={() => [
    <a key="batch-delete">批量删除</a>,
    <a key="batch-export">批量导出</a>,
  ]}
/>

​
Key Props

PropTypeDescription
columnsProColumns[]Column configuration
request(params, sort, filter) => Promise<RequestData>Data fetching function
dataSourceT[]Static data source
actionRefReact.MutableRefObject<ActionType>Action reference
searchfalse | SearchConfigSearch form configuration
toolBarRender() => React.ReactNode[]Toolbar buttons
optionsOptionsConfigTable options (reload, settings, etc)
rowKeystring | (row) => stringRow key field
paginationfalse | PaginationConfigPagination config
editableRowEditableConfigEditable configuration
ProTable extends Ant Design Table, so all Ant Design Table props are also supported.

​
Best Practices

When dataIndex is an array path like ['user', 'name'], provide a unique key for search and filters to work correctly.
Use search.debounceTime to prevent excessive requests:
<ProTable search={{ debounceTime: 300 }} />
For large datasets, enable virtual scrolling:
<ProTable scroll={{ y: 500 }} virtual />
Use manualRequest={false} and URL params for state persistence across page refreshes.

Build docs developers (and LLMs) love

Get started for freeTalk to us