ProList API

ProList is an enhanced list component that combines ProTable features with Ant Design List, supporting data fetching, search forms, and flexible item rendering.

ProListProps

Extends ProTable props and Ant Design List props.

columns

ProColumns[]

Column configuration with listSlot property to map data to list item slots.

Show Available List Slots

title - Item title
subTitle - Item subtitle
avatar - Item avatar
description - Item description
content - Item main content
actions - Item action buttons
aside - Item aside content
type - Item type indicator

metas

ProListMetas

deprecated

Legacy API for mapping data to list item parts. Use columns with listSlot instead.

Show Migration Example

// Old API (deprecated)
<ProList
  metas={{
    title: { dataIndex: 'name' },
    avatar: { dataIndex: 'avatar' },
  }}
/>

// New API (recommended)
<ProList
  columns={[
    { title: 'Name', dataIndex: 'name', listSlot: 'title' },
    { dataIndex: 'avatar', listSlot: 'avatar' },
  ]}
/>

request

function

Method to fetch data from the server.

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

dataSource

T[]

Static data source for the list.

rowKey

string | function

default:"key"

Unique key for each list item.

string | ((record: T) => React.Key)

actionRef

React.Ref<ActionType>

Reference to control the list programmatically.Methods:

reload() - Reload list data
reset() - Reset list and form state
clearSelected() - Clear row selection

List Display

itemLayout

'horizontal' | 'vertical'

default:"horizontal"

Layout of list items.

horizontal - Horizontal layout with avatar/content side by side
vertical - Vertical layout with content stacked

split

boolean

default:"true"

Whether to show divider between items.

variant

'outlined' | 'borderless'

default:"borderless"

List variant.

outlined - List with border
borderless - List without border

size

'default' | 'large' | 'small'

default:"default"

List size.

grid

ListGridType

Grid layout configuration.

type ListGridType = {
  gutter?: number | [number, number];
  column?: number;
  xs?: number;
  sm?: number;
  md?: number;
  lg?: number;
  xl?: number;
  xxl?: number;
}

Show Example

<ProList
  grid={{
    gutter: 16,
    xs: 1,
    sm: 2,
    md: 3,
    lg: 3,
    xl: 4,
    xxl: 4,
  }}
/>

pagination

false | PaginationProps

default:"false"

Pagination configuration. Set to false to disable.

boolean

default:"false"

Loading state for the list.

loadMore

React.ReactNode

Custom load more component.

header

React.ReactNode

List header content.

footer

React.ReactNode

List footer content.

locale

ListLocale

Locale configuration.

type ListLocale = {
  emptyText?: React.ReactNode;
}

Item Rendering

itemRender

function

Custom render for entire list item.

(item: T, index: number, defaultDom: React.ReactElement) => React.ReactNode

The defaultDom parameter is the default rendered list item that you can customize or replace.

itemHeaderRender

function

Custom render for list item header.

(item: T, index: number) => React.ReactNode

itemTitleRender

function

Custom render for list item title.

(item: T, index: number) => React.ReactNode

rowClassName

string | function

Class name for list item row.

string | ((item: T, index: number) => string)

onRow

function

Props to add to the list item wrapper element.

(record: T, index: number) => React.HTMLAttributes<HTMLElement>

onItem

function

Props to add to the list item content element.

(record: T, index: number) => React.HTMLAttributes<HTMLElement>

itemCardProps

CheckCardProps

Props for selectable card items (when using CheckCard).

false | SearchConfig

default:"false"

Search form configuration. Inherited from ProTable.Set to object to enable:

<ProList
  search={{
    filterType: 'light',
  }}
/>

Toolbar configuration.

toolBarRender

function | false

Custom render for toolbar actions.

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

options

OptionConfig | false

default:"false"

Table options configuration (reload, density, settings).

headerTitle

React.ReactNode

Title in the toolbar.

Tooltip for the header title.

Selection

rowSelection

TableRowSelection | false

default:"false"

Row selection configuration.

Show TableRowSelection Properties

selectedRowKeys?: Key[] - Controlled selected keys
onChange?: (selectedRowKeys: Key[], selectedRows: T[]) => void
getCheckboxProps?: (record: T) => object - Checkbox props
selections?: boolean | SelectionItem[] - Selection dropdown
type?: 'checkbox' | 'radio'

expandable

ExpandableConfig

Expandable row configuration.

Card Props

cardProps

ProCardProps | false

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

cardBordered

boolean | Bordered

Border configuration for the card.

ghost

boolean

default:"false"

Ghost mode - removes card padding and background.

Data Handling

Inherited from ProTable:

params

Additional request parameters. Changes trigger reload.

postData

function

Process data after request.

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

onLoad

function

Callback after data loads.

(dataSource: T[]) => void

onRequestError

function

Callback when request fails.

(e: Error) => void

polling

number | function

Polling interval in milliseconds.

manualRequest

boolean

default:"false"

Manually trigger request.

revalidateOnFocus

boolean

default:"false"

Auto reload when window gains focus.

debounceTime

number

default:"10"

Debounce time for form changes in milliseconds.

Usage Examples

Basic List
Grid Layout
With Search
Custom Item Render
With Selection

import { ProList } from '@ant-design/pro-components';
import { Avatar } from 'antd';

export default () => (
  <ProList
    columns={[
      {
        dataIndex: 'avatar',
        listSlot: 'avatar',
        valueType: 'avatar',
      },
      {
        title: 'Name',
        dataIndex: 'name',
        listSlot: 'title',
      },
      {
        dataIndex: 'description',
        listSlot: 'description',
      },
      {
        dataIndex: 'actions',
        listSlot: 'actions',
        valueType: 'option',
        render: (_, record) => [
          <a key="edit">Edit</a>,
          <a key="delete">Delete</a>,
        ],
      },
    ]}
    request={async (params) => {
      const response = await fetch('/api/users');
      const data = await response.json();
      return {
        data: data.list,
        success: true,
        total: data.total,
      };
    }}
  />
);

<ProList
  grid={{
    gutter: 16,
    xs: 1,
    sm: 2,
    md: 3,
    lg: 3,
    xl: 4,
    xxl: 4,
  }}
  columns={[
    {
      dataIndex: 'title',
      listSlot: 'title',
    },
    {
      dataIndex: 'image',
      listSlot: 'avatar',
      valueType: 'image',
    },
    {
      dataIndex: 'description',
      listSlot: 'description',
    },
  ]}
  dataSource={data}
/>

<ProList
  search={{
    filterType: 'light',
  }}
  toolBarRender={() => [
    <Button key="create" type="primary">
      Create
    </Button>,
  ]}
  columns={[
    {
      title: 'Name',
      dataIndex: 'name',
      listSlot: 'title',
    },
    {
      title: 'Status',
      dataIndex: 'status',
      valueType: 'select',
      valueEnum: {
        active: { text: 'Active', status: 'Success' },
        inactive: { text: 'Inactive', status: 'Default' },
      },
    },
  ]}
  request={fetchData}
/>

<ProList
  itemRender={(item, index, defaultDom) => (
    <Card hoverable>
      {defaultDom}
    </Card>
  )}
  columns={[
    {
      dataIndex: 'title',
      listSlot: 'title',
    },
    {
      dataIndex: 'content',
      listSlot: 'content',
    },
  ]}
  dataSource={data}
/>

const [selectedRows, setSelectedRows] = useState([]);

<ProList
  rowSelection={{
    selectedRowKeys: selectedRows,
    onChange: (keys, rows) => {
      setSelectedRows(keys);
    },
  }}
  columns={columns}
  dataSource={data}
/>

Components API

Form Fields API

Utilities

ProList

ProList API

ProListProps

List Display

Item Rendering

Selection

Card Props

Data Handling

Usage Examples

Build docs developers (and LLMs) love

Components API

Form Fields API

Utilities

​ProList API

​ProListProps

​List Display

​Item Rendering

​Search & Toolbar

​Selection

​Card Props

​Data Handling

​Usage Examples

Build docs developers (and LLMs) love

ProList API

ProListProps

List Display

Item Rendering

Search & Toolbar

Selection

Card Props

Data Handling

Usage Examples