How to Dynamically highlight First row of the Dash table on initial Load

Dash Python
1

I would love to highlight the First row of the Dash Table as soon as the app is loaded on the webpage.

I am able to currently highlight the cell by clicking the row, but i need the afforementioned as well.

The reason being the first row of the cell helps me to display a graph based on the values present in it.
This happens on the initial load of the app. I wanted to make it more user friendly so that the user knows the graphs generated are based on the first row of the table.

Any help is apppreciated …

Thanks in advance.

2

hey guys, I found a way to do this question.

from dash import Dash, dash_table
import pandas as pd

df = pd.DataFrame({
    'A': [1, 2, 3],
    'B': [4, 5, 6],
    'C': [7, 8, 9]
})

app = Dash(__name__)

style_data_conditional = [
    {
        'if': {'row_index': 0, 'column_id': 'A'},
        'backgroundColor': '#FFD700',
        'color': 'black'
    },
 {
        'if': {'row_index': 0, 'column_id': 'B'},
        'backgroundColor': '#FFD700',
        'color': 'black'
    },
 {
        'if': {'row_index': 0, 'column_id': 'C'},
        'backgroundColor': '#FFD700',
        'color': 'black'
    }
]

app.layout = dash_table.DataTable(
    id='table',
    columns=[{'name': col, 'id': col} for col in df.columns],
    data=df.to_dict('records'),
    style_data_conditional=style_data_conditional,
    style_table={'height': '600px', 'width': '600px', 'float': 'left', 'overflowY': 'auto'},
    hidden_columns=['filePath', 'side', 'URL', 'lane', 'description', 'hash', 'specification limit', 'time'],
    css=[{'selector': '.show-hide', 'rule': 'display: none'}]
)

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

This works for me.