Create custom list views

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

The List View component is 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 list view.

Before working with the List View component, 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 list view 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

Once you create a new app in Retool, you'll start with an empty canvas. We'll start by dragging a List View component onto the canvas.

By default, the List View component is be empty. Let's drag an image into the component; 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

The List View component 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 List View component, we should see a lot more cats. Let's click on the first image we dragged into the List View component. 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 List View component. 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 List View component 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 list 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 List View component.

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 List View component 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.

Did this page help you?