Dynamically render a table from a selected CSV object in S3

[Pradeepp]

I have multiple CSV files (psql query results) of different headers and data in S3 bucket. I'm trying to implement an app where users can select any of these CSV objects (one object at a time) and the data will be rendered to them in a table format.

I tried to dynamically render table from the s3 read file query data, but the table columns never get updated. I can see new data loading into the rows.

Can I use any other component to simple render CSV data in retool

[ScottR]

@Pradeepp Welcome to the forum!
Can you post some screenshots of the table and the data coming back from the object?

[Pradeepp]

Thanks @ScottR for the quick reply. Here is the screenshot

When I click on a different row in table1 I see that data is being added to the existing data in table2 including the csv headers

[ScottR]

OK. Thanks. In your table component, what did you enter for the Default value?
I cannot see the name of the query you are running but I would imagine you have some thing like {{yourquerythatreadsthefile.data}} ?

If you could post the name of your query, and also just the first item in that payload as code, it will help me help you....

[Pradeepp]

Thanks @ScottR I have updated the thread with more screenshots

[ScottR]

I think you need to load each object separately into the entire table itself... without seeing the structure completely, I can only guess and say any time you want the table to repopulate with a new object (I don't know which query is loading the table based on what you posted) I would say either
listFiles.data.Contents[i} where i is incremented each time they select a new object. or readTrigger.data.data[i] where i is incremented each time they select a new object.

I am still unclear about what you're trying to do in the app...sorry.

[Pradeepp]

Here is the entire app

listFiles query populates table1 with all the CSV objects in S3 bucket and when a row is selected respective S3 key will be fed to readTrigger query as {{table1.selectedRow.data.Key}} so that the selected CSV object date is populated into table2

Every time a new row in table1 is selected I want to re-populate the table2 with the respective data along with CSV headers.

env_id filter TextInput component is to filter the data in table1 based on the env id
Download CSV button to download the selected CSV object from table1

[Pradeepp]

Thanks @ScottR for your time. I found an issue with the CSV headers. Fixing the same got the app working as expected