This comes up pretty often, and while we don't have a way to solve it directly, I have a workaround for you!
Preface
This workaround uses a List View component. It's a very powerful component, but with great power, also comes some docs to read 
The List View uses a few concepts (e.g. a built-in index) that aren't commonly found in other components.
Part 1: Setting up your components
- Add a List View component
- Inside the List View component, add a Container component
- Add whichever components you'd like into the Container component. Reference the docs to learn more about how to make those components show dynamic values!
- Add a Tabs component (not a Tabbed Container, just the Tabs). I put mine on top of the List View to better mimic the design of a Tabbed Container. Make sure not to put it inside the List View.
Part 2: Making only the selected container show up
- Now here's the important step—in your Container's Hidden property, add logic to hide all containers that don't match the Tab component's selected tab. This logic will depend on your specific setup. In my example, the Multiselect values, Container titles and Tabs share titles (e.g. "tab 2") so I can check for a match based on titles.
{{containerTitle1.value !== tabs2.value}}
Part 3: Making the length dynamic
- In the List View, set your data source to whatever you'd like! For example, you can set it to your_query.data if you want the number of tabs to be dependent on the length of the query results. In my example, I set it to all the values populating my Multiselect.
Fin!
Here's a GIF of the functionality
And here's a JSON export that you can import into your own Retool org and check out all the components used in this example.
Dynamic number of tabs workaround.json (24.3 KB)
Let me know if you have any questions at all!
5 Likes
haha, I'm stealing this one!
Looks good. Which use case will be this? When is good to use this solution?
Hi, this solution is acceptable?
no need of listView
v2:
@dcartlidge I'd be honored 
@agaitan026 The use case is up to you! For example, I've seen some users want to have a tab in their tabbed container each represent a user returned from a query. Their query might return 3 users or 8 users and they want to make sure the tabbed container updates properly.
@Oscar_Ortega Both look awesome! And skipping the List View can make it a lot easier to set up. Would you mind sharing your behind-the-scenes magic (ie how you set this up)? 
Sure! here it is
Playground.json (27.1 KB)
ah, i misunderstood the purpose of the dynamic tabs 
my solution has a fixed number of views, with their components
but it can be modified to have just one view and set their component to update when changing tabs. Like we do when working with selectedRow in tables
hey @victoria i have followed your steps as it is, but am facing issue while hiding the container, since Container1.title is for all the containers of the repeatable list containers, every container is getting hidden.
how can i solve this?
Hey @shashwath_gadad! Are you able to follow Part 2?
You'll need to use some logic to show only the selected container! In my example, my tabs value and my container titles matched, so I was able to say Hide containers whose titles don't match the selected tab.
Hi there. I'm able to make this work pretty easily, thanks for the detailed description. However, with this setup - if I understand it correctly - because it is a repeatable listview masquerading as a tab view, that means that every tab must have the identical set of components. Can you see any way of emulating this behavior but also allowing each tab to have its own unique set of components?
Hi @Freyr_Gudmundsson!
The container does indeed have to have the same components, BUT you can make them dynamically hidden and even have dynamically shown values.
I've attached a screen recording of a very simple example!
You could even have two containers in the list view with unique sets of components and just show the container you want.
Screen Recording 2024-02-29 at 12_52_04 PM.mov
1 Like
