How can I style 1 column of a datatable?

Hi

I have a table tha looks like this:

image

and I will like to change color of the left column as the headers.

How can I do this?

I’ve tried with this.

style_data_conditional=
        [
            {                
                'backgroundColor': 'white',
                'color': 'black'
            }  
        ] 
        +
        [
            {
                
            'backgroundColor': 'grey',
            'color': 'white'
            }
            
        ]

How do I filter for only the first column?

I think you should define 'column_id':'Call' in your style_data_conditional. Something as below:

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':{'column_id':'Call'},
                                 'backgroundColor': 'grey',
                                 'color': 'white'}]+
                                   [{
                                       '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)

1 Like