# 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="../../concepts/components/work-with-components/table-server-side-pagination" %} [table-server-side-pagination](https://docs.uibakery.io/concepts/components/work-with-components/table-server-side-pagination) {% endcontent-ref %}