Sharing components between pages

Dash Python
3

@RenaudLN that looks nice! However, as you note, it won’t solve this issue with the large datatable. I believe clientside sync with a Store will still be too slow, as it takes (significant) time just to render the datatable.

I have created a small extension to dash pages that enables dynamic components, i.e. components where the visibility depends on the URL. Similar to pages, you add the parent container to the app layout,

from dash import html, page_container
from dash_extensions.pages import setup_dynamic_components
...

app.layout = html.Div([
    ...
    dash.page_container,
    setup_dynamic_components()
])

and pass the component(s) as part of the page registration,

import dash
from components import my_data_table

dash.register_page(__name__, components=[my_data_table])

to indicate which component(s) should be visible on this page. I have only done a bit of testing, but it seems to work as intended. You can try it if you want with by installing dash-extensions==1.0.4rc1. If there is interest, I guess this functionality could be turned into a PR to Dash pages :slight_smile:

The main drawback of this solution is that you can’t mix dynamic components with the layout of your (Dash pages) page; you can only place them above or below. The only possible workaround I have found would be to use CSS Grid for positioning; but as I understand, that would only work, if the dynamic components are located inside the dash_pages container (all the grid elements must have the same parent). And to do that, the pages update mechanism would need to be changed a partial update (to avoid reloading the dynamic components).