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👇

Configuring server-side pagination