Styling Dash DataTable select rows radio button and checkbox

Dash Python
2

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:

3 Likes