How to dynamically add a table component to tab in a tabbed container

App Building
1

My goal is to provide a tabbed container where a user can look at the data in their Postgres tables.

So far I have the table names as tabs, an SQL query that runs when I select a tab to select * from that table (disabled prepared statements to allow that).

My goal now is to add a dynamic table to each of the tabs and update that table data based upon which tab is selected (based on the query).

-- As you can see when I switch tabs, the table component only belongs to the first tab. The dynamically added tabs do not get that table component

My other option is to rather add a set of tabs, with no component within them, and have a large "global" table that displays the data.

It looks a bit odd, but it does work. Wondering if there is a better way to do this.

Thanks!

2

Hey there @k9thebeast and welcome to the community! Yep, your intuition is correct - the easiest way to do this will be to have a separate table component in each tab. If you want to make things a bit simpler, you can skip the tabbed container all together, and instead have one table component with a dropdown on top that adjusts which query populates that table. Does that make sense?

1 Like
3

Yep, makes sense. Thanks!