> For the complete documentation index, see [llms.txt](https://docs.jetadmin.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.jetadmin.io/classic-app-builder/design-and-structure/components/lists.md).

# Lists

Lists are UI components for displaying data from your collections

There are several ways how you can display the same collection in Jet Admin:

* [Table](/classic-app-builder/design-and-structure/components/lists/table.md) 
* [Map](/classic-app-builder/design-and-structure/components/lists/map.md)
* [Kanban](/classic-app-builder/design-and-structure/components/lists/kanban.md)
* [Calendar](/classic-app-builder/design-and-structure/components/lists/calendar.md)
* [Gallery](/classic-app-builder/design-and-structure/components/lists/gallery.md)
* [Timeline](/classic-app-builder/design-and-structure/components/lists/timeline.md)

{% hint style="success" %}
Check the steps below to familiarize yourself with common **Lists** features
{% endhint %}

### Setting the Layout

To assemble UI components on the page the way your case requires, use one of the `Layouts` components:

![](https://3448227606-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LQ08RFAKZvFADEiXKFy%2F-MiRb5WVmPcNZ9l6FtwI%2F-MiRdvp34jiD2Q-AVGcn%2FLists2.gif?alt=media\&token=9f0d0f72-60eb-47e0-a46a-f7382fc13b49)

### Adding list component

To add any `component` to the page simply drag-and-drop it:

![](https://3448227606-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LQ08RFAKZvFADEiXKFy%2F-MiRb5WVmPcNZ9l6FtwI%2F-MiRcUjpqTyP0QQH5vMA%2FLists1.gif?alt=media\&token=aaf5cf29-293e-4b13-a90b-da6c7e8ea923)

### Card fields and Columns

`Columns` for the Table components and `Card fields` for other Lists components can be customized by rearranging, enabling/disabling flags, and changing field types:

![](https://3448227606-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LQ08RFAKZvFADEiXKFy%2F-MiRiVAvn3Bg4Rkbi-cN%2F-MiRmmT4tr55F0JTebjV%2FLists3.gif?alt=media\&token=64d59b21-ef8d-4ab7-bf13-7dece57ffd2b)

### Selection function

Any Lists component in Jet Admin has the `selected row` or `selected card` functions that can be used to trigger all sorts of actions as well as fetching values from selected records:

![](https://3448227606-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LQ08RFAKZvFADEiXKFy%2F-MiRUWKf0L5TayDlsVYO%2F-MiRWERb_hLVtOa7Z6y-%2FComponents6.gif?alt=media\&token=b9b29c78-5455-43e6-ad98-4976510f167c)

### Actions

Using `selection function` you can also configure actions for any of the Lists components:

![](https://3448227606-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LQ08RFAKZvFADEiXKFy%2F-MiRo5Ik_M8LGmlbdyac%2F-MiRr6oiSd_kbGjUknNg%2FLists5.gif?alt=media\&token=74fe276f-eee4-4630-889e-2e5c0562fc0a)

There are two ways to set actions:

1. `Row click` or `Card click` actions will be triggered when a row or card is clicked
2. `Header action` will be triggered after selecting a row and hitting the header button

### Pagination

You can limit the number of records displayed in one of the Lists components: 

![](https://3448227606-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LQ08RFAKZvFADEiXKFy%2F-MiRiVAvn3Bg4Rkbi-cN%2F-MiRnptEWvcxZTptceOb%2FLists4.gif?alt=media\&token=772db42d-5034-4a98-b792-70dd5460da69)

### Search

You can enable Search for any of the Lists components:

![](https://3448227606-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LQ08RFAKZvFADEiXKFy%2F-MiRo5Ik_M8LGmlbdyac%2F-MiRobE1CltCURSHe6CU%2FComponents8.gif?alt=media\&token=fd6aafaf-09f3-489f-b932-dfdaeeb4fdab)

{% content-ref url="/pages/-MA3iezGqny48f7Qu0s3" %}
[Actions](/classic-app-builder/actions-and-logic/actions.md)
{% endcontent-ref %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.jetadmin.io/classic-app-builder/design-and-structure/components/lists.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.