Black Lives Matter. Please consider donating to Black Girls Code today.

Dash DataTable - Updating Rows with Dropdowns

This is a great implementation Chris. Thanks.
Could we update the content of dash table based on some filters/drop-downs using callback? Here filters are separate from row selection filters. Let’s say if One wants to take as input from some drop down in app and update the dash table accordingly.
Thanks,

Thanks @Izzat! You should be able to just set a callback and update the rows property of the DataTable. Here’s some pseudo-code:

app.layout = html.Div([
    dcc.Dropdown(id='my-dropdown', ...),
    dt.DataTable(id='my-datatable')
])

@app.callback(Output('my-datatable', 'rows'), [Input('my-dropdown', 'value')])
def update_rows(selected_value):
    dff = df[df['some-column'] == value]
    return dff.to_dict('records')
1 Like

@chriddyp This is great! It worked. Thank you so much. I was not setting the correct property ( ‘rows’ in this case) .
I’m new to html, so might seem like a silly mistake. But thanks for being so responsive.
Best,
Izzat

1 Like

3 posts were split to a new topic: Help with Error Message - “Layout must be a dash component or a function that returns a dash component”

I am failing to get the table updated via the dropdown, like whenever I change the dropdown value the table is not changing. I have set the dropdown to be multi and from the dropdown i am using a function to generate a dataframe, the dataframe will have varying number of rows based on the number of items selected in dropdown. How do I get a dynamic output which is changing based on the selected dropdown

@Dee - Can you post a small, reproducable example that shows what you have tried so far?

A post was split to a new topic: Dash DataTable - Columns Are Rearranged

@Dee I am also facing the same problem. So if you got any solution for this then please post your solution.

Regards,
Kittu.

I get “datatable” doesn’t have “rows” as a property.

1 Like

I get an error that, the property ‘row’ does not exist.Kindly help

1 Like

I am trying to display a data frame which originally contains 58 rows. But I want the dropdowns to display each row based on the number selected.The number is the corresponding row index.
But I am not able to set the component property of the output to data.
My call back function will slice the original data frame into a single row(series) which is then converted into a data frame and sent to the output component.But I am not quite sure as to what would be the property of the output component I must specify.‘data’ threw an error. ‘row’ as well.Please suggest

I am aiming at creating a data table in the web app. MY data frame originally contains about 58 rows .But I want only one row to be displayed, for which, I am creating a drop down.The values of the drop downs correspond to the row index of the data frame. In the call back function, I am slicing the data frame (a particular row based on the drop down value) and then converting that series object to data frame. I am attempting to pass this data frame to to the table component. But I am not sure as to which is the property I want to update. specifying ‘data’ or ‘row’ as the component property, in dash.dependencies.Output threw an error. Help would be much appreciated.

hi chriddyp,
trying to do the same thing myself but keep saying’ …" Attempting to assign a callback to the
component with the id “datatable1” but no
components with id “datatable1” exist in the
app’s layout."

Below my code. Can you please shed lights on this ? Creating tabs or graph on dropdown it’s an headache …


dcc.Tab(label=‘FINANCIALS’, value=‘tab-3’,style=TAB_STYLE,selected_style=SELECTED_STYLE,children=[
dcc.Dropdown(id=‘subtab-3’, options=[
{‘label’: ‘Balance Sheet’, ‘value’: ‘C’},

                                            {'label': 'Income Statement', 'value': 'D'},
                                            {'label': 'Cash Flow', 'value': 'E'},
                                             dash_table.DataTable(id='datatable1')])]),

@app.callback(
Output(‘datatable1’, ‘rows’),
[Input(‘subtab-3’, ‘value’)])
def update_rows(selected_value):
df=balance_sheet=quandl.get(“FRBNY/BANKS_BALSH”, authtoken=“5KykojjZ5rxPgKnV_8rL”)
return df.to_dict(‘records’)