This looks super interesting! We’re looking to integrate our table into dash and there seem to be some overlapping features, I wonder if theres any opportunity to combine work:
Hi,
I am using dash table currently to create a dashboard. I am stuck on an issue where I want to merge certain cells as they are repeating over a set of rows. I can’t seem to find a solution to it. The image below explains it (created in excel). Can you help me out with this?
Best,
Vivek
I does not work with categories type data. I have tried to display data from following dataframe (it is returned by a function, so it does not have fixed column names):
It throws the following error:
dash.exceptions.InvalidCallbackReturnValue:
The callback for property `rows`
of component `drugcat` 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.
Can you please help me out I need help
My drop down is not interacting with my data table nor is my graph
Can you guys please help
This is my code
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.css.append_css({
"external_url": "https://codepen.io/chriddyp/pen/bWLwgP.css"
})
app.layout=html.Div([
html.Div([
html.Div([
html.H1('Arasmeta')
]
),
# Select Division Dropdown
html.Div([
html.Div('Site', className='three columns'),
html.Div(dcc.Dropdown(id='site',
options=[{'label':i, 'value' : i} for i in df['Site'].unique()]),
className='nine columns')
]
),
html.Div([
html.Div('Department', className='three columns'),
html.Div(dcc.Dropdown(id='dept'),
className='nine columns')
]
),
# Select Season Dropdown
html.Div([
html.Div('Equipment Name', className='three columns'),
html.Div(dcc.Dropdown(id='eqname'),
className='nine columns')
]
),
# Select Team Dropdown
html.Div([
html.Div('Equipment ID', className='three columns'),
html.Div(dcc.Dropdown(id='edid'),
className='nine columns')
]
),
],
className='six columns'),
# Empty
html.Div([
html.Div(className='six columns')
],
className='twleve columns'),
# Match Results Grid
html.Div([
html.Div(
dte.DataTable(id='Table_result',
columns=[{"name": i, "id": i, 'deletable': True} for i in dt_columns],
editable=True,
row_selectable="multi",
selected_row_indices=[0],
),
className='six columns'
),
# Season Summary Table and Graph
html.Div([
# summary table
dcc.Graph(id='graph')
# style={},
],
className='six columns'),
]
),
]
)
@app.callback(
Output(component_id='dept', component_property='options'),
[
Input(component_id='site', component_property='value')
]
)
def update_department(d):
df1=df[df['Site']==d]
dpt = [{'label':i, 'value' : i} for i in df1['Department '].unique()]
return dpt
#Load in Dropdown
@app.callback(
Output(component_id='eqname', component_property='options'),
[
Input(component_id='dept', component_property='value'),
Input(component_id='site', component_property='value')
]
)
def update_eqnme(e,s):
df1=df[df['Site']==s]
df2=df1[df1['Department ']==e]
en = [{'label':i, 'value' : i} for i in df2['Equipment Name'].unique()]
return en
@app.callback(
Output(component_id='edid', component_property='options'),
[
Input(component_id='eqname', component_property='value'),
Input(component_id='dept', component_property='value'),
Input(component_id='site', component_property='value')
]
)
def update_eqid(e,s,z):
df1=df[df['Site']==z]
df2=df1[df1['Department ']==s]
df3=df2[df2['Equipment Name']==e]
sn = [{'label':i, 'value' : i} for i in df3['Equipment ID'].unique()]
return sn
@app.callback(
Output(component_id='Table_result',component_property="columns"),
[
Input(component_id='edid', component_property='value'),
Input(component_id='eqname', component_property='value'),
Input(component_id='dept', component_property='value'),
Input(component_id='site', component_property='value')
]
)
def column_table_data(q,w,e,r):
df1=df[df['Site']==q]
df2=df1[df1['Department ']==w]
df3=df2[df2['Equipment Name']==e]
df4=df3[df3['Equipment ID']==r]
df=df4[['Sr/ No/', 'Site', 'Date', 'Department ', 'Equipment ID',
'Equipment Name','GREASE GRADE', 'POINT', 'STOCK','MAN POWER', 'Remarks']]
column = [{"name": i, "id": i} for i in df.columns]
return column
@app.callback(
Output(component_id='Table_result',component_property="row_selectable"),
[
Input(component_id='edid', component_property='value'),
Input(component_id='eqname', component_property='value'),
Input(component_id='dept', component_property='value'),
Input(component_id='site', component_property='value')
]
)
def load_table_data(p,q,r,s):
df1=df[df['Site']==p]
df2=df1[df1['Department ']==q]
df3=df2[df2['Equipment Name']==r]
df4=df3[df3['Equipment ID']==s]
df5=df4[['Sr/ No/', 'Site', 'Date', 'Department ', 'Equipment ID',
'Equipment Name','GREASE GRADE', 'POINT', 'STOCK','MAN POWER', 'Remarks']]
return df.to_dict('records')
@app.callback(
Output(component_id='graph',component_property="figure"),
[
Input(component_id='Table_result',component_property="row_selectable"),
Input(component_id='edid', component_property='value'),
Input(component_id='eqname', component_property='value'),
Input(component_id='dept', component_property='value'),
Input(component_id='site', component_property='value')
]
)
def load_graph(a,b,c,d,rows):
df1=df[df['Site']==a]
df2=df1[df1['Department ']==b]
df3=df2[df2['Equipment Name']==c]
df4=df3[df3['Equipment ID']==d]
dff = pd.DataFrame(rows)
return {
'data': [{
'x': df['Date'],
'y': df[['STOCK']].mean(axis=1),
'text': df['Equipment Name'],
'type': 'bar'
}
]
}
Hi Vivek were you able to resolve this? I’m looking for solution for this problem as well. Thanks
Sorry, I didn’t mean for my benefit. I meant for new users. I went through the tutorial a month ago and thought the only way to make a table was to use the method on the page I linked titled Reusable Components. I couldn’t get my dataframe to display as a table properly using html methods within the page_layout
list. The data_tables.DataTable
method worked first time.
That’s a great idea! We don’t need the HTML table example anymore now that we have the dash table.
I’m going to lock this thread. Let’s start a new thread for any more questions or comments