Table not showing up on Dash App

Dash Python
1 

app.layout = html.Div([
    html.Hr(),
    html.H3(id = 'H1', children = ['Flow'], style = {'textAlign':'center', 'color':'rgb(0, 128, 0)','fontSize':'25px'}),
    
    dbc.Row([

        # default date is last business day date
        dbc.Col([
            html.Label(id = 'Date', children = ' Date: ',style = {'color':'rgb(0, 128, 0)','marginLeft':10}),
            dcc.Input(id ='datevalue',
                value = datetime.strftime(yesterday, '%Y%m%d'),
                style = {'textAlign':'center', 'marginLeft':'10px'},
                type='text'
            ),
        ],width = 2),

        # notional default is 500,000 thus only rows with notional>500,000 show up by default
        dbc.Col([
            html.Label(id = 'Ticker', children = ' Ticker: ',style = {'color':'rgb(0, 128, 0)'}),
            dcc.Input(id ='ticker',
                value = 'ECN',
                style = {'textAlign':'center','marginLeft':'5px'},
                type='text'
            ),
        ],width = {'size':3,'offset':2}),

        # allows user to fetch the first or last batch of stock prices
        dbc.Col([
            html.Label(id = 'Currency', children = ' Currency: ',style = {'color':'rgb(0, 128, 0)','marginLeft':10}),
            dcc.Input(id ='currency',
                value='CAD',
                style = {'textAlign':'center','marginLeft':'5px'},
                type = 'text',
            ),
        ],width = 2),

    ]),
        
    # lets user update input fields themselves to update output, includes a loading button
    dbc.Spinner(children=[html.Button('Update', id='interval-component',style = {'marginLeft':'10px'}),
                          html.Div(id='page-3-content')
                         ], color = 'rgb(0,128,0)'),
])

# callback takes in 4 variables including one input variable and 3 state variables - so that output only updates once user presses 'Update' 
@callback(
    Output('page-3-content','children'),
        [State('datevalue','value'),
        State('ticker','value'),
        State('currency','value'),
        Input('interval-component', 'n_clicks')
        ])

# datatable is using the dataframe from the query  
def update_output(dateval,symbol,curr,n):
   table = pd.pivot_table(df, values = 'Volume',index = ['Desk'],columns = ['TransactionType'], aggfunc=np.sum, fill_value=0, margins=True, margins_name='Grand Total')

        tableoutput = dash_table.DataTable(id='dataframe', columns=[{'id':c, 'name':c, 'type':'numeric', 'format':Format(group=True, groups=[3])} for c in df.columns],
                                           
        data=df.to_dict('records'),editable=False,filter_action="native",sort_action="native",selected_rows=[],sort_mode="multi",page_current= 0,page_action="native",

        css=[{'selector': '.dash-spreadsheet tr', 'rule': 'height: 10px;'}], fixed_rows={'headers': True},
           
            style_cell_conditional=[
            {
                'if': {'column_id': c},
                'textAlign': 'center','width': '8.33%'
            } for c in df.columns
        ],
            style_data={
            'color': 'black',
            'backgroundColor': 'white'
                        },
            style_header={
            'backgroundColor': 'rgb(0, 128, 0)',
            'color': 'white',
            'fontWeight': 'bold'
                        }
          )
        
        return tableoutput, table

Hi,

I have this code where I have not included the sql pull. My df is correct and my table does exist if I print it but it does not show up on the dash app.

I tried to change a bunch of things but only the 3 input cells and the heading show up. Is there anything I can do to make the table show up?

Thanks!

2

Hi @dgudhka , you are returning two values but you have only one Output(). This should actually throw an error. Are you running your app with debug=True?

3

Yeah I am running with debug = True and no errors show up.

4

Why are you returning the table? This is a pandas pivot table and should throw an error when trying to return it.

import dash
from dash import html, dcc, Input, Output, State
import pandas as pd
import numpy as np

df = pd.DataFrame(
    {"A": ["foo", "foo", "foo", "foo", "foo", "bar", "bar", "bar", "bar"],
     "B": ["one", "one", "one", "two", "two", "one", "one", "two", "two"],
     "C": ["small", "large", "large", "small", "small", "large", "small", "small", "large"],
     "D": [1, 2, 2, 3, 3, 4, 5, 6, 7],
     "E": [2, 4, 5, 5, 6, 6, 8, 9, 9]
     }
)

table = pd.pivot_table(
    df,
    values='D',
    index=['A', 'B'],
    columns=['C'],
    aggfunc=np.sum
)

app = dash.Dash(__name__)

app.layout = html.Div(
    [
        html.Button('submit', id='btn'),
        html.Div(id='out')
    ]
)


@app.callback(
    Output('out', 'children'),
    Input('btn', 'n_clicks'),
    prevent_initial_call=True
)
def sub(_):
    return 'first_return_value', table


if __name__ == '__main__':
    app.run(debug=True)
5

I want to return both a normal table called ‘tableoutput’ and a pivot table called ‘table’.

They both need to be defined in the callback function since they use user input.

What is ‘first_return_value’ ?

6

You can’t return a pandas pivot table into a Div, that’s what I’m trying to tell you. If you run my MRE from above, you will see that it throws an error.

just a string.

1 Like
7

Hi @dgudhka

Have you tried out what I explain on one of your previous questions in a different thread? Instead of directly returning the table in the callback return the data and then you can pass that data to the datatable

From how you have it in this post you’re still going to have the loader/spinner issue you had in that other thread.

Try setting up your callback with how I showed you in the example in dcc.Input changes output but can it not? - #9 by dgudhka

It should solve both issues this one and the one in that other thread.

1 Like
8

image
image905×956 28.2 KB

For some reason I don’t get error messages. It just keeps running and when I stop it this is all there remains.

9

Hi @dgudhka,

you are returning two values to 1 output

if you want to output them seperatly, create a second output div and reference that .

check this for an example :

section Dash App With Multiple Outputs

1 Like
10

Hi,

I tried that but it still doesn’t seem to work.

Referencing to this post from one of the fellow community members, where exactly should the "table contents = … " go in my notebook?

image
image844×652 24.6 KB