Hey everyone,
I’m coding a multi-page application with an upload component and a table that displays the contents of my uploaded file.
The table component gets the data store as input. It works when you uploaded a file once, but when we refresh or change the page, it doesn’t work anymore, even if the data is stored correctly in the store component.
I want the table to remain displayed as soon as there is data stored in the store
It works well with another component chart in another page.
Could you help me please?
The code for my page :
from dash import html, dcc, Output, Input, callback, dash_table
import pandas as pd
Définir la page d’upload
layout = html.Div([
html.Div([
dcc.Upload(
id=‘upload-data’,
children=html.Div([
'Glissez et déposez un fichier ici ou ',
html.A(‘cliquez pour sélectionner un fichier’)
]),
style={
‘width’: ‘100%’,
‘height’: ‘100px’,
‘lineHeight’: ‘100px’,
‘borderWidth’: ‘1px’,
‘borderStyle’: ‘dashed’,
‘borderRadius’: ‘5px’,
‘textAlign’: ‘center’,
‘margin’: ‘10px’
},
multiple=False
),
]),
html.Div(id=‘output-data-upload’)
])
@callback(Output(‘output-data-upload’, ‘children’),
Input(‘store’, ‘data’))
def display_table(data):
print(data)
if data is not None:
df = pd.DataFrame(data)
# Convertir les données en tableau
table = html.Div(
[
dash_table.DataTable(
id=‘table’,
page_size=10,
columns=[{“name”: i, “id”: i} for i in df.columns],
data=df.to_dict(‘records’),
persistence = True,
persisted_props = [‘data’],
persistence_type = ‘session’,
filter_action=“native”,
sort_action=“native”,
style_table={‘overflowX’: ‘auto’},
style_header={
‘backgroundColor’: ‘rgb(230, 230, 230)’,
‘fontWeight’: ‘bold’
},
style_cell={
‘minWidth’: ‘0px’, ‘maxWidth’: ‘180px’,
‘whiteSpace’: ‘normal’,
‘overflow’: ‘hidden’,
‘textOverflow’: ‘ellipsis’
},
),
],
)
return table