Data Tables Does not Return Anything

Dash Python
1

I am super confused by some odd behaviour that doesn’t throw any actual errors or warnings.

I have a dropdown callback that upon choosing a selection, reads a particular file and outputs a bunch of info from that file. One of them is a dictionary that I want to display as table using dash table experiments. When I try doing this without the callback structure it works perfectly but when I try returning it, not only does it not show at all but it causes all other items not to display.

Here is the callback structure:

@app.callback(Output('display', 'children'),
          [Input('dropdown', 'value')])
def refresh(filename):
        with open(filename + '.pkl', 'rb') as pfile:
            dog = pickle.load(pfile)

        return html.Div([
            html.H5("blah blah"),
            html.P("Other info = ${} ".format(dog['cat']['total'])),
                           
            html.H5("this table works"),
            html.Div(children=[
                generate_table(comp)]),
            html.H5(children='this table does not work'),
            html.Div(children=[
                data_tables(pd.DataFrame(dog['data']))
            ])
        ])

where,

def data_tables(df):
return dt.DataTable(
    rows=df.to_dict('records'),
    columns=df.columns.values,
    filterable=True,
    sortable=True,
    editable=False,
    max_rows_in_viewport=10
)

Again, no errors thrown and testing the the div with the table experiment table on its own without a callback works perfectly so I am at a loss to what is happening. Any insights?

Side note: I know in a case like this I should have a hidden div with a cache but frankly that solution never worked for me even though I have tried it several times in several different ways.