Style_data_conditional loop

Dash Python
1

How do i use the loop to for c in ['COL1', 'COL2'] to accomplish the data styling. In the code beneath i use two times the same code block. Also how do i set the tree columns at a fixed width.

import dash     
import dash_table
import pandas as pd
from collections import OrderedDict
app = dash.Dash(__name__)
data = OrderedDict(
    [
        ("Title", ["one", "two", "treem"]),
        ("COL1", [50, 20, 80]),
        ("COL2", [10,40,90])
    ]
)

df = pd.DataFrame(data)

app.layout = dash_table.DataTable(
    data=df.to_dict('records'),
    columns=[{'id': c, 'name': c} for c in df.columns],
    style_table={'height': '300px', 'overflowY': 'auto'},

      style_cell_conditional=[        
          {
              'if': {'column_id': c},
              'textAlign': 'Center',
              'width' : '40px'
          } for c in ['COL1', 'COL2']
         
          
      ] +[ {'if': {'column_id': 'Title'},'backgroundColor': 'gray'}]
      ,
    style_header={
        'backgroundColor': 'gray',
        'fontWeight': 'bold',
        'border': '1px solid black'
    },
    style_data_conditional=[     
        {
            'if': {
                'column_id': 'COL1',
                'filter_query': '{COL1} eq 50'
            },
            'backgroundColor': 'orange'
        },
        {
            'if': {
                'column_id': 'COL1',
                'filter_query': '{COL1} > 50'
            },
            'backgroundColor': 'green'
        },
        {
            'if': {
                'column_id': 'COL1',
                'filter_query': '{COL1} < 50'
            },
            'backgroundColor': 'red'
        },
     ]+
    [     
        {
            'if': {
                'column_id': 'COL2',
                'filter_query': '{COL2} eq 50'
            },
            'backgroundColor': 'orange'
        },
        {
            'if': {
                'column_id': 'COL2',
                'filter_query': '{COL2} > 50'
            },
            'backgroundColor': 'green'
        },
        {
            'if': {
                'column_id': 'COL2',
                'filter_query': '{COL2} < 50'
            },
            'backgroundColor': 'red'
        },
     ],
)

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

hi @marvy
Very good question. You can do that by using triple curly brackets.

Try to run this code.

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

data_eq_50 = [
    {
    'if': {
       'column_id': c,
       'filter_query': f'{{{c}}} eq 50'
    },
    'backgroundColor': 'orange'
    }
    for c in ['COL1', 'COL2']
]
data_bg_50 = [
    {
       'if': {
           'column_id': c,
           'filter_query': f'{{{c}}} > 50'
       },
       'backgroundColor': 'green'
    }
    for c in ['COL1', 'COL2']
]

data_sm_50 = [
    {
       'if': {
           'column_id': c,
           'filter_query': f'{{{c}}} < 50'
       },
       'backgroundColor': 'red'
    }
    for c in ['COL1', 'COL2']
]

app = Dash(__name__)
data = OrderedDict(
    [
        ("Title", ["one", "two", "treem"]),
        ("COL1", [50, 20, 80]),
        ("COL2", [10, 40, 90])
    ]
)

df = pd.DataFrame(data)

app.layout = dash_table.DataTable(
    data=df.to_dict('records'),
    columns=[{'id': c, 'name': c} for c in df.columns],
    style_table={'height': '300px', 'overflowY': 'auto'},

    style_cell_conditional=[
                               {
                                   'if': {'column_id': c},
                                   'textAlign': 'Center',
                                   'width': '40px'
                               } for c in ['COL1', 'COL2']

                           ] + [{'if': {'column_id': 'Title'}, 'backgroundColor': 'gray'}]
    ,
    style_header={
        'backgroundColor': 'gray',
        'fontWeight': 'bold',
        'border': '1px solid black'
    },
    style_data_conditional=data_eq_50+data_bg_50+data_sm_50
)

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

If I want to apply this to multiple datatables:

How can i add this to a class using the code beneath ;

app.layout = dbc.Container([
    
    dbc.Row([
        dbc.Col(html.Div([dash_table.DataTable(data=df.to_dict('records'))],className='df_lay'),width=3),
        dbc.Col(html.Div([dash_table.DataTable(data=df.to_dict('records'))],className='df_lay'),width=3),
        dbc.Col(html.Div([dash_table.DataTable(data=df.to_dict('records'))],className='df_layl'),width=3),
        dbc.Col(html.Div([dash_table.DataTable(data=df.to_dict('records'))],className='df_lay'),width=3),
        ]),
    dbc.Row([
        dbc.Col(html.Div([dash_table.DataTable(data=df.to_dict('records'))],className='df_lay'),width=3),
        dbc.Col(html.Div([dash_table.DataTable(data=df.to_dict('records'))],className='df_lay'),width=3),
        dbc.Col(html.Div([dash_table.DataTable(data=df.to_dict('records'))],className='df_lay'),width=3),
        dbc.Col(html.Div([dash_table.DataTable(data=df.to_dict('records'))],className='df_lay'),width=3),
        ])
    ])