List
List
Importimport { List } from 'antd'; |
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.
List component has been deprecated. Will be removed in the next major version. Please use Listy instead. See How do I migrate off List?.
Common props ref：Common props
| Property | Description | Type | Default | Version | Global Config |
|---|---|---|---|---|---|
| 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 | × |
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.
| 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 |
| Property | Description | Type | Default | Version | Global Config |
|---|---|---|---|---|---|
| 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 | 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 | 5.18.0 |
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| avatar | The avatar of list item | ReactNode | - | |
| description | The description of list item | ReactNode | - | |
| title | The title of list item | ReactNode | - |
| 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 |
| Token Name | Description | Type | Default Value |
|---|---|---|---|
| colorBorder | Default border color, used to separate different elements, such as: form separator, card separator, etc. | string | #d9d9d9 |
| colorPrimary | Brand color is one of the most direct visual elements to reflect the characteristics and communication of the product. After you have selected the brand color, we will automatically generate a complete color palette and assign it effective design semantics. | string | #1677ff |
| colorSplit | Used as the color of separator, this color is the same as colorBorderSecondary but with transparency. | string | rgba(5,5,5,0.06) |
| colorText | Default text color which comply with W3C standards, and this color is also the darkest neutral color. | string | rgba(0,0,0,0.88) |
| colorTextDescription | Control the font color of text description. | string | rgba(0,0,0,0.45) |
| colorTextDisabled | Control the color of text in disabled state. | string | rgba(0,0,0,0.25) |
| borderRadiusLG | LG size border radius, used in some large border radius components, such as Card, Modal and other components. | number | 8 |
| controlHeight | The height of the basic controls such as buttons and input boxes in Ant Design | number | 32 |
| controlHeightLG | LG component height | number | 40 |
| fontFamily | The font family of Ant Design prioritizes the default interface font of the system, and provides a set of alternative font libraries that are suitable for screen display to maintain the readability and readability of the font under different platforms and browsers, reflecting the friendly, stable and professional characteristics. | string | -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' |
| fontSize | The most widely used font size in the design system, from which the text gradient will be derived. | number | 14 |
| fontSizeLG | Large font size | number | 16 |
| fontSizeSM | Small font size | number | 12 |
| lineHeight | Line height of text. | number | 1.5714285714285714 |
| lineHeightLG | Line height of large text. | number | 1.5 |
| lineType | Border style of base components | string | solid |
| lineWidth | Border width of base components | number | 1 |
| margin | Control the margin of an element, with a medium size. | number | 16 |
| marginLG | Control the margin of an element, with a large size. | number | 24 |
| marginSM | Control the margin of an element, with a medium-small size. | number | 12 |
| marginXXL | Control the margin of an element, with the largest size. | number | 48 |
| marginXXS | Control the margin of an element, with the smallest size. | number | 4 |
| motionDurationSlow | Motion speed, slow speed. Used for large element animation interaction. | string | 0.3s |
| padding | Control the padding of the element. | number | 16 |
| paddingLG | Control the large padding of the element. | number | 24 |
| paddingSM | Control the small padding of the element. | number | 12 |
| paddingXS | Control the extra small padding of the element. | number | 8 |
| screenMD | Control the screen width of medium screens. | number | 768 |
| screenSM | Control the screen width of small screens. | number | 576 |
Yes — please use Listy, available since antd@6.6.0. It is the successor to List, with built-in capabilities such as virtual scrolling, sticky group headers and programmatic scrolling. It also supports flexible custom rendering, aiming to cover list needs across different scenarios.
Lists take different shapes in different scenarios, so it is hard to give a one-to-one migration guide. Thanks to the custom rendering capability of Listy, the preset structures in List can now be recomposed with plain JSX inside itemRender.
The mapping is as follows:
dataSource maps to items, renderItem maps to itemRender; rowKey keeps its meaning but is required in Listy and no longer defaults to the key field — pass rowKey="key" explicitly if you relied on the default. For large datasets, no third-party dependency is needed — turn on virtual with a height to get virtual scrolling.List.Item, List.Item.Meta, actions, extra can all be recomposed inside itemRender.header and footer around Listy directly, wrap the list with Spin for loading, slice the data yourself and pass it to items together with Pagination for pagination, and see the infinite loading demo for loadMore.bordered, split and size through semantic DOM classNames / styles and Design Token; for grid, migrating to Listy is not recommended — use Row / Col with Card to build the card layout instead.