Announcing Dash Bio 1.0.0 🎉 : a one-stop-shop for bioinformatics and drug development visualizations.

How to style dash DataTable with bootstrap css themes?

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)

@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

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

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

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