plotly / plotly/dash-ag-grid

persistence does not work when editing cell

Open
#180 8 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug P3
Dominant language
Python
Stars
241
Forks
47
PR merge metrics
No merged PRs in 30d

Description

Based on the Docs:. We would like to make the data persist after editing the table. The persisted_props might be rowData. However, the persistence does not work as in the sample below:

"""
Accessing Row Data in an editable grid
"""
import dash
import dash_ag_grid as dag
from dash import Dash, html, dcc, Input, Output, State,ctx
import plotly.express as px
import pandas as pd
import json


app = Dash(__name__)

df = px.data.medals_wide()


app.layout = html.Div(
    [
        dcc.Markdown(id= 'dummy-input', children="Example of using `rowData` in a callback with an editable grid and added persistence to cell"),
        dag.AgGrid(
            id="editing-grid",
            columnDefs=[{"field": i} for i in df.columns],
            rowData=df.to_dict("records"),
            columnSize="sizeToFit",
            defaultColDef={"editable": True},
            persistence=True,
            persisted_props=['rowData'],     
        ),
    ],
    style={"margin": 20},
)

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

A workaround is to use dcc.Store() as below:

"""
Accessing Row Data in an editable grid
"""
import dash
import dash_ag_grid as dag
from dash import Dash, html, dcc, Input, Output, State,ctx
import plotly.express as px
import pandas as pd
import json

app = Dash(__name__)

df = px.data.medals_wide()

app.layout = html.Div(
    [
        dcc.Markdown(id= 'dummy-input', children="Example of using `rowData` in a callback with an editable grid and added persistence to cell"),
        dag.AgGrid(
            id="editing-grid",
            columnDefs=[{"field": i} for i in df.columns],
            rowData=df.to_dict("records"),
            columnSize="sizeToFit",
            defaultColDef={"editable": True},
        ),
        dcc.Store(id='memory',storage_type = 'session'),
        html.Div(id="editing-grid-output2"),
    ],
    style={"margin": 20},
)

@app.callback(
    Output("memory", "data"),
    Output("editing-grid", "rowData"),
    Input("editing-grid", "cellValueChanged"),
    State("editing-grid", "rowData"),
    State("memory", "data"),
)
def update(cell,rows,saved_rows):
    if saved_rows is None:
        saved_rows = df.to_dict("records")
    if cell is None:
        return saved_rows, saved_rows
    else:
        return rows,rows

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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the persistence documentation linked in the issue and run the first editable-grid sample using persisted_props=['rowData']. Compare its behavior with the dcc.Store workaround, then trace the component's persistence handling. Done means edited cell values remain available after the relevant persistence reload without requiring the workaround.

Written by the indexing model from the issue text.

Assessment

Tech stack
python
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.