Automatically Populating Table with Query Results

When you drag a Table component to the Canvas, it automatically displays data from one of your queries. If you don't have any queries, Retool initially populates the table with demo data. You can change the data displayed in a table by editing the Data source property. From the dropdown, you can select a query, use JavaScript (e.g., queryName.data ), or input an array.

I am following the tutorial here and trying with my own data source API. The API call is a simple GET which returns a proper json response. All good.

Now I go and pick table ... which populates the table with DEMO data so I
select my query as a resource and ..
nothing but the default table Demo data shows.

Perhaps I am wishing for too much magic but I through that once I connected the query the json would response will be read into the table automatically populating the column names.

Am I missing a step?

I was able to make a little more progress but still not understanding the workflow here: As you can see the value of id is visible in the source data but it says it's empty?

Now I go the ID to show up but how I cannot tell - all I did was put an array in the source field with ["the"] as a value...

Why does this work?

The second example (["the"]) works because the data editor expects an array of objects (and a string may be considered one). The first example ({{ get_legal_entity.data.id }}) doesn't, as it is just a string. What you probably need to enter into the data field is just {{ get_legal_entity.data }}.

When enter a new data source for the first time, the table auto-generate columns based on the demo data. That is why you still see "ID", "User", etc. Once you change your data field to {{ get_legal_entity.data }}, make sure to delete the columns and refresh the table (the refresh button next to Columns).

Hope this is helpful! :slight_smile:

2 Likes