Working with ListViews

Most internal tools involve viewing and interacting with your data. Like tables, ListViews allow you to create repeatable rows of data whose look and feel are totally defined by you.

What's a ListView?

A ListView is a top-level Retool component that's similar to a Container. You can nest other components inside of it and control how many times they repeat.

What we're going to do

In this tutorial, we'll be displaying the results from a query, adding fields, as well as enabling deletion of items within a ListView.

Before working with ListViews, it might be helpful to first try displaying results in a table. This doc assumes you know how to query and display data in a table.

We'll be building a simple ListView using the products Postgres table inside of the 'onboarding_db' resource, available by default in all newly created Retool apps.

Display results from a query in a ListView

Once you create a new app in Retool, you'll start with an empty canvas. We'll start by dragging a ListView component onto the canvas. If you don't see the ListView component in the right sidebar, you can search for it in the "Search components" bar.

By default, the new ListView we dragged will be empty. Let's drag an image into the ListView; we should see that it repeats 3 times.

That was fun, but not that useful. Since we're displaying data, we might want the number of rows to be based on a query result. Without further ado, let's write some queries!

Setting the number of rows in a ListView

The ListView needs to know how many rows to render. Using the products table, let's write a query called num_products which will return us the number of rows.

Let's set the number of rows to render to be the result of this query.

After setting the number of rows in the ListView, we should see a lot more cats. Let's click on the first image we dragged into the ListView. In the "Image URL" field, we see that it's a fixed value– that's why we see the same image repeating a dozen times in the ListView. So how do we render the specific image URL for each entry in the products table?

We must first write a query called products to retrieve the contents of the products table.

Working with the i variable

Retool allows you to get the index of an item within a ListView through the i variable. This is how we'll be able to render a unique image for each row. Below you'll see the i variable is used to access the image_url of the row at index i. The rest takes care of itself.

Let's do some more fun stuff. Using the other columns in the products table, let's add some more information to each ListView item.

Now say we want to allow a user to remove an item from the products table. Let's drag a button next to the first item in the ListView.

With the help of the i variable, writing a query to accomplish this is simple– let's call it remove_product. In this query, we want to delete the ith entry from the products table. When a component inside of a ListView triggers a query, the value of i will be substituted with the row index of that component. In our case, that is our button.

When we delete a record from the products table, we want to refresh the table to accurately display the new data. We do this by adding the products query to this query's onSuccess trigger.

Lastly, let's tie this query to the "On Click" handler for the button we just dragged. Select the button and in the right panel, add remove_product as the query to run when the button is clicked.

Updated 6 months ago


Working with ListViews


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.