Share data through pages using same dcc.store

Dash Python
1

I’m in a project where my dashboard should have a way to store informations(dash_table) from two pages.

Until now i’ve found few topics about how use dcc.store and i already put it into my app.py but it hasn’t been clear how to give a proper use to dcc.store to achive my goals.

Code

import pandas as pd
import dash_bootstrap_components as dbc
import dash
from dash import html
from dash import Dash, Input, Output, callback_context as ctx, dash_table, callback, dcc, State
from dash_bootstrap_templates import load_figure_template
import base64





image_filename =
encoded_image = base64.b64encode(open(image_filename, 'rb').read()).decode()




dbc_css = "https://cdn.jsdelivr.net/gh/AnnMarieW/dash-bootstrap-templates/dbc.min.css"
load_figure_template('SOLAR')





app = dash.Dash(__name__, use_pages = True, external_stylesheets= [dbc.themes.SOLAR, dbc_css])



app.layout = html.Div(
    [
#-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------        Table
        dcc.Store(id="store", data={}),
        html.Img(id='img_png', src='data:image/png;base64,{}'.format((encoded_image)), style={'height':'8%', 'width':'8%','textAlign':'center'}),#<------------ logo
        html.H2("Navegue usando os menus abaixo", style={'textAlign':'center'}),
        
    html.Div(
        [
            html.Div(
                dbc.Card([
                    dcc.Link(
                        f"{page['name']}", href=page["relative_path"])]
                )
            )
            for page in dash.page_registry.values()
        ]
    ),                
                
    html.Hr(),
    dash.page_container,
    ]
)

@callback(
    Output("table-output", "children"),
    Input("store", "data"),
)
def update(store):
    if store == {}:
        return "select your data"
    return dash_table.DataTable(
        page_size=10,
        data=store.get("data"),
        columns=store.get("columns"),
        filter_action="native",
        sort_action="native",
        style_table={"overflowX": "auto"},
    )

def table_creation(dff):
    #db_as_list = db_filtered.columns.to_list()
    # print(db_as_list)
    table = dash_table.DataTable(
        data=[{

        }],
        columns=[{"name": i,
                  "id": i
                  } for i in dff],  # <------------ setting columns of datatable
        editable=False,  # <------------ setting preferences if is or not editable
        filter_action="native",  # <------------ Filters in columns
        sort_action="native",  # <------------  # <------------
        column_selectable="single",  # <------------ Selectable only one column
        row_selectable='multi',  # <------------  dont let select just a row
        selected_columns=[],  # <------------ no column is selected previously
        selected_rows=[],  # <------------ no row is selected previously
        page_action="native",
        page_current=0,  # <------------ First page will be show
        page_size=25, # <------------  n of funds to be showed
        id='tabela-dash-fundos'
    )
    return table

What should i do to be able to input “Selected_rows” into my dcc.store?

2

Hello @theeconomist,

Assuming you are trying to store this info in the dcc.Store from table ‘tabela-dash-fundos’, then something like this will work:

@app.callback(Output('store','data'), Input('tabela-dash-fundos','selected_rows'))
def saveToStore(data):
    if data:
        return data
    return dash.no_update

Now, if you are trying to store tables from different pages into the dcc.Store, then you will need to use some pattern-matching callbacks to output to the store.

3

hm, so i think that i’ll try do using pattern-matching callbacks.

Thank you

1 Like