search

AnnMarieW / dash-bootstrap-templates

A collection of 52 Plotly figure templates with a Bootstrap theme. Two theme switch components. Stylesheet to apply Bootstrap themes to Plotly Dash components.
https://hellodash.pythonanywhere.com/
MIT License
130 stars 25 forks source link

Data Table Pagination and Export Button not styled? #38

Closed jlayt closed 1 week ago

jlayt commented 1 month ago

The Data Table pagination and export button do not adopt the Bootstrap styling, but text does. Example shown here with Flatly theme. I've tried adding a class of dbc at both at the top Container level and in an enclosing Div as shown in the example, but neither works.

Screenshot 2024-08-01 at 11 54 45

Screenshot 2024-08-01 at 12 58 51

jlayt commented 1 month ago

My apologies, further testing shows that the styles are not apply to any Dash components, in spite of the CSS downloading and the class beign correclty set. There must be something else going on with my code that is breaking things.

jlayt commented 1 month ago

Ah, not having a great day, getting myself confused...

Recreated with a minimal example with Dropdowns and a DataTable wrapped in a container. Using dbc as class on the container the Bootstrap styles are applied to the Dropdowns but not to the DataTable buttons and pagination. The DataTable does get the fonts applied, and the cell borders and header background but they look broken.

Manually removing the dbc class from the container using Dev Tools removes the Bootstrap styling from all teh components, including the font styles and borders on the DataTable. Manually adding dbc again back restores the Bootstrap styles again.

With dbc class set on container:

Screenshot 2024-08-01 at 15 50 46

With dbc class removed from container:

Screenshot 2024-08-01 at 15 50 26

Apologies for my confusion!

AnnMarieW commented 1 month ago

Hi @jlayt

Styling that export button in the DataTable is tricky. You can find a discussion and some workarounds on the forum https://community.plotly.com/t/styling-the-export-button-in-datatable/38798/9

The solution from the forum would be good if you are not switching themes. Since there is no general solution that works well with all Bootstrap themes, I haven't added this feature to the dbc class here.

Another workaround is to add a clientside callback that adds a bootstrap class to the export button so it looks like this:

<button class="export btn btn-primary">Export</button>

That's a little tricky as well, since you have to make sure the table is rendered before adding the classes. Let me know if you want to do this, and I might be able to help.

Another solution is to use dash-ag-grid. You can add your own button to export the data.