Programmatically hide tabs in Tabbed Container?

Does anyone know how to programmatically hide or disable individual tabs of a Tabbed Container component? Thanks.

Hi @sfbrophy I don't believe we currently support a way to hide specific tabs :disappointed:

One workaround for this would be to hide the tab bar and use a group of buttons instead and hide / show /disable the buttons dynamically. Then, on click of a button you could use the Tabbed container method: {{tabbedcontainer.selectTab(index)}} to select a specific tab index.

1 Like

Great workaround! Works perfectly. Thanks

@Tess one more question regarding a security concern (cf. Security Consideration: Server Side Rendering vs Client Side Rendering): when using your approach of hiding buttons, is this only hidden on the client or on the server side? I mean, do you render the component server wise and then hide it via Javascript on the client?


If I'm not mistaken, Retool is just generating an SPA (Single Page App), so all the controls are present as DOM objects in the browser, you're just controlling the visibility, etc. of those objects. Data access is, of course, done on the server, but this is done by dispatching requests to run a given query to a "proxy" on the server, which of course returns payload responses that are then parsed on the client.

Hi @stenit! @acoulson is correct. In this case, when you hide the tab bar, it is done client-side. In theory, a user could use CSS to reveal the tab bar. Similar to what Alex mentioned in that link, it's best to avoid sending data that you don't want the user to have access to.

You can also restrict the ability to run specific queries based on the current user object using the disable query field in the Advanced tab of the query: