Dash table not JSON serializable

Dash Python
1

I have an index page with the following layout:

from app import app, dcc, html, dbc, Input, Output
from homepage_layout import homepage_layout
from trends_layout import trends_layout
from oe_layout import oe_layout
#from saves_layout import saves_layout
#from compliance_layout import compliance_layout
#from screening_layout import screening_layout
from demographics_layout import demographics_layout
#from profile_layout import profile_layout

import callbacks

#main layout
navbar = html.Div(
    [
    dcc.Location(id="url"),
    dbc.NavbarSimple(
        children=[
                dbc.NavLink("Home", href="/home", external_link=True),
                dbc.NavLink("Trends", href="/trends", external_link=True),
                dbc.NavLink("O/E", href="/OE", external_link=True),
                dbc.NavLink("Saves", href="/saves", external_link=True),
                dbc.NavLink("Compliance", href="/compliance", external_link=True),
                dbc.NavLink("Screening", href="/screening", external_link=True),
                dbc.NavLink("Demographics", href="/demographics", external_link=True),
                dbc.NavLink("Profile", href="/profile", id="profile", external_link=True)
            ],
    brand='Sepsis',
    sticky='top',
    color='secondary',
    dark=True),
    ],
)
    
main_body = dbc.Container(
    [dbc.Row([  
        dbc.Col([
            html.Div(id='page-content')], #className='pt-4'
                ), #md=5          
        ]),
],className="mt-4")

app.layout = html.Div([navbar, main_body]) 

# --- Callbacks --- #
@app.callback(Output('page-content', 'children'), 
              [Input('url', 'pathname')])

def render_page_content(pathname):
    if pathname == '/home':
        return homepage_layout
    if pathname == '/trends':
        return trends_layout
    if pathname == '/OE':
        return oe_layout
    if pathname == '/saves':
        return 'Saves!' #saves_layout
    if pathname == '/compliance':
        return 'Compliance!' #compliance_layout
    if pathname == '/screening':
        return 'Screening!' #screening_layout
    if pathname == '/demographics':
        return demographics_layout
    if pathname == '/profile':
        return 'Profile!' #profile_layout
    else: 
        return homepage_layout

if __name__ == "__main__":
    app.run_server()

The table within in the oe_layout page is returning the following error:
Annotation%202019-10-25%20083743

#-- table --#
otable = html.Div([
            dte.DataTable(
                id='lmr_table',
                columns= [{"name": i, "id": i} for i in oe_data.columns],
                data= oe_data.to_dict('records'), 
                
                #editable
                editable=True,
                
                #filter & sort
                filter_action="native",
                sort_action="native",
                sort_mode="multi",
                
                #delete
                row_deletable=True,
                
                #pagination
                page_action="native",
                page_current= 0,
                page_size= 15, 
                
                #styling
                style_header = {'fontWeight':'bold'}, #'backgroundColor': 'white'},
                style_cell = {'maxWidth':'180px'}, #{'textAlign': 'left'}, 'whiteSpace':'normal'
                style_table = {'maxHeight':'500px', 'maxWidth':'1200px'}, #, 
                style_data={'whiteSpace': 'normal','height': 'auto'},
                
                #exports
                export_format = 'csv',
                export_headers = 'names'),
    ])            

#-- 3 graphs --#
los_oe_graph = html.Div([dcc.Graph(id='los_oe_graph')])
mort_oe_graph = html.Div([dcc.Graph(id='mort_oe_graph')])
readmit_oe_graph = html.Div([dcc.Graph(id='readmit_oe_graph')])

#-- three cards --#
los_oe_card = dbc.Card(
    dbc.CardBody(
        [
            html.H5('LOS O/E Takeaways', className='card-title'),
            html.P('Main points from LOS O/E.', id='los_oe_card'),
        ],
    ),
)

mort_oe_card = dbc.Card(
    dbc.CardBody(
        [
            html.H5('Mort O/E Takeaways', className='card-title'),
            html.P('Main points from Mort O/E.', id='mort_oe_card'),
        ],
    ),
)

readmit_oe_card = dbc.Card(
    dbc.CardBody(
        [
            html.H5('Readmit O/E Takeaways', className='card-title'),
            html.P('Main points from Readmit O/E.', id='readmit_oe_card'),
        ],
    ),
)

oDeck = dbc.CardDeck([los_oe_card,mort_oe_card,readmit_oe_card])

oe_body = dbc.Container(
    [
        dbc.Row(
            [
                dbc.Col(
                    [
                        html.H4("O/E"),
                        los_oe_graph,
                        mort_oe_graph,
                        readmit_oe_graph,
                        html.Br([]),
                    ],
                    md=10),
                ],
            ), 
        dbc.Row(
            [
                dbc.Col( 
                    [
                        html.H4("Takeaways"),
                        oDeck,
                        otable,
                        html.Br([]),
                        #undo,
                    ],
                    #align="center",
                ),
            ],
        ),
    ],
    #className="mt-4",
)
                
oe_layout = html.Div([ostore,oe_body])

Any ideas? Let me know if I need to include more info.

2

Found it! The data reading into the table contained tuple headers.

3

Hi! Can you tell me what did you do to rectify tuple heading in table ?