Hi, I am just starting with Dash and i am trying to render a reactive dash_table. However, i notice something strange. When i pass an input dataframe, i am able to see the output. However, when i try to create a new column called ‘bins’ and then pass the dataframe, i receive an error -
“dash.exceptions.InvalidCallbackReturnValue: The callback for property children
of component table1
returned a value which is not JSON serializable.
In general, Dash properties can only be dash components, strings, dictionaries, numbers, None, or lists of those.”
I have created a sample code below for testing. When i pass ‘df’, i can see the output. But when i pass ‘df_table’, i get the above error.
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State
import dash_table as dt
import re
import pandas as pd
import plotly.graph_objects as go
import numpy as np
list1 = [1,2,3,4,5,6,7,8,9,10]
df = pd.DataFrame(list1)
df.columns = ['sequence']
df_bins = pd.DataFrame(list1)
df_bins.columns = ['sequence']
df_bins['bins'] = pd.cut(df_bins['sequence'].values, [0,3,5,10], right = True, include_lowest = False)
external_stylesheets = ['https://codepen.io/amyoshino/pen/jzXypZ.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
application = app.server
app.layout = html.Div([html.Div(
html.Div([
html.Div([
html.Button(id='submit-button',
children='Submit')]),
html.Div(id="table1")]))
])
@app.callback(Output('table1','children'),
[Input('submit-button','n_clicks')],
[State('submit-button','n_clicks')])
def update_datatable(n_clicks,input_value):
if n_clicks:
data = df_dict.to_dict('records')
columns = [{"name": i, "id": i,} for i in (df_dict.columns)]
return dt.DataTable(data=data, columns=columns)
if __name__ == '__main__':
application.run(debug=False, port=8080)