# Lists for Stripe Apps

Choose the right component to display collections of items in your Stripe app.

Use lists to display collections of information. Choose a component based on where your list appears and how much detail each item shows. Use a [List](https://docs.stripe.com/stripe-apps/components/list.md) for compact lists in drawer views, and a [DataTable](https://docs.stripe.com/stripe-apps/components/datatable.md) for list views in [full-page apps](https://docs.stripe.com/stripe-apps/patterns/full-page-apps.md).

## Before you begin

- [Create an app](https://docs.stripe.com/stripe-apps/create-app.md) or use an existing one.
- Review the [Stripe Apps UI components](https://docs.stripe.com/stripe-apps/components.md).

## Choose a list component

Match the component to the space available, the number of attributes per item and how users interact with each item. Start with the pairings in the following table and use the other component when your content calls for it.

| Component | Best for | Common view | Item interaction |
| --- | --- | --- | --- |
| `List` | Short, scannable collections with a few attributes per item | Drawer view ([ContextView](https://docs.stripe.com/stripe-apps/components/contextview.md)) | Use `onAction` to respond when a user presses a list item. |
| `DataTable` | Structured data with multiple columns, pagination, or batch selection | Full-page app ([FullPageView](https://docs.stripe.com/stripe-apps/components/fullpageview.md)) | Use `onRowClick` to respond when a user clicks a row. |

## Display lists in drawer views

Drawer views have limited width, so keep lists compact and focused on a few key attributes per item.

- To make list rows clickable, use a [List](https://docs.stripe.com/stripe-apps/components/list.md) component. A `List` can contain an icon and an image in certain treatments.
![Using the List component](https://b.stripecdn.com/docs-statics-srv/assets/listview.81a323e2c2191dc2551c503fa9d97cfa.png)

- For deeper control of the design, compose a custom list item. Rows in custom lists aren’t clickable. Add a link or button for the user to click.
![Custom list](https://b.stripecdn.com/docs-statics-srv/assets/custom-lists-01.3e7fec90ee2c9da310e6eb35cf5fea7f.png)
![Alternate custom list](https://b.stripecdn.com/docs-statics-srv/assets/custom-lists-02.c9ae81f00f993878c5008ab232bd9604.png)

## Display list views in full-page apps

Full-page apps have room for tabular data. Use a [DataTable](https://docs.stripe.com/stripe-apps/components/datatable.md) for list views where each item has several attributes. `DataTable` supports column configuration, row actions, pagination, and batch selection. For short, simple collections, such as a few related items on an overview tab, use a `List`.

When a user clicks a row, you can navigate to another page in your app, such as a detail view that shows more information about the clicked item. Call `navigateToAppRoute` from the `onRowClick` handler. For code examples, see [Build a list view](https://docs.stripe.com/stripe-apps/patterns/full-page-apps.md#build-a-list-view) and [Build a detail view](https://docs.stripe.com/stripe-apps/patterns/full-page-apps.md#build-a-detail-view). To let users narrow the rows in a table, add [filter controls](https://docs.stripe.com/stripe-apps/patterns/filter-controls.md). To handle tables with no rows, follow the [empty state pattern](https://docs.stripe.com/stripe-apps/patterns/empty-state.md).

## See also

- [List component](https://docs.stripe.com/stripe-apps/components/list.md)
- [DataTable component](https://docs.stripe.com/stripe-apps/components/datatable.md)
- [Full-page apps](https://docs.stripe.com/stripe-apps/patterns/full-page-apps.md)
- [Filter controls](https://docs.stripe.com/stripe-apps/patterns/filter-controls.md)