List View
The List View component allows to create a list of repeatable rows of data. Just like the Container component, you can nest other components inside of it and control how many times they repeat.
Certain components, namely Calendar and Kanban, are restricted from being placed within the List View component using drag-and-drop functionality.
Setting List Data
To dynamically populate List View components, you can use specific data properties.
Consider this data being passed inside a List View component's List data
property:
{{[
{ imageURL: 'https://www.svgrepo.com/show/34217/image.svg', text: 'Sample text 1', buttonText: 'Button 1' },
{ imageURL: 'https://www.svgrepo.com/show/34217/image.svg', text: 'Sample text 1', buttonText: 'Button 2' },
{ imageURL: 'https://www.svgrepo.com/show/34217/image.svg', text: 'Sample text 1', buttonText: 'Button 3' },
]}}
Based on the above data, you can set the Data
property of a Text component inside List View using the below code:
{{listItem.text}}
Similarly, for an Image component inside List View, you can use the below code to pass the imageURL
value:
{{listItem.imageURL}}
Properties
Property | Description | Expected Value |
---|---|---|
List data | The data that you want to display in the List View component. This can be an array of objects or data from a query that returns an array of objects. | An array of objects or a query that returns an array of objects. |
Mode | The layout of the List View component. You can choose between List and Grid mode. | list or grid |
Show bottom border | Whether to show or hide the bottom border on a row. This option is only available when the Mode is set to List . | true or false |
Columns | The number of columns in the List View component. This option is only available when the Mode is set to Grid . | Any numerical value |
Row height | The height of each row in the List View component. | Any number between 1 and 100 |
Enable pagination | Whether to enable pagination. If enabled, you can set the number of rows per page. | true or false |
Rows per page | The number of rows per page. This option is only available when Enable pagination is enabled. | Any numerical value |
Events
To attach an event handler to the List View component, follow these steps:
- Click on the component handle to open its properties on the right sidebar.
- Navigate to the Events section.
- Click on the +Add handler button.
There are two events that you can use with the List View component:
Row clicked
The Row clicked event is triggered when any row inside the List View is clicked. Similar to other events in ToolJet, you can define multiple actions for this event.
When a row is clicked in the List View component, certain related data is made available through the selectedRowId and selectedRow variables. For the List View component's available exposed variables, refer to the here section.
The Row clicked event is being deprecated, so it is recommended to use the Record Clicked event instead.