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

Dash Python
1

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
2

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;
}

filtercolor
filtercolor1828×635 113 KB

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)
7 Likes
3

Thanks!

I will try that out