Dash data table ... error ... how to construct with callback

Dash Python
1

Hi

I have a table with styles that works, but, when traying to implement it in my app with callbacks and drag and drops, I find errors.

How can I solve this:

firstly:

It has an input

after that it must show the table, but erros always appear.

one of the erros is this one:

The value in question is either the only value returned,
or is in the top level of the returned list,

                and has string representation
                `<dash.dash.Dash object at 0x000001A35C8DCFD0>`

                In general, Dash properties can only be
                or lists of those.

also, don’t know what to put as component in the callback (I dont know if that is how its called); children, data or others …

and in the Tab, how do I express it:

is this correct? :

dbc.Container(
                    [
                            align="center",
                        ),
                        dbc.Row(
                            [
                                
                                dbc.Col([
                                    html.Div(id='contenedor_push')
                                ],)
                            ],
                            align="center",
                        ),

a simple example for the table is this :

from dash import Dash, dash_table
import pandas as pd
from collections import OrderedDict




data = OrderedDict(
    [
        ("Call", ["A", "K", "Q", "J", "T", "9", "8", "7", "6", "5", "4", "3", "2"]),
        ("A", [0.5,3,5,7,8,10,14,16,20,22,24,25,29]),
        ("K", [3,0.9,12,15,19,26,32,35,36,38,42,44,48]),

    ]
)

df = pd.DataFrame(data)
#innput=7#input("insert the value: ")
#df.set_index("Push")
app = Dash(__name__)

  
innput=7#float(input("Please choose a value: "))
#innput=(innput/100)

df['id'] = df.index
#print(df)
app.layout = dash_table.DataTable(
    data=df.to_dict('records'),
    
    #sort_action='native',
    columns=[{'name': i, 'id': i} for i in df.columns if i != 'id'],
    style_data_conditional=[
        {
            'if': {
                'filter_query': '{{{}}} <= {}'.format(col, innput),
                'column_id': col
            },
            'backgroundColor': '#B10DC9',
            'color': 'white'
        }  for col in df.columns[1:]
    ] + [
        {
            'if': {
                'filter_query': '{{{}}} <= {}'.format(col, innput*2/3),
                'column_id': col
            },
            'backgroundColor': 'yellow',
            'color': 'black'
        }  for col in df.columns[1:]
    ]
     +     
    [
        {
            'if': {
                'filter_query': '{{{}}} <= {}'.format(col, innput/3),
                'column_id': col
            },
            'backgroundColor': 'red',
            'color': 'white'
        }  for col in df.columns[1:]
    ] 
)

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

But can’t manage to pass it to my app with callbacks. Please help.

2

As I understand you want to have an Input and then pass value from the Input to return Datatable with style. Below is my code:

from dash import Dash, dash_table
import pandas as pd
from collections import OrderedDict
from dash.dependencies import Input, Output

data = OrderedDict(
    [
        ("Call", ["A", "K", "Q", "J", "T", "9", "8", "7", "6", "5", "4", "3", "2"]),
        ("A", [0.5, 3, 5, 7, 8, 10, 14, 16, 20, 22, 24, 25, 29]),
        ("K", [3, 0.9, 12, 15, 19, 26, 32, 35, 36, 38, 42, 44, 48]),

    ]
)

df = pd.DataFrame(data)
# innput=7#input("insert the value: ")
# df.set_index("Push")
app = Dash(__name__)
df['id'] = df.index

app.layout = html.Div([
    dcc.Input(id='range', type='number', min=1, step=1, value=7),
    html.Div(id='table')
])


@app.callback(Output('table', 'children'),
              Input('range', 'value'))
def update_table(innput):
    return dash_table.DataTable(
        data=df.to_dict('records'),
        # sort_action='native',
        columns=[{'name': i, 'id': i} for i in df.columns if i != 'id'],
        style_data_conditional=[
                                   {
                                       'if': {
                                           'filter_query': '{{{}}} <= {}'.format(col, innput),
                                           'column_id': col
                                       },
                                       'backgroundColor': '#B10DC9',
                                       'color': 'white'
                                   } for col in df.columns[1:]
                               ] + [
                                   {
                                       'if': {
                                           'filter_query': '{{{}}} <= {}'.format(col, innput * 2 / 3),
                                           'column_id': col
                                       },
                                       'backgroundColor': 'yellow',
                                       'color': 'black'
                                   } for col in df.columns[1:]
                               ]
                               +
                               [
                                   {
                                       'if': {
                                           'filter_query': '{{{}}} <= {}'.format(col, innput / 3),
                                           'column_id': col
                                       },
                                       'backgroundColor': 'red',
                                       'color': 'white'
                                   } for col in df.columns[1:]
                               ]
    )


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

Screenshot 2023-02-06 090359
Screenshot 2023-02-06 0903591912×456 5.6 KB

1 Like
3

Thanks! it works!