Highlight Datatable Changed Values

Dash Python
1

Hi Everyone! So I have a Dash Datatable that has initial data and the user has the ability to edit the data. However, I would like the user to be able to visibly see the cells that they have made changes to (ex. make the font color of the cells with the changed values red). Below is code for a sample Dash DataTable with editable columns. Any advice on how to go about applying that conditional formatting would be appreciated! Thanks in advance! (Also, while you’re here, if you have any suggestions on how to toggle a column’s editability with a button so that the user doesn’t have to worry about unintentional changes to the cells when looking at the DataTable, that would be appreciated as well!)

from dash import Dash, Input, Output, dash_table
import pandas as pd
import numpy as np

app = Dash(__name__)


def random_data():
    df = pd.DataFrame(np.random.randint(0, 100, size=(10, 4)), columns=list("ABCD"))
    return df.to_dict("records")


app.layout = dash_table.DataTable(
    columns=[
        {"name": column, "id": column, "editable": True, "type": "numeric"}
        for column in list("ABCD")
    ],
    data=random_data(),
    id="sample-datatable",
)

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

@chriddyp I apologize for tagging you directly in this post, but if you have any suggestions for how to go about implementing this, I would be grateful as this is definitely a feature that would alleviate some of the stress on users of accidentally changing values that they did not mean to. Thanks!

3

Hi @dash-beginner

I haven’t tried doing this myself, but it should be possible. This post might help:

Then if you know what rows and columns have change you can update the style_data_conditional prop to highlight the changes.

For the editable columns toggle, that should be pretty easy. The button could trigger a callback to update the columns prop with either:

columns=[
        {"name": column, "id": column, "editable": True, "type": "numeric"}
        for column in list("ABCD")
    ]

or

columns=[
        {"name": column, "id": column,  "type": "numeric"}
        for column in list("ABCD")
    ]

I hope that helps