List

When To Use

A list can be used to display content related to a single subject. The content can consist of multiple elements of varying type and size.

:::warning{title=Deprecated Notice} List component has been deprecated. Will be removed in the next major version. :::

Examples

<code src="./demo/simple.tsx">Simple list</code> <code src="./demo/basic.tsx">Basic list</code> <code src="./demo/loadmore.tsx">Load more</code> <code src="./demo/vertical.tsx">Vertical</code> <code src="./demo/pagination.tsx">Pagination Settings</code> <code src="./demo/grid.tsx">Grid</code> <code src="./demo/grid-test.tsx" debug>Test Grid</code> <code src="./demo/responsive.tsx">Responsive grid list</code> <code src="./demo/infinite-load.tsx">Scrolling loaded</code> <code src="./demo/drag-sorting.tsx">Drag sorting</code> <code src="./demo/drag-sorting-handler.tsx">Drag sorting with handler</code> <code src="./demo/grid-drag-sorting.tsx">Grid Drag sorting</code> <code src="./demo/grid-drag-sorting-handler.tsx">Grid Drag sorting with handler</code> <code src="./demo/virtual-list.tsx">virtual list</code> <code src="./demo/component-token.tsx" debug>custom component token</code> <code src="./demo/spin-debug.tsx" debug>Spin loading debug</code>

API

Common props ref：Common props

Property	Description	Type	Default
bordered	Toggles rendering of the border around the list	boolean	false
dataSource	DataSource array for list	any[]	-
footer	List footer renderer	ReactNode	-
grid	The grid type of list. You can set grid to something like {gutter: 16, column: 4}	object	-
header	List header renderer	ReactNode	-
itemLayout	The layout of list	`horizontal` \| `vertical`	`horizontal`
loading	Shows a loading indicator while the contents of the list are being fetched	boolean \| SpinProps (more)	false
loadMore	Shows a load more content	ReactNode	-
locale	The i18n text including empty text	object	{emptyText: `No Data`}
pagination	Pagination config, hide it by setting it to false	boolean \| object	false
renderItem	Customize list item when using `dataSource`	(item: T, index: number) => ReactNode	-
rowKey	Item's unique value, could be an Item's key which holds a unique value of type `React.Key` or function that receives Item and returns a `React.Key`	`keyof` T \| (item: T) => `React.Key`	`"key"`
size	Size of list	`default` \| `large` \| `small`	`default`
split	Toggles rendering of the split under the list item	boolean	true

pagination

Properties for pagination.

Property	Description	Type	Default
position	The specify the position of `Pagination`	`top` \| `bottom` \| `both`	`bottom`
align	The specify the alignment of `Pagination`	`start` \| `center` \| `end`	`end`

More about pagination, please check Pagination.

List grid props

Property	Description	Type	Default	Version
column	The column of grid	number	-
gutter	The spacing between grid	number	0
xs	`<576px` column of grid	number	-
sm	`≥576px` column of grid	number	-
md	`≥768px` column of grid	number	-
lg	`≥992px` column of grid	number	-
xl	`≥1200px` column of grid	number	-
xxl	`≥1600px` column of grid	number	-
xxxl	`≥1920px` column of grid	number	-	6.3.0

List.Item

Property	Description	Type	Default	Version
actions	The actions content of list item. If `itemLayout` is `vertical`, shows the content on bottom, otherwise shows content on the far right	Array<ReactNode>	-
classNames	Semantic structure className	`Record<actions \| extra, string>`	-	5.18.0
extra	The extra content of list item. If `itemLayout` is `vertical`, shows the content on right, otherwise shows content on the far right	ReactNode	-
styles	Semantic DOM style	`Record<actions \| extra, CSSProperties>`	-	5.18.0

List.Item.Meta

Property	Description	Type	Default
avatar	The avatar of list item	ReactNode	-
description	The description of list item	ReactNode	-
title	The title of list item	ReactNode	-

Semantic DOM

Design Token

FAQ {#faq}

Is there a replacement for the deprecated List component? {#faq-listy-replacement}

In Ant Design v6, we will introduce a brand-new Listy component as the successor to List.

Listy comes with built-in virtual scrolling and places greater emphasis on flexible layout control, empowering developers to build highly customizable lists tailored to various business scenarios.

The underlying implementation, rc-listy, is already largely complete and is currently awaiting review and further adjustments by core maintainers.

Ant Design v6 will officially provide the Listy component based on rc-listy.