Dash Bootstrap and DataGrid components/contrib?

Dash Python
1

Hi - new to dash & it looks like a great start, but I’m coming to a python environment from shinyR land where I’ve had the luxury of layout via bootstrap built in, a nice full-featured. Are there any examples or contribs out there with bootstrap layout, eg. tabs & bootstrap controls, and/or a datagrid component pre-built for dash, or is it too early days for this?

Just thought I’d post here before I hunt any further and/or start building my own (if of course the dash experiment here takes off! which is slightly dependant on it looking good & making dash development easy for pythonistas - I’m the only ‘UI guy’)

2 Likes
2

After you init your Dash object, as app you do

app.css.append_css({"external_url": "https://url.com/mycss"})

As pointed out here Dash HTML Components | Dash for Python Documentation | Plotly the html elements and Dash classes are the same, but you need to change some syntax. Here is a direct quote from that page

The style property is a dictionary
Properties in the style dictionary are camelCased
The class key is renamed as className
Style properties in pixel units can be supplied as just numbers without the px unit

As for bootstrap, just point your external_url to the bootstrap cdn. Then for your html components use bootstrap. A bootstrap grid example:

html.Div( [html.H3("Neat H3")], className='col-sm-4' )

Now if you can figure out how to get the viewport working, that would be great!

2 Likes
3

Also, we maintain a more minimal CSS stylesheet at https://codepen.io/chriddyp/pen/bWLwgP that is easily brandable.

4

I’m not sure these answers are related - I’m looking for (and will probably create if they dont exist) bootstrap components with databindings for interactivity as in the inbuilt selectors/sliders etc) https://plot.ly/dash/getting-started-part-2

5

This example app integrates some bootstrap components: Gene expression example (Show and Tell)

6

My approach to making the bootstrap grid layout more accessible while creating Dash html component trees has been to define my own pseudo components (actually just functions masquerading as Dash components) that mean you don’t have to keep writing things like className='row' and className='col'.

For example, I create functions Row and Col which automatically add the desired className keyword argument required to an html.Div which is returned and also pass through the other params to this so that to the person using the pseudo component, they appear to function as regular components.

This makes Dash layouts with Bootstrap both easier to write and read:

Row([
    Col(dcc.Graph(id='graph1'), size=4),
    Col(dcc.Graph(id='graph2'), size=8),
])

This is what I’ve done in this project. You can see the psuedo components defined in components.py, which make use of a decorator that tries to smooth over some of the passing through and merging of keyword arguments. There’s an example of them being used in layouts.py.

4 Likes
7

Yes!! This is the way to do it. I tried to communicate this in the user guide with “Reusable components” section here: Part 1. Layout | Dash for Python Documentation | Plotly but I think that it is still a very underappreciated aspect of Dash. I use this type of pattern in all of the apps that I write. It’s very similar to how reusable components have been popularized in front-end frameworks like React.js.
Row and Col are really great :+1:, thanks for sharing this!

1 Like
8

A post was split to a new topic: How to Add Icons with Stylesheet to Dash

9

Yep, and I think those suggestions in the user guide combined with seeing examples of reusable layout fragments that you have written helped prime these kind of abstractions for me.

I think that having some exposure to working with component-based front-end frameworks has also helped. The idea of having a shared repository of components like sidebars and frequently used dashboard fragments etc is super compelling. Make sure they’ve all well annotated with classNames and you can swap in and out different stylesheets for new clients etc.

I suspect part of the reason this aspect of Dash may be underappreciated is that there are many Dash users who haven’t had a large amount of exposure to web development. Perhaps we could would on including some examples of custom components in the user guide.

3 Likes
10

Hi @nedned, I just checked your repo. It looks great!!, but I have a question. Will you fix the side bar? I would like to use your code for the side bar on my sample project.

Great job.

11

Hey thanks a lot :slight_smile:
I’m certainly planning on fixing that up and rolling out some more improvements/features. Hopefully will be getting onto it in the next week or two.

13

For anyone coming to this late, you may be interested in checking out dash-bootstrap-components, an open source library of Bootstrap themed components for Plotly Dash. Check out the show and tell thread for some more relevant links and discussion.

1 Like
14

I’m really digging Dash Bootstrap Components! While I couldn’t see it at the time, my approach to capturing Bootstrap abstractions in Python, would have wound up with me gradually wrapping more and more of Bootstrap. Doing at the component level just makes so much more sense, and also now I don’t have to do it :stuck_out_tongue:

1 Like
15

I’ve now added a sidebar!