Conditional table formatting throws React error (Objects are not valid as a React child)

[ggiesa]

I've been attempting to apply conditional coloring to a table using the method implemented in @chriddyp 's example in #11, but I'm getting a React error and an 'error loading layout' message in the browser. No errors from the flask server though. I'm getting the same thing from the example code and from my own code. Is there a different way to apply conditional formatting now, or is this a bug?

The code in question:

import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_table_experiments as dt

import pandas as pd
import numpy as np

df = pd.DataFrame(np.random.randn(50, 4), columns=list('ABCD'))

COLORS = [
    {
        'background': '#fef0d9',
        'text': 'rgb(30, 30, 30)'
    },
    {
        'background': '#fdcc8a',
        'text': 'rgb(30, 30, 30)'
    },
    {
        'background': '#fc8d59',
        'text': 'rgb(30, 30, 30)'
    },
    {
        'background': '#d7301f',
        'text': 'rgb(30, 30, 30)'
    },
]


def is_numeric(value):
    try:
        float(value)
        return True
    except ValueError:
        return False


def cell_style(value, min_value, max_value):
    style = {}
    if is_numeric(value):
        relative_value = (value - min_value) / (max_value - min_value)
        if relative_value <= 0.25:
            style = {
                'backgroundColor': COLORS[0]['background'],
                'color': COLORS[0]['text']
            }
        elif relative_value <= 0.5:
            style = {
                'backgroundColor': COLORS[1]['background'],
                'color': COLORS[1]['text']
            }
        elif relative_value <= 0.75:
            style = {
                'backgroundColor': COLORS[2]['background'],
                'color': COLORS[2]['text']
            }
        elif relative_value <= 1:
            style = {
                'backgroundColor': COLORS[3]['background'],
                'color': COLORS[3]['text']
            }
    return style


def ConditionalTable(dataframe):
    max_value = df.max(numeric_only=True).max()
    min_value = df.min(numeric_only=True).max()
    rows = []
    for i in range(len(dataframe)):
        row = {}
        for col in dataframe.columns:
            value = dataframe.iloc[i][col]
            style = cell_style(value, min_value, max_value)
            row[col] = html.Div(
                value,
                style=dict({
                    'height': '100%'
                }, **style)
            )
        rows.append(row)

    return rows


app = dash.Dash()

app.scripts.config.serve_locally = True
app.css.config.serve_locally = True

app.layout = html.Div([
    dt.DataTable(
        rows=ConditionalTable(df),

        row_selectable=True,
        filterable=True,
        sortable=True,
        selected_row_indices=[],
        id='datatable',
    )
], className='container')

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

[radekwlsk]

Are you sure that your dash packages are the minimum required versions?

pip install dash==0.19.0
pip install dash-core-components==0.16.0rc1
pip install dash-html-components==0.9.0rc1
pip install dash-renderer==0.13.0rc2
pip install dash-table-experiments==0.6.0rc1

As mentioned by @chriddyp in his comment to #11.

[ggiesa]

Yeah, but I should have left that info when I opened the issue. Thanks for the reply. Here's what I'm working with:

dash==0.21.1
dash-core-components==0.24.0rc2
dash-html-components==0.11.0
dash-renderer==0.13.0rc2
dash-table-experiments==0.6.0 (checked reinstalling with rc1; didn't make a difference)