Lists

List overview and customization

Lists components are simply different layout types for displaying your collection data in the most appropriate way. You can display your collections as Table, Kanban, Map, Calendar, Gallery, and Timeline. For example, you get a collection of tabular data from your resources - you can display it as a table.

Adding list component

You can add any component of the list to the page by simply drag-and-drop it:

Layouts

Once you have added a list component to a page, you can add additional display layouts to that component. You can switch between layouts within the same component.

Columns

You can customize columns: rearrange, change field type, show/hide.

Pagination

You can limit the number of records displayed on a page in the table.

For example, If you need to search for customers by a specific name or field. Activate a search and specify the data: resource and list's collection.

Actions

You can also add a button that performs a specific action with the List, such as exporting data, send an email, etc.

There are 2 types of actions on the list component:

  • Header Actions. Apply action for all records on the list, such as Export Data.

  • Record Actions. Perform action for selected fields or specify the action that triggers when the record clicked.

Selection Action

For example, you want to delete a specific customer, you can add a button that will delete record.

1. Go to the Component Settings then click Record actions

2. Click Add Action when record selected then selectRun Operation type

3. Select your resource (PostgreSQL database in our case) then select operation collection name - delete (randomuser - Delete)

4. Specify id parameter to delete record you want

Header Action

For example, if you want to add a new customer you need to set header action:

1. Go to the Component Settings then click Header

2. Click Add Action then choose action type as Open page

3. Select Collection - Create link in the dropdown list then choose your collection

4. Run operation to create new user

See our documentation for a detailed configuration of actions.