# Styling Dash DataTable select rows radio button and checkbox

**URL:** <https://community.plotly.com/t/styling-dash-datatable-select-rows-radio-button-and-checkbox/59466>\
**Category:** Dash Python\
**Created:** [December 22, 2021, 4:38pm UTC](https://community.plotly.com/t/styling-dash-datatable-select-rows-radio-button-and-checkbox/59466 "2021-12-22T16:38:54Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![raptorbrad](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/raptorbrad/32/19530_2.png) [@raptorbrad](https://community.plotly.com/u/raptorbrad)\
**Post date:** [December 22, 2021, 4:38pm UTC](https://community.plotly.com/t/styling-dash-datatable-select-rows-radio-button-and-checkbox/59466/1 "2021-12-22T16:38:54Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![AnnMarieW](https://avatars.discourse-cdn.com/v4/letter/a/ec9cab/32.png) [@AnnMarieW](https://community.plotly.com/u/AnnMarieW)\
**Post date:** [December 23, 2021, 5:45pm UTC](https://community.plotly.com/t/styling-dash-datatable-select-rows-radio-button-and-checkbox/59466/2 "2021-12-23T17:45:38Z")

</div>

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)

```auto

.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:

```python
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](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/3/7/37c7d2f3f92d697934499e142e15eaeb046319ff.gif)

MINTY theme:

![table_minty](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/d/5/d58ff2ec2c23e80d934c2655530349dd972a2ef2.gif)

```auto
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:

> **[Dash Bootstrap Theme Explorer](https://hellodash.pythonanywhere.com/about_dbc_css)**
>
> A guide for styling Plotly Dash apps with a Bootstrap theme. Shows how to include Bootstrap-themed Plotly figure templates,
> apply Bootstrap themes to Plotly Dash components and switch themes with a theme change component.

---

<div class="post-metadata">

**Author:** ![awesomefeathers](https://avatars.discourse-cdn.com/v4/letter/a/77aa72/32.png) [@awesomefeathers](https://community.plotly.com/u/awesomefeathers)\
**Post date:** [August 26, 2022, 9:08pm UTC](https://community.plotly.com/t/styling-dash-datatable-select-rows-radio-button-and-checkbox/59466/3 "2022-08-26T21:08:31Z")

</div>

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](https://hellodash.pythonanywhere.com/adding-themes/getting-started) but I still can’t get the font in the table to change.

```auto
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

---

<div class="post-metadata">

**Author:** ![AnnMarieW](https://avatars.discourse-cdn.com/v4/letter/a/ec9cab/32.png) [@AnnMarieW](https://community.plotly.com/u/AnnMarieW)\
**Post date:** [August 26, 2022, 9:17pm UTC](https://community.plotly.com/t/styling-dash-datatable-select-rows-radio-button-and-checkbox/59466/4 "2022-08-26T21:17:18Z")

</div>

Hi @awesomefeathers

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

---

<div class="post-metadata">

**Author:** ![AnnMarieW](https://avatars.discourse-cdn.com/v4/letter/a/ec9cab/32.png) [@AnnMarieW](https://community.plotly.com/u/AnnMarieW)\
**Post date:** [August 27, 2022, 3:53pm UTC](https://community.plotly.com/t/styling-dash-datatable-select-rows-radio-button-and-checkbox/59466/5 "2022-08-27T15:53:53Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![awesomefeathers](https://avatars.discourse-cdn.com/v4/letter/a/77aa72/32.png) [@awesomefeathers](https://community.plotly.com/u/awesomefeathers)\
**Post date:** [August 27, 2022, 11:26pm UTC](https://community.plotly.com/t/styling-dash-datatable-select-rows-radio-button-and-checkbox/59466/6 "2022-08-27T23:26:39Z")

</div>

@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](https://cdn.jsdelivr.net/gh/AnnMarieW/dash-bootstrap-templates/dbc.css)”, not “[https://cdn.jsdelivr.net/gh/AnnMarieW/dash-bootstrap-templates/dbc.min.css](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

---

<div class="post-metadata">

**Author:** ![AnnMarieW](https://avatars.discourse-cdn.com/v4/letter/a/ec9cab/32.png) [@AnnMarieW](https://community.plotly.com/u/AnnMarieW)\
**Post date:** [August 28, 2022, 12:32am UTC](https://community.plotly.com/t/styling-dash-datatable-select-rows-radio-button-and-checkbox/59466/7 "2022-08-28T00:32:17Z")

</div>

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](https://hellodash.pythonanywhere.com)