Editable DataTable empty cell highligthing

Dash Python
1

Is it possible to highlight cells of an editable DataTable (DataTableReference) which have not been filled with content by a user e.g. via setting the cell background color to red. To highlight cells for a specifc value of e.g. 20 done with:

                        dash_table.DataTable(
                            id='table',
                            columns=[
                                {'name': 'id', 'id': 'column-id'},
                                {'name': 'name', 'id': 'column-name'},
                            ],
                            data=[],
                            style_data_conditional=[
                                {
                                'if': {
                                    'column_id': 'column-id',
                                    'filter_query': '{column-id} eq 20',
                                    },
                                    'backgroundColor': 'red',
                                    },
                            ],
                            editable=True,
                            row_deletable=True,
                        )

However I could not found a suitable filter rule in DataTable Style ( Conditional Formatting - Highlighting Cells) and DataTable Filtering for “empty”.

2

One possible way to do it is to initialize your table with nan values and then then test for nan values using 'filter_query': '{column-id} is nil'. Below is one example that does what you want I think

import dash
from dash.dependencies import Input, Output
import dash_table
import dash_core_components as dcc
import dash_html_components as html
import numpy as np

app = dash.Dash(__name__)


app.layout = html.Div([
    dash_table.DataTable(
        id='table-editing-simple',
        columns=(
            [{'id': 'Model', 'name': 'Model'}] +
            [{'id': 'Weight', 'name': 'Weight'}]
        ),
        data=[
            dict(Model=i, Weight=np.nan)
            for i in range(1, 3)
        ],
        editable=True,
        style_data_conditional=[
                                {
                                'if': {
                                    'column_id': 'Weight',
                                    'filter_query': '{Weight} is nil',
                                    },
                                    'backgroundColor': 'red',
                                    },
                            ],
    ),
])


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

I also added an issue in the dash-table repo https://github.com/plotly/dash-table/issues/597 to allow for a more natural syntax when filtering blank values.

3 Likes
3

Thx a lot. Works perfectly fine.