Graph Table Error - Returned value which is not json serializable

Dash Python
1

Hi All,

For context, I am using tabs that render the layout object from each of the templates. In one of them, I am returning a graph table for function callback.

layout = html.Div([
    
    html.Div([

        dcc.Dropdown(
                id='landlord-select',
                options=[{'label': i, 'value': i} for i in Company_List],
                value='Company A',
                placeholder="Company",
                style={'width': '100%'}
                
        ), 
    
    ], style={"width": "15%", "margin-left": "20%", "margin-right": "35%"}),
    
    
    html.Div([
        
        dcc.Graph(id='my-table')
        
    ], style={'display': 'inline-block', 'width': '50%', 'float': 'right', 'margin-top': '2px'})

])



@app.callback(Output('my-table', 'figure'),
              [
                  Input("landlord-select", "value")
              ]
             )
def generate_table(company):
    
    df_sub1 = df_lease[df_lease['Landlord'] == company]
   
    return{
        
        'data': [go.Table(
                
                    header=dict(values=list(df_sub1.columns),
                                fill = dict(color='#C2D4FF'),
                                align = ['left'] * 5),
        
                    cells=dict(values=[df_sub1.UnitNo,
                                       df_sub1.City, 
                                       df_sub1.Commencement_Date, 
                                       df_sub1.Expiration_Date, 
                                       df_sub1.Lease_Type,
                                       df_sub1.Location,
                                       df_sub1.Lot_Size,
                                       df_sub1.Property_Type, 
                                       df_sub1.Rent_(Gross_Annual),
                                       df_sub1.Rent_(Monthly),
                                       df_sub1.Rent_(SF/Yr),
                                       df_sub1.SubMarket,
                                       df_sub1.Tenant,
                                       df_sub1.Rent_(Gross_Annual),
                                       df_sub1.Lease_Term_(Yr),
                                       df_sub1.Days_to_Expiration],
                               fill = dict(color='#F5F8FF'),
                               align = ['left'] * 5))
            
             ],
    
        'layout' : go.Layout(
                
                    title="Rent Roll Table", 
                    height=600
                
        )
    }

However, I keep getting Invalid Callback return value error. The callback for property children of component tab_content returned a value having type modulewhich is not JSON serializable.

My guess is that the object being returned ‘data’ is not list or serializable object, despite having it in .

My tab structure looks like this:

    @app.callback(Output("tab_content", "children"),
              [
                  Input("tabs", "value")
              ]
             )
def render_content(tab):
    """
    For user selections, return the relevant tab
    """
    if tab == "marketing_tab":
        return marketing.layout
    elif tab == "tenant_tab":
        return tenants.layout
    elif tab == "portfolio_tab":
        return portfolio.layout
    else:
        return marketing.layout

Any help/pointers would be much appreciated.