Creating variable number of dcc.Tabs

Dash Python
,
1

Hi all,

I am trying to create a tabular display of different tables, but without the initial knowledge of home many tabs I need.
The number is dependent on the length of a list (something the user inputs).

Is there a way to define a container in the app layout and send tabs(not tab content but tabs) as callback output in dash? Any other solution would be very helpful as well.

2

Hi @subodhpokhrel7,

Below is a basic working example for you to try:

from dash import Dash, dcc, html, Input, Output, callback, State

app = Dash(
    __name__, suppress_callback_exceptions = True,
    meta_tags=[{"name": "viewport", "content": "width=device-width, initial-scale=1", 'charSet':'“UTF-8”'}])

app.layout = html.Div(children=[
                    dcc.Input(id="n-tabs", type="number", placeholder="number of tabs"),
                    html.Button(id='submit-button-state', n_clicks=0, children='Submit'),
                    dcc.Tabs(id="tabs")
                        ]
                    )

@callback(Output('tabs', 'children'),
          Input('submit-button-state', 'n_clicks'),
          State('n-tabs', 'value'),
          prevent_initial_call = True)

def render_tabs(n_clicks, n_tabs):
    tabs = [dcc.Tab(label=f"Tab 1", value= "1")]
    if n_tabs > 1:
        for i in range(2,n_tabs+1):
            tabs = tabs + [dcc.Tab(label=f"Tab {i}", value= str(i))]
    return tabs

if __name__ == '__main__':
    app.run(debug=True)
4 Likes
3

Thanks a lot @jhupiterz