# Lists

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

* [Table](https://docs.jetadmin.io/user-guide/design-and-structure/components/lists/table) 
* [Map](https://docs.jetadmin.io/user-guide/design-and-structure/components/lists/map)
* [Kanban](https://docs.jetadmin.io/user-guide/design-and-structure/components/lists/kanban)
* [Calendar](https://docs.jetadmin.io/user-guide/design-and-structure/components/lists/calendar)
* [Gallery](https://docs.jetadmin.io/user-guide/design-and-structure/components/lists/gallery)
* [Timeline](https://docs.jetadmin.io/user-guide/design-and-structure/components/lists/timeline)

{% 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="../actions" %}
[actions](https://docs.jetadmin.io/user-guide/design-and-structure/actions)
{% endcontent-ref %}