Styling Dash DataTable select rows radio button and checkbox

Hello,

I’m currently working on creating a Dash DataTable where users select either single or multiple rows. The default color on both the checkbox and the radio buttons when using row_selectable is quite jarring for my current theme. I’ve tried to manually edit the color of the checkbox using the background color in the developer tools in my browser, but that does not work.

Is changing the style of the row_selectable radio buttons or checkboxes possible?

Hi @raptorbrad

Th radio buttons and checkboxes in the DataTable are a little tricky to style, but it’s possible to do this with CSS. I recommend creating a specific CSS class for this so it doesn’t interfere with the styling of other check boxes and radio buttons in other parts of your app.

Here is some css that’s designed to be used with the dash-bootstrap-components library version 1.0 or greater. It’s designed to work with any of the 26 themes in the dbc library without having to make any changes other than changing the theme. (You can modify this to use with other stylesheets if you are not using the dbc library)


.dbc-row-selectable input[type=checkbox],  .dbc-row-selectable input[type=radio] {
    border: 1px solid rgb(100, 100, 100);
    color: var(--bs-body-color);
    font-weight: bold;
    background-color: inherit;
    width: 1em;
    height: 1em;
    outline: 0;
    padding: 0;
    float: left;
    -webkit-appearance: none;
    -moz-appearance: none;
    margin-right: 5px;
}

.dbc-row-selectable input[type=radio] {
    border-radius: 50%;
    position: relative;
}

.dbc-row-selectable input[type=radio]:checked:before {
    content: "";
    background-color: var(--bs-primary);
    float: left;
    height: 100%;
    width: 100%;
    position: absolute;
    transform: scale(0.65);
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
}

.dbc-row-selectable input[type=checkbox]:checked:before {
    content: "✓";
    float: left;
    width: 1em;
    height: 1em;
    line-height: 1em;
    text-align: center;
}

Now you can add this to your DataTable like this:

table = html.Div(
    dash_table.DataTable(
        id="table",
        columns=[{"name": i, "id": i} for i in df.columns],
        data=df.to_dict("records"),
        row_selectable="multi",      
    ),
    className="dbc-row-selectable",
)

I just added this to my dbc_css stylesheet which styles the DataTable and Dash Core Components with a Bootstrap theme. The cool thing is that you don’t have to change any of the code or the CSS when you change the Bootstrap theme. You just need to have className="dbc" on the outer container of your app and if you have a DataTable with selectable rows, then add the className="dbc-row-selectable" to the datatable like shown above.

Note that the active and selected cells and the color of the icons use the theme’s primary color. The font-family, text color and background colors are also updated for the theme automatically.

Here are some examples:

VAPOR theme:
table_vapor

MINTY theme:

table_minty

import dash
from dash import html, dash_table
import dash_bootstrap_components as dbc
import pandas as pd


dbc_css = "https://cdn.jsdelivr.net/gh/AnnMarieW/dash-bootstrap-templates/dbc.css"
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.VAPOR, dbc_css])

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

table = html.Div(
    dash_table.DataTable(
        id="table",
        columns=[{"name": i, "id": i} for i in df.columns],
        data=df.to_dict("records"),
        row_selectable="single",
        row_deletable=True,
        editable=True,
        filter_action="native",
        sort_action="native",
        style_table={"overflowX": "auto"},
    ),
    className="dbc-row-selectable",
)

app.layout = dbc.Container([table], className="m-4 dbc")

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

See more info and a live demo here:

1 Like