How to update DataTable with data from localStore?

Dash Python
1

New to Dash and missing something obvious…

I am saving named groups of datapoints into localStorage for later retrieval/application as filters. The data stored in localStorage (called “dogroups_highlighted_points”) looks like this:

[
   {'date':'21-03-31', 'groupName':'First collection name', 'data':['dt001','dt002','dt003']},
   {'date':'21-04-03', 'groupName':'Samedi Lundi project', 'data':['dt008','dt014','dt033','dt051','dt079']}
]

The above localStore shows two saved groups, so I now wish to use a dataTable to allow the user to delete from this collection of saved groups.

I understand how to read-in the localStorage file, but not how to send that data to the dataTable. Seems like it should be obvious but I cannot find an example. Here’s where I’m at.

App Layout:

existing_groups_list = []
tbl_existing_groups_cols = ['date', 'groupName']

dash_table.DataTable(
    id='saved_groups_table',
    data=existing_groups_list,
    columns=[{'name': i, 'id': i} for i in tbl_existing_groups_cols],
    row_selectable='single',
)

Callback:

@app.callback(
    Output(component_id='saved_groups_table', component_property='children'),
    Input('main_chart', 'selectedData'),Input('dogroups_highlighted_points', 'data'),
    prevent_initial_call=False
)
def update_saved_groups_table(chartt, savedGroups):
    _df = pd.DataFrame(savedGroups)
    _df = _df.drop(['data'], axis=1)
    return _df.to_dict('records')

There are no errors, but I’m missing something obvious b/c the dataTable is not being updated with the localStorage data…

What have I missed?

Does anyone know of an example that touches on what I’m trying to do (doesn’t hurt to ask)?

2

Hi,

Would this be fixed by changing your callback? Your current output is set to update the “children” of dashDataTable, whereas when I’ve dealt with datatables in Dash I export the “data” property not children.

Also note that because you don’t update the columns within the callback, you will never see the updated “data” column. Don’t know if thats intentional.

Hopefully that helps.

1 Like
3

Thanks JP, that did fix it. Odd, because through most of my attempts I had been updating the data property, unsuccessfully, and switched over to updating the children property only at the very end of my efforts and thought I had repeated all tests. That one simple change did the trick - appreciate the help!

(And yes, it was my intention to drop that final column since my objective at this point is only to manage the rows themselves as opposed to seeing their data points) Thank you, though, for pointing that out lest I had missed it.