Show and Tell - Dash Bootstrap Components

Dash Python
,
29

Hey @Chris369,

I don’t know if there’s a great way to style the DataTable using Bootstrap CSS. The component uses mostly inline styles which can be a little bit tricky to override with CSS classes.

If you’re willing to compile your own Bootstrap stylesheet using sass, here’s an approach that worked for me. The basic idea is that since we can’t apply the .table class to the DataTable, we instead wrap the DataTable in an element with a particular id like table-wrapper, then add selectors like the following to your stylesheet:

#table-wrapper table {
  /* styles from .table class */
}

You could write this stylesheet manually, but that would be really tedious. Sass lets you inherit / extend existing selectors. Here’s a bit more detail:

  1. Download Bootstrap source from Bootstrap website.

  2. In the source folder there’s a directory called scss, that’s the one we want, copy that to your working directory.

  3. Wrap your table in a div with a particular id like this:

app.layout = html.Div(dash_table.DataTable(...), id="table-wrapper")
  1. Create your scss file, I called mine table-shim.scss, and write something like this:
@import "scss/bootstrap.scss";

#table-wrapper table{
  @extend .table;
  @extend .table-striped;
  @extend .table-hover;
  @extend .table-bordered;
  font-family: inherit;
  --border: none;
}

This basically says we want to create a new selector that will select any table that is a child of an element with id table-wrapper, and apply all the styles of the classes .table, .table-striped etc. to it. I also added the font-family and --border arguments as they weren’t specified by Bootstrap so it defaulted to the DataTable defaults.

  1. Compile with sass sass table-shim.scss assets/my-bootstrap.css or similar. See here for how to install sass.

That’s it, run your app and hopefully it should work! As a final note, this worked for me with Bootswatch styles too. Just grab the _variables.scss and _bootswatch.scss files for the theme you’re interested in from the Bootswatch website (I tried it with the “Lux” theme), and change the imports in your scss file to something like

@import "lux/_variables.scss";
@import "scss/bootstrap.scss";
@import "lux/_bootswatch.scss";

Depending on the theme you choose, you might have to make additional adjustments if the styles clash with the styles set by DataTable. I don’t know for example how the dark Bootswatch themes would work with this approach.

Let me know how you get on if you try it, and definitely let me know how you get on if you find an easier way!

2 Likes