Ant Design

⌘ K

6.0.0-alpha.3

List

Basic list display, which can carry text, lists, pictures, paragraphs.

Importimport { List } from "antd";

GitHub

components/list Issue Open issues

Docs

Edit this page

contributors

Image Popover

Ant Design

⌘ K

6.0.0-alpha.3

List

Basic list display, which can carry text, lists, pictures, paragraphs.

Importimport { List } from "antd";

GitHub

components/list Issue Open issues

Docs

Edit this page

contributors

Image Popover

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.

Deprecated

List component has been deprecated. Will be removed in the next major version.

Examples

API

Common props ref：Common props

List

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
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	-

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

Component TokenHow to use?

Token Name	Description	Type	Default Value
avatarMarginRight	Right margin of avatar	MarginRight<string \| number> \| undefined	16
contentWidth	Width of content	string \| number	220
descriptionFontSize	Font size of description	number	14
emptyTextPadding	Padding of empty text	Padding<string \| number> \| undefined	16
footerBg	Background color of footer	string	transparent
headerBg	Background color of header	string	transparent
itemPadding	Padding of item	string	12px 0
itemPaddingLG	Padding of large item	string	16px 24px
itemPaddingSM	Padding of small item	string	8px 16px
metaMarginBottom	Margin bottom of meta	MarginBottom<string \| number> \| undefined	16
titleMarginBottom	Margin bottom of title	MarginBottom<string \| number> \| undefined	12

Global TokenHow to use?

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.

Deprecated

List component has been deprecated. Will be removed in the next major version.

Examples

Simple list

Ant Design supports a default list size as well as a large and small size.

If a large or small list is desired, set the size property to either large or small respectively. Omit the size property for a list with the default size.

Customizing the header and footer of list by setting header and footer property.

Basic list

Basic list.

Load more list with loadMore property.

Vertical

Set the itemLayout property to vertical to create a vertical list.

Pagination Settings

List pagination can be used and set through the pagination property.

Grid

Create a grid layout by setting the grid property of List.

Responsive grid list

Responsive grid list. The size property the is as same as Layout Grid.

Scrolling loaded

The example of infinite load with react-infinite-scroll-component.

Drag sorting

By using components, we can integrate List with dnd-kit to implement drag sorting function.

Drag sorting with handler

Alternatively you can implement drag sorting with handler using dnd-kit.

Grid Drag sorting

By using custom components, we can integrate List with dnd-kit to implement drag sorting function for grid layout.

Grid Drag sorting with handler

By using custom components and drag handles, we can integrate List with dnd-kit to implement drag sorting function for grid layout.

virtual list

An example of infinite & virtualized list via using rc-virtual-list.

API

Common props ref：Common props

List

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
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	-

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

Component TokenHow to use?

Token Name	Description	Type	Default Value
avatarMarginRight	Right margin of avatar	MarginRight<string \| number> \| undefined	16
contentWidth	Width of content	string \| number	220
descriptionFontSize	Font size of description	number	14
emptyTextPadding	Padding of empty text	Padding<string \| number> \| undefined	16
footerBg	Background color of footer	string	transparent
headerBg	Background color of header	string	transparent
itemPadding	Padding of item	string	12px 0
itemPaddingLG	Padding of large item	string	16px 24px
itemPaddingSM	Padding of small item	string	8px 16px
metaMarginBottom	Margin bottom of meta	MarginBottom<string \| number> \| undefined	16
titleMarginBottom	Margin bottom of title	MarginBottom<string \| number> \| undefined	12

Global TokenHow to use?

Simple list

Ant Design supports a default list size as well as a large and small size.

If a large or small list is desired, set the size property to either large or small respectively. Omit the size property for a list with the default size.

Customizing the header and footer of list by setting header and footer property.

Basic list

Basic list.

Load more list with loadMore property.

Vertical

Set the itemLayout property to vertical to create a vertical list.

Pagination Settings

List pagination can be used and set through the pagination property.

Grid

Create a grid layout by setting the grid property of List.

Responsive grid list

Responsive grid list. The size property the is as same as Layout Grid.

Scrolling loaded

The example of infinite load with react-infinite-scroll-component.

Drag sorting

By using components, we can integrate List with dnd-kit to implement drag sorting function.

Drag sorting with handler

Alternatively you can implement drag sorting with handler using dnd-kit.

Grid Drag sorting

By using custom components, we can integrate List with dnd-kit to implement drag sorting function for grid layout.

Grid Drag sorting with handler

By using custom components and drag handles, we can integrate List with dnd-kit to implement drag sorting function for grid layout.

virtual list

An example of infinite & virtualized list via using rc-virtual-list.

Default Size

Header

[ITEM] Racing car sprays burning fuel into crowd.
[ITEM] Japanese princess to wed commoner.
[ITEM] Australian walks 100km after outback crash.
[ITEM] Man charged over missing wedding girl.
[ITEM] Los Angeles battles huge wildfires.

Footer

Small Size

Header

Racing car sprays burning fuel into crowd.
Japanese princess to wed commoner.
Australian walks 100km after outback crash.
Man charged over missing wedding girl.
Los Angeles battles huge wildfires.

Footer

Large Size

Header

Racing car sprays burning fuel into crowd.
Japanese princess to wed commoner.
Australian walks 100km after outback crash.
Man charged over missing wedding girl.
Los Angeles battles huge wildfires.

Footer

Ant Design Title 1
Ant Design, a design language for background applications, is refined by Ant UED Team
Ant Design Title 2
Ant Design, a design language for background applications, is refined by Ant UED Team
Ant Design Title 3
Ant Design, a design language for background applications, is refined by Ant UED Team
Ant Design Title 4
Ant Design, a design language for background applications, is refined by Ant UED Team

ant design part 0
Ant Design, a design language for background applications, is refined by Ant UED Team.
We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.
- 156
- 156
- 2
ant design part 1
Ant Design, a design language for background applications, is refined by Ant UED Team.
We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.
- 156
- 156
- 2
ant design part 2
Ant Design, a design language for background applications, is refined by Ant UED Team.
We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.
- 156
- 156
- 2

ant design footer part

1
2
3
4
5
•••
8

Ant Design Title 1
Ant Design, a design language for background applications, is refined by Ant UED Team
Ant Design Title 2
Ant Design, a design language for background applications, is refined by Ant UED Team
Ant Design Title 3
Ant Design, a design language for background applications, is refined by Ant UED Team
Ant Design Title 4
Ant Design, a design language for background applications, is refined by Ant UED Team

1

Title 1

Card content

Title 2

Card content

Title 3

Card content

Title 4

Card content

Title 1

Card content

Title 2

Card content

Title 3

Card content

Title 4

Card content

Title 5

Card content

Title 6

Card content

No data

1 Racing car sprays burning fuel into crowd.
2 Japanese princess to wed commoner.
3 Australian walks 100km after outback crash.
4 Man charged over missing wedding girl.
5 Los Angeles battles huge wildfires.

1 Racing car sprays burning fuel into crowd.
2 Japanese princess to wed commoner.
3 Australian walks 100km after outback crash.
4 Man charged over missing wedding girl.
5 Los Angeles battles huge wildfires.

Title 1

Card content

Title 2

Card content

Title 3

Card content

Title 4

Card content

Title 5

Card content

Title 6

Card content

Title 1

Card content

Title 2

Card content

Title 3

Card content

Title 4

Card content

Title 5

Card content

Title 6

Card content

ant design part 0
Ant Design, a design language for background applications, is refined by Ant UED Team.
We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.
- 156
- 156
- 2

extra
5.18.0
set `extra` of List.Item
actions
5.18.0
set `actions` of List.Item

List

List

When To Use

Examples

API

List

pagination

List grid props

List.Item

List.Item.Meta

Semantic DOM

Design Token

When To Use

Examples

API

List

pagination

List grid props

List.Item

List.Item.Meta

Semantic DOM

Design Token

extra

actions