# @ant-design/pro-list

> 🏆 Use Ant Design List like a Pro!

Latest version **2.6.9** (published 2025-06-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install @ant-design/pro-list
pnpm add @ant-design/pro-list
yarn add @ant-design/pro-list
bun add @ant-design/pro-list
```

## Health

**Score 50/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities; high maintenance score.

Warnings: low downloads.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 2.6.9 |
| Published | 2025-06-10 |
| First published | 2020-04-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 11 |
| Unpacked size | 91.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4830 |
| Maintainers | afc163, zombiej, chenshuai2144, arvinxx, madccc |
| Keywords | antd, admin, ant-design, ant-design-pro |

## Links

- npm: https://www.npmjs.com/package/@ant-design/pro-list
- Repository: https://github.com/ant-design/pro-components
- Homepage: https://github.com/ant-design/pro-components#readme
- Issues: https://github.com/ant-design/pro-components/issues
- npm.io page: https://npm.io/package/@ant-design/pro-list

## Dependencies (11)

- [dayjs](https://npm.io/package/dayjs.md) ^1.11.10
- [rc-util](https://npm.io/package/rc-util.md) ^4.19.0
- [classnames](https://npm.io/package/classnames.md) ^2.3.2
- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.18.0
- [@ant-design/icons](https://npm.io/package/@ant-design/icons.md) ^5.0.0
- [rc-resize-observer](https://npm.io/package/rc-resize-observer.md) ^1.0.0
- [@ant-design/cssinjs](https://npm.io/package/@ant-design/cssinjs.md) ^1.21.1
- [@ant-design/pro-card](https://npm.io/package/@ant-design/pro-card.md) 2.9.9
- [@ant-design/pro-field](https://npm.io/package/@ant-design/pro-field.md) 3.0.6
- [@ant-design/pro-table](https://npm.io/package/@ant-design/pro-table.md) 3.20.1
- [@ant-design/pro-utils](https://npm.io/package/@ant-design/pro-utils.md) 2.17.2

## Recent versions

- 2.6.9 (latest) — 2025-06-10
- 2.6.10 (beta) — 2025-07-17
- 1.21.87 (old) — 2022-10-26
- 2.0.0-alpha.43 (next) — 2022-10-13
- 2.0.0-experimental.42 (experimental) — 2022-09-07
- 1.21.38 (tag) — 2022-03-14
- 2.6.8 — 2025-06-10
- 2.6.7 — 2025-03-31
- 2.6.6 — 2025-02-17
- 2.6.5 — 2025-02-12
- 2.6.4 — 2025-01-18
- 2.6.3 — 2025-01-06
- 2.6.2 — 2024-11-14
- 2.6.1 — 2024-10-22
- 2.6.0 — 2024-10-17
- … 432 more at https://npm.io/package/@ant-design/pro-list/versions

## README

<h1 align="center">@ant-design/pro-list</h1>

<div align="center">

🏆 Use Ant Design List like a Pro!

</div>

# ProList (高级列表)

ProList 在 antd 的 list 支持了一些功能，比如 多选，展开等功能，使用体验贴近 table。

## 何时使用

在完成一个标准的列表时即可使用。

## API

### ProList

ProList 与 antd 的 [List](https://ant.design/components/list-cn/) 相比，主要增加了 rowSelection 和 expandable 来支持选中与筛选

| 参数 | 说明 | 类型 | 默认值 |
| :-- | :-- | :-- | :-- |
| rowSelection | 与 antd 相同的[配置](https://ant.design/components/table-cn/#rowSelection) | object \|boolean | false |
| expandable | 与 antd 相同的[配置](https://ant.design/components/table-cn/#expandable) | object \| false | - |
| showActions | 何时展示 actions，CardList 模式下不生效 | 'hover' \| 'always' | always |
| rowKey | 行的 key，一般是行 id | string \| (row,index)=>string | "id" |
| renderItem | 现在的 renderItem 需要返回 ProList.Item 的 props，而不是 dom | ItemProps | - |
| listRenderItem | 这是 antd 的 renderItem 的别名 | (row,index)=> Node | - |

### ProList.Item

如果你的 dataSource 包含 children，我们会将其打平传入到 renderItem 中，但是包含 children 的项会转化了 group 的样式，只支持 title 和 actions 的属性。

| 参数 | 说明 | 类型 | 默认值 |
| :-- | :-- | :-- | :-- |
| type | 列表项的预设样式 | new \| top | - |
| title | 列表项的主标题 | ReactNode | - |
| subTitle | 列表项的副标题 | ReactNode | - |
| checkbox | 列表的选择框 | React.ReactNode | - |
| loading | 列表项是否在加载中 | React.ReactNode | - |
| avatar | 列表项的头像 | AvatarProps \| string | - |
| actions | 操作列表项 | React.ReactNode\[] | - |
| description | 列表项的描述，与 title 不在一行 | React.ReactNode\[] | - |
| expandedRowClassName | 额外展开的 css | string | - |
| expand | 列表项是否展开 | boolean | - |
| onExpand | 列表项展开收起的回调 | (expand: boolean) => void | - |
| expandable | 列表项展开配置 | [object](https://ant.design/components/table-cn/#expandable) | - |

---
_Source: https://npm.io/package/@ant-design/pro-list · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
