# List View ## Overview The List View component serves to display a collection of items. By default, it contains an image and a text field which can be replaced with the required components.\ If you need to create a custom layout, you can add the necessary components to the first list item. The added components are replicated for the other list view items.

### Properties

Name	Type	Description
`name`	`string`	Component name
`pageSize`	`number`	Number of items displayed per page
`pageCount`	`number`	Total number of pages
`activePageIndex`	`number`	Current active page index
`paginationOffset`	`number`	Offset used for pagination
`afterCursor`	`string`	Cursor for paginated data fetching
`value`	`value[]`	Current component value (array of data)
`children`	`GridViewItemApi<Value,` `Children>[]`	Child items inside the list view
`valid`	`boolean`	Indicates if the component is valid

### Methods

Name	Parameters	Returns	Description
`setPage`	`index: number`	`void`	Navigate to a specific page within the list view
`setPageSize`	`size: number`	`void`	Set the number of items displayed per page
`setValue`	`data: object[]`	`void`	Set component data. Data is an `object[]` with arbitrary structure.
`resetValue`	–	`void`	Reset component to the initial value
`validate`	–	`void`	Trigger form validation
`resetValidation`	–	`void`	Clear validation errors

### Triggers

Name	Description
On Init	Triggered when the component is initialized
On Page Change	Triggered when the component page changes
On Items Per Page Change	Triggered when the component page item changes

## Working with the component List View supports both static and dynamic data. To display data dynamically from your action, select the action you need in the *Data* property dropdown of the component.

### Accessing List items You can access any list item by referencing it as `{{item}}`, for example, `{{item.first_name}}`. To reference the index of the item, you can use the `{{index}}` variable.

### Server-side pagination If you have a large dataset, you may find it useful to use server-side pagination. You will find details on how to set it up in the article below:point\_down: {% content-ref url="/pages/P2ONqXC2gmBBvXmNWNNH" %} [Configuring server-side pagination](/concepts/components/work-with-components/table-server-side-pagination.md) {% endcontent-ref %} --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.uibakery.io/reference/working-with-components/list-view.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.