---
sourceType: official-guide
sourceTypeMatchedRule: fallback
slug: MA/zaui/display/List
title: List
---
```ts
import { List } from "zmp-ui";
```


Dùng để hiển thị dạng dữ liệu dạng danh sách.

## Ví dụ



## Bảng thuộc tính


### ListProps

| Tên | Type | Required | Default | Mô tả |
| --- | --- | --- | --- | --- |
| dataSource | T[] | No |  | Dùng `dataSource` kết hợp với `renderItem` để hiển thị danh sách các phần tử, thay vì truyền trực tiếp các phần tử dưới dạng children. Data source bắt buộc phải là một mảng các giá trị, kiểu giá trị có thể là bất kỳ kiểu dữ liệu nào. |
| renderItem | (item: T, index: number, loading: boolean) => React.ReactNode | No |  | Hàm dùng để render từng item trong `dataSource`. Hàm này nhận vào 3 tham số: - `item`: Giá trị cần được render, được lấy từ `dataSource`. - `index`: Vị trí hiện tại của item đang cần được render. - `loading`: Trạng thái loading của danh sách. Kết quả trả về một `ReactNode`, khuyến khích là ``. |
| loading | boolean | No | false | Trạng thái loading của danh sách. |
| divider | boolean | No | true | Hiển thị viền ngăn cách giữa các phần tử trong danh sách. |
| noSpacing | boolean | No | false | Không hiển thị khoảng cách giữa các phần tử trong danh sách. |
| children | React.ReactNode | No |  | Các phần tử cần được hiển thị trong danh sách. _Không có tác dụng khi sử dụng cùng với `dataSource`._ |

### ListItemProps

| Tên | Type | Required | Default | Mô tả |
| --- | --- | --- | --- | --- |
| title | string | No |  | Tiêu đề của list item. |
| subTitle | string | No |  | Tiêu đề phụ của list item. Nằm bên dưới tiêu đề chính. |
| prefix | React.ReactNode | No |  | Phần tử cần được hiển thị ở đầu list item. Thường là icon. |
| suffix | React.ReactNode | No |  | Phần tử cần được hiển thị ở cuối list item. Thường là icon. |
| brackets | string | No |  | Nội dung nằm bên trong ngoặc, phía sau tiêu đề chính của list item. Thường được dùng để bổ sung thêm thông tin. |
| children | React.ReactNode | No |  | Phần tử cần được hiển thị trực tiếp bên trong list item. Nằm bên dưới tiêu đề chính và tiêu đề phụ. |
| onClick | React.MouseEventHandler | No |  | Callback được gọi khi list item được click / press. |