DataTable goes blank when using bootstrap (dbc) themes

Dash Python
1

Hi,

I tried to setup a filterable table following the example code given in the documentation.
https://dash.plotly.com/datatable/callbacks
The Backend Paging with Filtering and Multi-Column Sorting one.

It works fine.

However, when I change to use a bootstrap theme:

image
image1090Ă—346 33.8 KB

The font in the table becomes white/invisible:

image
image2630Ă—650 25.2 KB

The data is still there. As it is visible when I select a cell:

image
image2630Ă—650 65.2 KB

How can I use the data table element in a DBC themed setup?
What needs to be done to get the table to be formatted as a DBC table?

Thank you.
Baadal

2

The problem appears to be that you’re using a dark Bootswatch theme, which sets the font color to white (or something close to it), but doesn’t have any effect on the cell backgrounds.

The easiest thing to do is to use a light theme. If you want to use the dark theme you’re going to have to manually style the datatable, i.e. use the inspector in the browser to find out which classes etc. are being used to set the cell colors and try to override it.

1 Like
3

Thank you! That was it!

4

Hi @tcbegley,

One follow up question.

One of the columns in the table was too wide and was making the table go out of the visible area.
So I fixed the table size with a horizontal scroll bar using the overflowX.

Here is the code snippet:

image
image846Ă—716 55 KB

Everything seems ok, except for the select column on the left. Only half of it is showing up:

image
image2274Ă—978 148 KB

Do you know of any way to show it completely?
Or to achieve a similar layout in other ways?

Thank you again!
Baadal

5

Hey @baadal

The problem is likely that dash-table and Bootstrap both use a CSS class called row and they clash. Try adding the following CSS to a file in your assets/ folder. It will override the properties of the Bootstrap row within the table.

.dash-table-container .row {
  display: block;
  margin: 0;
}

See here for more details about adding custom CSS if you’re unfamiliar.

1 Like
6

Thanks a ton! That worked!

I am not a web developer by trade.
Would you suggest any relevant topics and resources to begin to understand these moving parts?

Regards,
Baadal

7

MDN has great resources such as this introduction to HTML and this introduction to CSS are both well worth reading.

In addition to that, I often find it useful to use the developer tools in my browser to inspect what is actually getting rendered by the browser, making edits / changes there, then trying to figure out how I could have made that change happen from within my Dash app. Check out this intro to using the developer tools to get up to speed quickly.

2 Likes