Saving Modified Dash DataTable to new Dataframe

First Time posting here and I’m a self taught programming newb but I am stuck after looking the documentation and stack overflow.

I’ve created a datatable with editable contents. Those edits work great for the visualization, but I have no way of now saving the modified data to later be uploaded to a SQL database. Ideally I want to make an upload button and that executes the write portion of the modified entry to a postgres table for further processing in python.

Any help would be greatly appreciated:

df = pd.DataFrame(deacttable.items(), columns =['material', 'count'])
df['id'] = df['material']
df.set_index('id', inplace=True, drop=False)


app.layout = html.Div([
    html.H1(children="Deactivation Lot Assignment", style={'textAlign':'center', 'font-family': 'Comic Sans MS'}),
    html.Div(dcc.Input(id='input-on-submit', type='text')),
    html.Button('Submit', id='submit-val', n_clicks=0),
    html.Div(
        dt.DataTable(
        id='datatable-interactivity',
        columns=[
            {'name': i, 'id': i, 'deletable': True} for i in df.columns
            # omit the id column
            if i != 'id'
        ],
        data=df.to_dict('records'),
        editable=True,
        filter_action="native",
        sort_action="native",
        sort_mode='multi',
        row_selectable='multi',
        row_deletable=True,
        selected_rows=[],
        page_action='native',
        page_current= 0,
        page_size= 10,
        export_format='xlsx',
    ), style={'margin-left':'25%', 'textAlign':'center', 'width':'50%'}),

    html.Div(id='datatable-interactivity-container')
])

@app.callback(
    Output('datatable-interactivity-container', "children"),
    Input('datatable-interactivity', "derived_virtual_data"),
    Input('datatable-interactivity', "derived_virtual_selected_rows"))
def update_graphs(rows, derived_virtual_selected_rows):
    # When the table is first rendered, `derived_virtual_data` and
    # `derived_virtual_selected_rows` will be `None`. This is due to an
    # idiosyncrasy in Dash (unsupplied properties are always None and Dash
    # calls the dependent callbacks when the component is first rendered).
    # So, if `rows` is `None`, then the component was just rendered
    # and its value will be the same as the component's dataframe.
    # Instead of setting `None` in here, you could also set
    # `derived_virtual_data=df.to_rows('dict')` when you initialize
    # the component.
    if derived_virtual_selected_rows is None:
        derived_virtual_selected_rows = []

    dff = df if rows is None else pd.DataFrame(rows)

    colors = ['#7FDBFF' if i in derived_virtual_selected_rows else '#0074D9'
              for i in range(len(dff))]
    
    return [
        dcc.Graph(
            id=column,
            figure={
                "data": [
                    {
                        "x": dff["material"],
                        "y": dff[column],
                        "type": "bar",
                        "marker": {"color": colors},
                    }
                ],
                "layout": {
                    "xaxis": {"automargin": True},
                    "yaxis": {
                        "automargin": True,
                        "title": {"text": column}
                    },
                    "height": 250,
                    "margin": {"t": 10, "l": 10, "r": 10},
                },
            },
        )
        # check if column exists - user may have deleted it
        # If `column.deletable=False`, then you don't
        # need to do this check.
        for column in ['count'] if column in dff
    ]

The Dash Datatable has a property “Data” that is a list of Dictionary of the current values of the table. It also has the property “data_previous” with the information that had before.
There are others properties that can allow you to get your goal, see the list here: Reference | Dash for Python Documentation | Plotly

1 Like