Filterable and Editable Data Tables with Other Graphs

Dash Python
1

I am new to Python Dash, so I am not sure what is possible. What I would like to accomplish is making a datatable where the user is able to manipulate data in the datatable which would result in changes for other graphs.

Here is an example of what I am trying to do:

I have information about people’s grocery lists and I would like to be able to change what is in their list

The data that I have is structured as such

Name Item Amount
Bob Apple 1
Bob Banana 2
Anna Apple 2
Anna Banana 1

I would like to be able to have a datatable where there is a drop down to select the person’s list so the datatable would just have their items and amounts. In the selected datatable, they should be able to add and delete rows, change the item with a dropdown in the cell, and change the amount by typing in the desired amount.

I have been able to create this somewhat where you can select a person’s list, and the item can be changed based on a list of foods given, but I cannot figure out how to do the rest. Here is what I have been able to put together for my example

from dash import dash_table as dt
from dash import dcc
from dash import html
from dash.dependencies import Input
from dash.dependencies import Output
import pandas as pd

df = pd.DataFrame({'Name' : ['Bob', 'Bob', 'Anna', 'Anna'],
                   'Item' : ['Apple', 'Banana', 'Apple', 'Banana'],
                   'Amount' : [1, 2, 2, 1]})

app = dash.Dash(__name__)

names = df['Name'].unique().tolist()
app.layout = html.Div(
    children=[
        dcc.Dropdown(
            id="filter_dropdown",
            options=[{"label": name, "value": name} for name in names],
            placeholder="-Select a Person-",
            multi=False,
            value=df['Name'].values,
        ),
        dt.DataTable(
            id="table-container",
            columns=[{'name': 'Item', 'id': 'Item', 'presentation':'dropdown'},
                     {'name': 'Amount', 'id': 'Amount'}],
            data=df.to_dict("records"),
            editable=True,
            dropdown={
                'Item' : {
                    'options': [
                        {'label': i, 'value': i}
                        for i in list(df['Item'].unique())
                        ]
                    }
                }
        )
    ]
)
@app.callback(
    Output("table-container", "data"), 
    Input("filter_dropdown", "value"))
def display_table(name):
    dff = df[df['Name'].isin([name])]
    return dff.to_dict("records")
    

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

Here is what it looks like in the browser
enter image description here

I can select an item from the dropdown in the cell and it will appear to change it, but when I switch between people it loses its change that I made. I also cannot change the amounts. The next step would be is if I can use all the data as well as the changes in the data in another graph (for example to show how many people have a certain item). If someone would be able to help, I would appreciate it.

Thanks

2

All you need to do is just add a small button on the side to save your data.
Probably like,

@app.callback(
    Output("dbc-alert", "children"), 
    Input("button", "n_clicks"),
    State("data-table", "data"))
def display_table(n_clicks, data):
    if on_clicks is None:
        raise PreventUpdate
    # save your data to somewhere
    return 'Success!'