How to rearrange DOM elements elegantly? (client or server side callbacks / javascript)

Dash Python
1

Suppose my app layout consists of some rows and columns with data/graphs/tables/etc in them:

html.Div([
    dbc.Row([
        dbc.Col([<content_0>]),
        dbc.Col([<content_1>])
    ]),
    dbc.Row([
        dbc.Col([<content_2>]),
        dbc.Col([<content_3>])
    ])
],
    id='container'
)

Now I would like to rearrange the content when the user presses a tab. For example rearrange this to 1Row x 4Cols instead of the 2Rows x 2Cols. The content stays absolutely the same though.

This is easily done with server side callbacks, by targeting the container as Output and having all the contents as State. Unfortunately that also means having to sent all the contents data over the network and with a lot of data this takes a lot of time.

Is there a way to do this with clientside callbacks/javascript? All I want to do is rearrange the container structure, the content data stays the same.

I have found this related post but cant figure out a solution

2

That seems like a limitation of using bootstrap components (though as a caveat, I haven’t used dbc myself, maybe there’s a way) - they manage not just content but also parts of the styling that, if you use base html elements, you can do through CSS. Using plain html.Div components you should be able to target a callback to just the relevant style or className props, so that the same content will display in a different arrangement.

1 Like
3

@alexcjohnson

Thank you for the reply.

Using plain divs and targeting the class makes a lot more sense.

I have never worked with it, but I assume using chriddyp’s css grid would be good for that task?

4

Yes, that CSS file has a lot of good stuff in it - I would encourage you though to take what you want from it rather than using it directly. There are a lot of base overrides there that may cause problems if you import them all.

5

Did you ever find a way to do this using client side callbacks? I’d like to be able to use the underlying JavaScript that Dash uses in python.

For example, a way to render the following on the client side without requiring a post back to the server.

        stock = data['stock']
        price = html.H1(data['price'])
        diff = html.H4(dbc.Badge(data['diff'], color="danger" if '-' in data[
            'diff'] else 'success', className="mr-1"))
        content = dbc.Row([dbc.Col([price]), dbc.Col([diff])])