# How to add persistence to Dash AG grid?

**URL:** <https://community.plotly.com/t/how-to-add-persistence-to-dash-ag-grid/74944>\
**Category:** Dash Python\
**Created:** [May 3, 2023, 5:06pm UTC](https://community.plotly.com/t/how-to-add-persistence-to-dash-ag-grid/74944 "2023-05-03T17:06:43Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![Paichui](https://avatars.discourse-cdn.com/v4/letter/p/bcef8e/32.png) [@Paichui](https://community.plotly.com/u/Paichui)\
**Post date:** [May 3, 2023, 5:06pm UTC](https://community.plotly.com/t/how-to-add-persistence-to-dash-ag-grid/74944/1 "2023-05-03T17:06:43Z")

</div>

Could someone point out where to find persistence in Dash AG grid docs? Thank you

---

<div class="post-metadata">

**Author:** ![AnnMarieW](https://avatars.discourse-cdn.com/v4/letter/a/ec9cab/32.png) [@AnnMarieW](https://community.plotly.com/u/AnnMarieW)\
**Post date:** [May 3, 2023, 5:23pm UTC](https://community.plotly.com/t/how-to-add-persistence-to-dash-ag-grid/74944/2 "2023-05-03T17:23:20Z")

</div>

Hi @Paichui

Great question - there is one example of using persistence in docs, but it’s not easy to find. I’ll add a section on persistence in the next update.

Persistence works with AG Grid the same way as in other Dash components.

This is from the [reference section](https://dashaggrid.pythonanywhere.com/getting-started/reference) of the docs:

**`persisted_props`** (_list of strings_; default `['selectedRows']`): Properties whose user interactions will persist after refreshing the component or the page.

**`persistence`** (_boolean | string | number_; optional): Used to allow user interactions in this component to be persisted when the component - or the page - is refreshed. If `persisted` is truthy and hasn’t changed from its previous value, a `value` that the user has changed while using the app will keep that change, as long as the new `value` also matches what was given originally. Used in conjunction with `persistence_type`.

**`persistence_type`** (_a value equal to: ‘local’, ‘session’, ‘memory’_; default `'local'`): Where persisted user changes will be stored: memory: only kept in memory, reset on page refresh. local: window.localStorage, data is kept after the browser quit. session: window.sessionStorage, data is cleared once the browser quit.

In this example, we set the `filterModel` prop for persistence:

```auto
        dag.AgGrid(         
            persistence=True,
            persisted_props=["filterModel"]
            # other props
        ),

```

> **[Dash AG Grid Filtering with Dash Callbacks](https://dashaggrid.pythonanywhere.com/filtering/filter-callbacks)**
>
> Dash AG Grid Documentation

Here’s another example with persisted `selectedRows` (The default)

```auto
import dash_ag_grid as dag
from dash import Dash, html, dcc

app = Dash( __name__ )

columnDefs = [
    {
        "headerName": "Make",
        "field": "make",
        "checkboxSelection": True,
        "headerCheckboxSelection": True,
    },
    {"headerName": "Model", "field": "model"},
    {"headerName": "Price", "field": "price"},
]

rowData = [
    {"make": "Toyota", "model": "Celica", "price": 35000},
    {"make": "Ford", "model": "Mondeo", "price": 32000},
    {"make": "Porsche", "model": "Boxster", "price": 72000},
]

app.layout = html.Div(
    [
        dcc.Markdown(
            "Selections support persistence. Note `persistence=True` in this example. Try selecting rows here and then refresh the page:"
        ),
        dag.AgGrid(
            id="grid",
            rowData=rowData,
            columnSize="sizeToFit",
            dashGridOptions={"rowSelection": "multiple"},
            persistence=True,
            columnDefs=columnDefs,
        ),

    ]
)

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

```

---

<div class="post-metadata">

**Author:** ![Paichui](https://avatars.discourse-cdn.com/v4/letter/p/bcef8e/32.png) [@Paichui](https://community.plotly.com/u/Paichui)\
**Post date:** [May 3, 2023, 8:40pm UTC](https://community.plotly.com/t/how-to-add-persistence-to-dash-ag-grid/74944/3 "2023-05-03T20:40:57Z")

</div>

> [@AnnMarieW](#):
>
> ```auto
> import dash_ag_grid as dag
> from dash import Dash, html, dcc
> 
> app = Dash( __name__ )
> 
> columnDefs = [
> {
> "headerName": "Make",
> "field": "make",
> "checkboxSelection": True,
> "headerCheckboxSelection": True,
> },
> {"headerName": "Model", "field": "model"},
> {"headerName": "Price", "field": "price"},
> ]
> 
> rowData = [
> {"make": "Toyota", "model": "Celica", "price": 35000},
> {"make": "Ford", "model": "Mondeo", "price": 32000},
> {"make": "Porsche", "model": "Boxster", "price": 72000},
> ]
> 
> app.layout = html.Div(
> [
> dcc.Markdown(
> "Selections support persistence. Note `persistence=True` in this example. Try selecting rows here and then refresh the page:"
> ),
> dag.AgGrid(            
> rowData=rowData,
> columnSize="sizeToFit",
> dashGridOptions={"rowSelection": "multiple"},
> persistence=True,
> columnDefs=columnDefs,
> ),
> 
> ]
> )
> 
> if __name__ == " __main__":
> app.run_server(debug=True)
> 
> ```

Thanks, Ann. That helps a lot.

However, it seems not working when applying persistence to edit the cell value. (as the example below)

```auto
"""
Enable column editing on all columns
"""

import dash_ag_grid as dag
from dash import Dash, html, dcc
import plotly.express as px

app = Dash( __name__ )

df = px.data.medals_wide()

app.layout = html.Div(
    [
        dcc.Markdown("This grid has editing enabled on all columns"),
        dag.AgGrid(
            id = 'my-ag',
            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=False)

```

---

<div class="post-metadata">

**Author:** ![AnnMarieW](https://avatars.discourse-cdn.com/v4/letter/a/ec9cab/32.png) [@AnnMarieW](https://community.plotly.com/u/AnnMarieW)\
**Post date:** [May 3, 2023, 8:43pm UTC](https://community.plotly.com/t/how-to-add-persistence-to-dash-ag-grid/74944/4 "2023-05-03T20:43:28Z")

</div>

Hi @Paichui - Yes, I can confirm that the rowData is not getting persisted. Looks like we should open an issue in GitHub to track this.

---

<div class="post-metadata">

**Author:** ![Paichui](https://avatars.discourse-cdn.com/v4/letter/p/bcef8e/32.png) [@Paichui](https://community.plotly.com/u/Paichui)\
**Post date:** [May 8, 2023, 8:02pm UTC](https://community.plotly.com/t/how-to-add-persistence-to-dash-ag-grid/74944/5 "2023-05-08T20:02:28Z")

</div>

Thanks for the confirmation, Ann.

I have logged an issue and created a workaround using `dcc.Store()`. The example is at: [[Bug] persistence does not work when editing cell · Issue #180 · plotly/dash-ag-grid · GitHub](https://github.com/plotly/dash-ag-grid/issues/180)

---

<div class="post-metadata">

**Author:** ![entropy\_l](https://avatars.discourse-cdn.com/v4/letter/e/ee7513/32.png) [@entropy\_l](https://community.plotly.com/u/entropy_l)\
**Post date:** [August 20, 2023, 1:33am UTC](https://community.plotly.com/t/how-to-add-persistence-to-dash-ag-grid/74944/6 "2023-08-20T01:33:36Z")

</div>

Hey:

I just tried with the latest Ag grid but still see the “rowData” cannot be persistent.  
was reading here:

> <https://github.com/plotly/dash-ag-grid/issues/180>
>
> Based on the \[Docs:.\](https://dashaggrid.pythonanywhere.com/persistence/persiste…nce) 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)
> \`\`\`

Does this workaround reasonable? Sorry I didn’t understand the last comment “For now, this work around for persistence will need to mainstream.”

Thanks

---

<div class="post-metadata">

**Author:** ![jinnyzor](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jinnyzor/32/21194_2.png) [@jinnyzor](https://community.plotly.com/u/jinnyzor)\
**Post date:** [August 20, 2023, 1:49am UTC](https://community.plotly.com/t/how-to-add-persistence-to-dash-ag-grid/74944/7 "2023-08-20T01:49:30Z")

</div>

Correct, rowData cannot persist due to how the underlying AG grid component functions.

---

<div class="post-metadata">

**Author:** ![entropy\_l](https://avatars.discourse-cdn.com/v4/letter/e/ee7513/32.png) [@entropy\_l](https://community.plotly.com/u/entropy_l)\
**Post date:** [August 20, 2023, 2:17am UTC](https://community.plotly.com/t/how-to-add-persistence-to-dash-ag-grid/74944/8 "2023-08-20T02:17:14Z")

</div>

Thanks. We should be using the workaround method now right? Thank you!!

---

<div class="post-metadata">

**Author:** ![jinnyzor](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jinnyzor/32/21194_2.png) [@jinnyzor](https://community.plotly.com/u/jinnyzor)\
**Post date:** [August 20, 2023, 3:09am UTC](https://community.plotly.com/t/how-to-add-persistence-to-dash-ag-grid/74944/9 "2023-08-20T03:09:33Z")

</div>

Yes. That is correct.

---

<div class="post-metadata">

**Author:** ![entropy\_l](https://avatars.discourse-cdn.com/v4/letter/e/ee7513/32.png) [@entropy\_l](https://community.plotly.com/u/entropy_l)\
**Post date:** [August 20, 2023, 3:24am UTC](https://community.plotly.com/t/how-to-add-persistence-to-dash-ag-grid/74944/10 "2023-08-20T03:24:13Z")

</div>

Thank you so much!

I feel the persistency for table seems a very important feature, as Excel also have that feature. Thank you.

---

<div class="post-metadata">

**Author:** ![jinnyzor](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jinnyzor/32/21194_2.png) [@jinnyzor](https://community.plotly.com/u/jinnyzor)\
**Post date:** [August 20, 2023, 4:11am UTC](https://community.plotly.com/t/how-to-add-persistence-to-dash-ag-grid/74944/11 "2023-08-20T04:11:15Z")

</div>

There isn’t much we can do about it, AG grid manipulates the rowData in place. This means that Dash never receives that it was adjusted, because the base object has been modified.

If you have ever tried to alter a figure in a callback, you would also encounter this issue.

---

<div class="post-metadata">

**Author:** ![entropy\_l](https://avatars.discourse-cdn.com/v4/letter/e/ee7513/32.png) [@entropy\_l](https://community.plotly.com/u/entropy_l)\
**Post date:** [August 20, 2023, 4:19am UTC](https://community.plotly.com/t/how-to-add-persistence-to-dash-ag-grid/74944/12 "2023-08-20T04:19:37Z")

</div>

Thank you for confirming this. Appreciate your reply for all my questions today!