Programmatically Disable Tabs in Tab Container

I would like to disable tabs programmatically in a tabbed container. I have tables that may or may not have data in the tabs. I would like to hide tabs if the tables in the tabs have no data.

1 Like

Hey @stracht! This is a good idea. In the meanwhile, I think you can work around this by programmatically setting the tab names. Basically:

  • Create a transformer that implements your show/hide logic
  • Reference the value of the transformer in the “Tab Names” field for your tabbed container

For a quick example, I created a transformer that returns ["Tab One", "Tab Two"] if state1.value != '', and ["Tab One"] if it does - i.e. hiding Tab Two if the state’s value is empty.

return {{ state1.value != '' }} ? ["Tab One","Tab Two"] : ["Tab One"]

Does this make sense?

I tried that. The problem is that the tables don’t move. Sometimes I need to hide the first tab. If I disable “Tab One”, the the content from “Tab One” shows in “Tab Two”.

1 Like

I tried setting the first tab value to any empty string, but then it shows “Tab 0”. If I make it a space, then it doesn’t show anything, but you can select it if you hit the right spot. For now, I will probably programmatically set tab names with empty tables to a space and then set the tab index to the first tab without an empty table.

Ah, so you could also then conditionally hide the table component based on the same conditions (in the “hide when true” table setting). Definitely not ideal :confused: