Creating Tables within Tabs

Dash Python
1

Hi,

I am trying to create a multi-tab Dasha app.

I can get a table to work in its own script. However, I don’t know how to embed a table under a graph.

e.g.

def display_content(value):
    if value==1:
        return html.Div([
                dcc.Graph(
                id='DQC',
                figure={
                    'data': [
                        go.Scatter(
                            x=df[df['study_id'] == i]['gt_date'],
                            y=df[df['study_id'] == i]['DQC'],
                            text=df[df['study_id'] == i]['site_id'],
                            mode='markers',
                            opacity=0.7,
                            marker={
                                'size': 15,
                                'line': {'width': 0.5, 'color': 'white'}
                            },
                            name=i
                        ) for i in df.study_id.unique()
                    ],
                    'layout': go.Layout(
                        xaxis={'title': 'gt_date', 'tickformat':'%b-%Y'},
                        yaxis={'title': 'DQC'},
                        margin={'l': 40, 'b': 40, 't': 10, 'r': 10},
                        legend={'x': 0, 'y': 1},
                        hovermode='closest'
                    )
                }
                )
        ])

THis is one tab , how would I put a table in here with the graph ?

Thanks.,

2

Hey @moranr7

It isn’t entirely clear what “table [you want to put] in here”. You have a few options:

(1) html.Table( … )
(2) dash tables
(3) table subplot within dcc.Graph( … )

3

I’m having the same issue. You can put a graph (in my case a line graph) below a data table. That’s not hard. The problem is when you have tabs. There’s a return statement directly under the if value == 1. The only code that I found that would allow me to have a graph below a table used an @app.callback to create the graph. This code has a function in it and a return statement. The hole thing blows up.

Does anyone have an idea that works? The concept of having a table and graph together in a tab is pretty powerful. There are other ways that I’ve done this (openpyxl with graph and table in Excel), but the idea of being able to do this in a web based format is very powerful.

FYI… has the n_fixed_rows problem been fixed?

Thanks…