ReDash-like (Draggable/resizable) Component - Advanced implementation of pattern-matching callback

Hey fellows,

I would like to share with you one component that I developed for a project;

It’s using pattern-matching callbacks to build the cards and also all the values related to the charts;

This component is based on the React Grid layout component;

A taste of the app:

Link to the app:

Link to the code on Github:

Hope it can be useful to someone;



Thank you Leonardo. Looks great and loved the video :upside_down_face:

1 Like

awsome work! Thanks for sharing your work, but it may takes me some time to figure out how it works

Hey mate, what’s your question about it?

Are you having problems running it or is the problem you’re facing on other parts?

Ha ha, I started using plotly/dash in recent days. So I think it may take some time to understand it. Thanks for your reply.

To run this, you just need to install pipenv so:

pipenv shell

pipenv install


It should work

There is a package named dash-draggable . Are there any similarities and differences between dash_trich_components and dash_draggable

I got this error

decouple.UndefinedValueError: MONGODB_DATABASE not found. Declare it as envvar or define a default value.

Hey bro… You need to set the environment variables;

decouple helps on this by reading the .env file

So you can add the needed informations in a .env file

When I use dtc.ResponsiveGrid alone, there is no display.

import dash
import dash_bootstrap_components as dbc
import dash_trich_components as dtc
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash(__name__)
app.layout = html.Div([dtc.ResponsiveGrid(

if __name__ == '__main__':


I see. I need to add an id to the component otherwise there will be no display

Are there some methods to make the text in the graph resized with the component? When I zoom out the component, the text size does not change

very nice package! I can’t find a way to move objects vertically. Is there a way to do so? Thanks