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:

3 Likes

Hi @AnnMarieW

I’m having trouble getting the font in a DataTable to follow the Bootstrap theme’s font. I followed the instructions at https://hellodash.pythonanywhere.com/adding-themes/getting-started but I still can’t get the font in the table to change.

from dash import Dash, dcc, html, Input, Output, dash_table
import dash_bootstrap_components as dbc
import pandas as pd

df = pd.read_csv('master-active.csv')
divs = ['Heavyweight', 'Light Heavyweight', 'Middleweight', 'Welterweight', 'Lightweight', 'Featherweight', 'Bantamweight', 'Flyweight', "Women's Featherweight", "Women's Bantamweight", "Women's Flyweight", "Women's Strawweight"]
dbc_css = "https://cdn.jsdelivr.net/gh/AnnMarieW/dash-bootstrap-templates/dbc.min.css"

table = html.Div(
    dash_table.DataTable(df.to_dict(orient='records'), id='table')
)

app = Dash(__name__, external_stylesheets=[dbc.themes.FLATLY, dbc_css])

app.layout = html.Div([
    html.H1(children='UFC Roster'),
    dcc.Dropdown(
        divs,
        'Heavyweight',
        id='division'
    ),
    dbc.Container(table, fluid=True, className='dbc')
])

@app.callback(
    Output('table', 'data'),
    Input('division', 'value')
)
def filter_table_division(division):
    df_filtered = df[df['Division'] == division]

    return df_filtered.to_dict(orient='records')

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

Do you have any suggestions how to fix this?

Thanks!
Jay

Hi @awesomefeathers

You’re right - the colors update but the font does not. That’s for reporting :beetle:
I’ll let you know when its fixed :slight_smile:

@awesomefeathers
It’s fixed now - can you let me know if it works for you?

@AnnMarieW
Thanks for fixing it - the font changes per the theme now!

FYI the font changes for “https://cdn.jsdelivr.net/gh/AnnMarieW/dash-bootstrap-templates/dbc.css”, not “https://cdn.jsdelivr.net/gh/AnnMarieW/dash-bootstrap-templates/dbc.min.css”. I’m pretty new to css but maybe the dbc.min.css file hasn’t been updated yet?

Thanks again for your help!!
Jay

Yeah, it’s probably a caching issue - either in the browser or at jsdelivr. It took about 24 hours for the changes to show up on my site: https://hellodash.pythonanywhere.com