# Live update dash\_table

**URL:** <https://community.plotly.com/t/live-update-dash-table/42753>\
**Category:** Dash Python\
**Created:** [July 21, 2020, 1:13pm UTC](https://community.plotly.com/t/live-update-dash-table/42753 "2020-07-21T13:13:00Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![jie](https://avatars.discourse-cdn.com/v4/letter/j/3bc359/32.png) [@jie](https://community.plotly.com/u/jie)\
**Post date:** [July 21, 2020, 1:13pm UTC](https://community.plotly.com/t/live-update-dash-table/42753/1 "2020-07-21T13:13:00Z")

</div>

In my app, I have one graph and one Dash Table. Because the data source will be updated every 10 minutes, I want to update the graph and dash table if there is any new data points added to data source.

I used dcc.interval to get the data check and fig update every 10minutes. but it doesnt work for the dash table.

 ![IMG_5248](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/7/79d2cfc5cd208ca31a2f620e3cc2fe10d7a346c7.jpeg) ![IMG_5249](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/b/bdbbf955da0487411ce88c9cac50a754674be854.jpeg)

---

<div class="post-metadata">

**Author:** ![chriddyp](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/chriddyp/32/16855_2.png) [@chriddyp](https://community.plotly.com/u/chriddyp)\
**Post date:** [July 21, 2020, 3:01pm UTC](https://community.plotly.com/t/live-update-dash-table/42753/2 "2020-07-21T15:01:29Z")

</div>

@jie - hm not sure what’s going on here. could you share a simple, reproducible example? [How to Get your Questions Answered on the Plotly Forum](https://community.plotly.com/t/how-to-get-your-questions-answered-on-the-plotly-forum/40551)

---

<div class="post-metadata">

**Author:** ![AnnMarieW](https://avatars.discourse-cdn.com/v4/letter/a/ec9cab/32.png) [@AnnMarieW](https://community.plotly.com/u/AnnMarieW)\
**Post date:** [July 21, 2020, 3:25pm UTC](https://community.plotly.com/t/live-update-dash-table/42753/3 "2020-07-21T15:25:09Z")

</div>

Hi @jie

Try:

```auto
return df.to_dict('records')

```

---

<div class="post-metadata">

**Author:** ![jie](https://avatars.discourse-cdn.com/v4/letter/j/3bc359/32.png) [@jie](https://community.plotly.com/u/jie)\
**Post date:** [July 21, 2020, 3:36pm UTC](https://community.plotly.com/t/live-update-dash-table/42753/4 "2020-07-21T15:36:04Z")

</div>

I have simplified code below as example. I could use dcc.interval to update the figure with a defined interval. but even with data points updated, the dash table still shows the original data before update…

```auto
import dash #(version 1.12.0)
from dash.dependencies import Input, Output
import dash_table
import dash_core_components as dcc
import dash_html_components as html
import plotly.express as px
import pandas as pd

# -------------------------------------------------------------------------------------
# Import the cleaned data (importing csv into pandas)
df = pd.read_excel("datafortable.xlsx")

def get_data(n):
    raw=pd.read_excel('dataforgraph.xlsx')
    return raw
# -------------------------------------------------------------------------------------
# App layout
app = dash.Dash( __name__ ) # this was introduced in Dash version 1.12.0

app.layout = html.Div([
    dash_table.DataTable(
        id='live_table',
        columns=[
            {"name": i, "id": i, "deletable": True, "selectable": True, "hideable": True}
            for i in df.columns
        ],
        data=df.to_dict('records'),  
        editable=True,              
        page_current=0,             
        page_size=6,                
        style_cell={                
            'minWidth': 95, 'maxWidth': 95, 'width': 95
        },
        style_cell_conditional=[    
            {
                'if': {'column_id': c},
                'textAlign': 'left'
            } for c in ['country', 'iso_alpha3']
        ],
        style_data={                
            'whiteSpace': 'normal',
            'height': 'auto'
        }
    ),

    html.Br(),
    dcc.Graph(id='live_graph'),
    dcc.Interval(
        id='interval-component',
        interval=10000,
        n_intervals=0
    )

])

@app.callback(Output('live_graph','figure'),
            [Input('interval_component','n_intervals')])
def update_graph:
    raw=get_data(n)
    fig=px.scatter(raw,x='date',y='cost')
    return fig

@app.callback(Output('live_table','data'),
            [Input('interval_component','n_intervals')])
def update_table(n):
    df = pd.read_excel("datafortable.xlsx")
    return df

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

```

---

<div class="post-metadata">

**Author:** ![jie](https://avatars.discourse-cdn.com/v4/letter/j/3bc359/32.png) [@jie](https://community.plotly.com/u/jie)\
**Post date:** [July 21, 2020, 10:50pm UTC](https://community.plotly.com/t/live-update-dash-table/42753/5 "2020-07-21T22:50:49Z")

</div>

@AnnMarieW, do you mean only change the return? I tried, but still the same/ no update…

---

<div class="post-metadata">

**Author:** ![AnnMarieW](https://avatars.discourse-cdn.com/v4/letter/a/ec9cab/32.png) [@AnnMarieW](https://community.plotly.com/u/AnnMarieW)\
**Post date:** [July 21, 2020, 11:12pm UTC](https://community.plotly.com/t/live-update-dash-table/42753/6 "2020-07-21T23:12:20Z")

</div>

Hi @jie

Yes, I do mean just change the return in the callback that updates the table. It’s odd that it made no difference, because you should have had an error originally. (It needs to be a dictionary, not a dataframe)

It may be that the callback isn’t firing. Have you tried putting a print statement in the callback? Do you have another component called “live\_table” anywhere else (like in another tab?)

I’m just guessing… without data, it’s not possible to see what’s happening. The rest of the code looks fine to me. Can you post something that reproduces the error?

---

<div class="post-metadata">

**Author:** ![AnnMarieW](https://avatars.discourse-cdn.com/v4/letter/a/ec9cab/32.png) [@AnnMarieW](https://community.plotly.com/u/AnnMarieW)\
**Post date:** [July 21, 2020, 11:37pm UTC](https://community.plotly.com/t/live-update-dash-table/42753/7 "2020-07-21T23:37:59Z")

</div>

One more thing to check…  
The interval component is named:

“interval\_component” in the callback, and  
“interval-component” in the layout.

---

<div class="post-metadata">

**Author:** ![jie](https://avatars.discourse-cdn.com/v4/letter/j/3bc359/32.png) [@jie](https://community.plotly.com/u/jie)\
**Post date:** [July 22, 2020, 1:31pm UTC](https://community.plotly.com/t/live-update-dash-table/42753/9 "2020-07-22T13:31:44Z")

</div>

you are right, because of the typo there was no error came out. I corrected it, and use your solution, it works now!!  
Thank you very much!  
I will pay more attention to my code.

---

<div class="post-metadata">

**Author:** ![yyngwong](https://avatars.discourse-cdn.com/v4/letter/y/8baadc/32.png) [@yyngwong](https://community.plotly.com/u/yyngwong)\
**Post date:** [July 28, 2020, 5:21pm UTC](https://community.plotly.com/t/live-update-dash-table/42753/10 "2020-07-28T17:21:08Z")

</div>

Hello, just one more note, it should be ‘interval=600000’ for a 10 minute update time.