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.
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.
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.
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!
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
We must first write a query called
products to retrieve the contents of the
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
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