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.
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.
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!
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
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 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
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 about 1 month ago