Show and Tell - Dash Bootstrap Components

[DiepNguyen]

Hi @tcbegley thanks for your answer, it’s great. I just wonder why it is so hard to make the table persist in this case, why “persistence = True” doesn’t work in this case?

[DiepNguyen]

We should add a " raise PreventUpdate" in the 2nd callback. If not, the table will be lost after the second page refresh.

def store_upload(list_of_contents, list_of_names, list_of_dates):
    if list_of_contents is not None:
        children = [
            parse_contents(c, n, d)
            for c, n, d in zip(list_of_contents, list_of_names, list_of_dates)
        ]
        return children
    else:
        raise PreventUpdate

[tcbegley]

It’s quite possible you can simplify my example a lot using persistence (I think it will depend a bit on exactly what you want to do with the persisted data), but when I wrote the post you’re responding to the feature didn’t exist in Dash yet.

[AnnMarieW]

Hey Everyone,

Be sure to upgrade to the latest release of dash-bootstrap-components and check out these new features:

• In release 0.12.0, it’s now possible to trigger a dbc.Popover without any callbacks
  See the first example in the updated docs here Popover - dbc docs

• There is also a new download prop for the dbc.Button. This functions basically like html.A, but it allows you to style the link like a Bootstrap Button. The new download prop allows you to specify a different file name on download than the filename specified in the href.
  Here’s a styled download button - it also includes a Font Awesome icon. See the code at the end of this post for an example that uses this button and downloads a file from the assets folder.

• See also a new Theme Explorer section of the docs that allows you to change the Bootstrap theme and see how the components respond with different colors, fonts etc. Note that if you use dbc.RadioItems, dbc.Checklist, dbc.Spinner, rather than the dash-core-component equivalents, that the style of the components updates automatically with the selected Bootstrap theme colors. You can see this in action here https://dash-bootstrap-components.opensource.faculty.ai/docs/themes/explorer/

• As of release 0.11.2 Table.from_dataframe for the html.Table supports multiple column header levels. Also, active_tab_style and activeTabClassName was added to enhance the styling of the dcc.Tabs component.

Please join me in saying thanks to @tcbegley for maintaining this library – which he does in his spare time, and for all of the great support he provides on the forum.

---

---

import dash
import dash_html_components as html
import dash_bootstrap_components as dbc

FONT_AWESOME = (
    "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
)

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


app.layout = dbc.Container(
    [
        dbc.Button(
            [html.I(className="fa fa-download mr-1"), "Download"],
            href="/assets/data_file.txt",
            download="my_data.txt",
            external_link=True,
            color="info"
        ),
    ],
    fluid=True,
    className='m-4'
)


if __name__ == "__main__":
    app.run_server(debug=True)

[bgivens33]

I can’t seem to access the style of a dbc.button in a callback, is there anyway to do that?

[tcbegley]

Hey @bgivens33

What are you trying to do exactly? It seems to work for me, check out the following example

import dash
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output

COLORS = ["red", "orange", "yellow", "green", "blue", "indigo", "violet"]


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

app.layout = dbc.Container(
    dbc.Button("Click me", id="button"), className="p-5"
)


@app.callback(Output("button", "style"), Input("button", "n_clicks"))
def toggle_color(n_clicks):
    if n_clicks:
        return {"backgroundColor": COLORS[(n_clicks - 1) % 7]}
    return {}


if __name__ == "__main__":
    app.run_server(debug=True)

[bgivens33]

Thanks for the tip… I was trying to bring in the style via a State, which wasn’t working (might not be exposed?),but your method is working just fine. Thanks!

[Amox]

Hey @tcbegley,

It is possible to work with external stylesheets (CDN) and local CSS file in the same time ?
I just want to apply the compiled file only to table.

[tcbegley]

Sure, you can have a mix of local and externally hosted stylesheets. The main thing to watch out for is any duplication. Anything that is repeated you are paying for with bandwidth and load time.

[Amox]

Hey @tcbegley,

Thank you for the response, but when i follow your instructions for styling Data Table it override all my external stylesheets (Bootstrap theme and font awesome CDN ).

[tcbegley]

Could you say a bit more about what stylesheets you are loading and how you are linking each of them. Is it external_stylesheets for external and assets/ for local?

If your stylesheets have a clash (e.g. both of them define font-size for a particular class), then the local will override the external I believe. But it shouldn’t stop it from loading entirely.

[Amox]

Yes external_stylesheets for external and assets/ for local.

My-bootstrap.css file is in assets/

My problem is that when i compile the my-bootstrap.css file with sass table-shim.scss assets/my-bootstrap.css i loose all Font awesome icons.

[tcbegley]

Strange. Can you use the developer tools in your browser to check if the stylesheet is being linked correctly and fetched from the CDN successfully?