How to style dash DataTable with bootstrap css themes?

Dash Python
1

Supposedly the latest version of dash supports bootstrap styling of the datatable, but the following does not work. How do I get a bootstrap themes to work with dash_table.DataTable?

import dash
import dash_bootstrap_components as dbc
import dash_table
import pandas as pd

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

app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = dash_table.DataTable(
    id='table',
    columns=[{"name": i, "id": i} for i in df.columns],
    data=df.to_dict('records'),
)

app.run_server(port=8051)
1 Like
2

@oegedijk

The Dash DataTable does not respond to bootstrap themes. One workaround is to use the table style_* parameters: Styling | Dash for Python Documentation | Plotly to make it consistent with the bootstrap theme you are using.

If you have a simple table and are not using all of the features of Dash DataTable, you could just use an HTML table, which can be styled with Bootstrap themes. Table - dbc docs

1 Like
3

Ah, so the release note for 1.18.1 mentioning DataTable support for dash bootstrap components does not imply that it takes its’ styling?

đź“Ł Dash 1.18.1 Release - Faceted and Animated Images and Heatmaps, DataTable Bootstrap Support, Inside Tick Labels, Better Axis Type Detection

4

The “Data Table Boostrap Support” referred to in that release was a bug fix where the data in the table was not displaying properly when using a Bootstrap stylesheet: DataTable Cannot Show Full Table at Left and Right Edge · Issue #796 · plotly/dash-table · GitHub

5

Please find detailed answer with examples of how to style a DataTable with a Bootstrap theme in this post: Styling Dash DataTable select rows radio button and checkbox - #2 by AnnMarieW

Also see:

1 Like