Modified data in data table component is not displayed on page reload

Question

Data solar.csv: https://raw.githubusercontent.com/plotly/datasets/master/solar.csv

Here is a code:

import dash
import dash_table
import dash_html_components as html
from dash.dependencies import Input, Output, State
import pandas as pd
from dash.exceptions import PreventUpdate

df = pd.read_csv('D:/solar.csv')

app = dash.Dash(__name__)

app.layout = html.Div([
            dash_table.DataTable(
                id='table',
                columns=[{"name": i, "id": i} for i in df.columns],
                data=df.to_dict("rows"),
                editable=True
            ),
            html.Button(id="save-button",n_clicks=0,children="Save"),
            html.Div(id="output-1",children="Press button to save changes")
])

@app.callback(
        Output("output-1","children"),
        [Input("save-button","n_clicks")],
        [State("table","data")]
        )

def selected_data_to_csv(nclicks,table1): 
    if nclicks == 0:
        raise PreventUpdate
    else:
        pd.DataFrame(table1).to_csv('D:/solar.csv',index=False)
        return "Data Submitted"

if __name__ == '__main__':
    app.run_server(debug=True)

When I am editing data in table from browser and after pressing the save button the modified data is saved correctly in solar.csv. The problem is that, if I refresh page old data (non-modified) data is displayed.

I tried several ways like using global variables inside selected_data_to_csv() but without any luck.

Question: How to modify code above in order to show modified data when I reload webpage?

Original code from: Is it possible to export dash datatable to a specific location on disk or directly to SQL Server?

Answer 1

Ah, good question.

In order to do so, set the app.layout equal to a function. Then it should evaluate that function when you refresh, and in doing so pull in the updated, saved down data.

i.e. the layout_function below:

import dash
import dash_table
import dash_html_components as html
from dash.dependencies import Input, Output, State
import pandas as pd
from dash.exceptions import PreventUpdate

#df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/solar.csv')
df = pd.read_csv('H://R//filename.csv')

app = dash.Dash(__name__)

def layout_function():
    
    df = pd.read_csv('H://R//filename.csv')
    
    return html.Div([
                dash_table.DataTable(
                    id='table',
                    columns=[{"name": i, "id": i} for i in df.columns],
                    data=df.to_dict("rows"),
                    editable=True
                ),
                html.Button(id="save-button",children="Save",n_clicks=0),
                html.Div(id="output-1",children="Press button to save changes")
                ])

app.layout = layout_function
 
@app.callback(
        Output("output-1","children"),
        [Input("save-button","n_clicks")],
        [State("table","data")]
        )
      
def selected_data_to_csv(nclicks,table1): 
    if nclicks == 0:
        raise PreventUpdate
    else:
        pd.DataFrame(table1).to_csv('H://R//filename.csv',index=False)
        return "Data Submitted"

if __name__ == '__main__':
    app.run_server(debug=True)