Learn how to use Dash Bio for next-gen sequencing & quality control. 🧬Register for the Oct 27 webinar.

Change color of "filter data..." in dash-table?

Any ideas on how to change the color of the “filter data…” in a datatable?

I have a black background which makes it hard to see the “filter data…”.

I looked through the source code of the dash-table package but couldn’t find where the color is set.

Any help is greatly appreciated. @chriddyp

2 Likes

Hi @ptz

You can set the background color with style_filter, but it doesn’t seem to change the color of the text, even when you include it here like this:

        style_filter={
            'backgroundColor': 'blue',
            'color': 'white'
        },  

However, if you add this to your custom css in the assets folder, it works:


.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner input:not([type=radio]):not([type=checkbox]){
    color: white!important;
}

Here is a full working example that includes how to change the color of the filter row, plus change the default pink color of the selected and active cells

import dash
from dash.dependencies import Input, Output
import dash_table
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd

df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminder2007.csv')

app = dash.Dash(__name__)

app.layout = html.Div([
    dash_table.DataTable(
        id='datatable-interactivity',
        columns=[
            {"name": i, "id": i, "deletable": True, "selectable": True} for i in df.columns
        ],
        data=df.to_dict('records'),
        editable=True,
        filter_action="native",
        sort_action="native",
        sort_mode="multi",
        column_selectable="single",
        row_selectable="multi",
        row_deletable=True,
        selected_columns=[],
        selected_rows=[],
        page_action="native",
        page_current= 0,
        page_size= 10,
       
        style_header={'backgroundColor': 'rgb(30, 30, 30)'},
        style_cell={
            'backgroundColor': 'rgb(50, 50, 50)',
            'color': 'white'
        }, 
        style_data={ 'color': 'white'},
        style_filter={
            'backgroundColor': 'blue',
            'color': 'white'
        },  
        style_filter_conditional=[                
            {
                "if": {'column_id': 'country',},
                "backgroundColor": "rgba(0, 116, 217, 0.3)",
                "border": "1px solid blue",               
            },   
            {
                "if": {'column_id': 'pop',},
                "backgroundColor": "rgb(30, 30, 30)",
                "border": "1px solid blue",               
            },
        ],
        style_data_conditional=[                
                {
                    "if": {"state": "selected"},  # 'active' | 'selected'
                    "backgroundColor": "rgba(0, 116, 217, 0.3)",
                    "border": "1px solid blue",
                },
                {
                    "if": {"state": "active"},  # 'active' | 'selected'
                    "backgroundColor": "rgba(0, 116, 217, 0.3)",
                    "border": "1px solid rgb(0, 116, 217)",
                },
            ],        
    ),
    html.Div(id="datatable-interactivity-container"),
],

)

@app.callback(
    Output("datatable-interactivity", "style_data_conditional"),
    [Input("datatable-interactivity", "selected_columns")],
)
def update_styles(selected_columns):    
    return [
         
        {"if": {"column_id": i}, "backgroundColor": "#D2F3FF"} for i in selected_columns
        ] + [
        
            {  # added code to keep style of selected cells
                "if": {"state": "selected"},  # 'active' | 'selected'
                "backgroundColor": "rgba(0, 116, 217, 0.3)",
                "border": "1px solid blue",
            },
            {
                "if": {"state": "active"},  # 'active' | 'selected'
                "backgroundColor": "rgba(0, 116, 217, 0.3)",
                "border": "1px solid yellow",
            },
        ]


@app.callback(
    Output('datatable-interactivity-container', "children"),
    [Input('datatable-interactivity', "derived_virtual_data"),
     Input('datatable-interactivity', "derived_virtual_selected_rows")])
def update_graphs(rows, derived_virtual_selected_rows):
    
    if derived_virtual_selected_rows is None:
        derived_virtual_selected_rows = []

    dff = df if rows is None else pd.DataFrame(rows)

    colors = ['#7FDBFF' if i in derived_virtual_selected_rows else '#0074D9'
              for i in range(len(dff))]

    return [
        dcc.Graph(
            id=column,
            figure={
                "data": [
                    {
                        "x": dff["country"],
                        "y": dff[column],
                        "type": "bar",
                        "marker": {"color": colors},
                    }
                ],
                "layout": {
                    "xaxis": {"automargin": True},
                    "yaxis": {
                        "automargin": True,
                        "title": {"text": column}
                    },
                    "height": 250,
                    "margin": {"t": 10, "l": 10, "r": 10},
                },
            },
        )
        
        for column in ["pop", "lifeExp", "gdpPercap"] if column in dff
    ]


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

4 Likes

Thanks!

I will try that out