How to have two dash data-tables with ddc.Interval on one page?

Viewed 540
import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_table
import pandas as pd
import numpy as np

def getData():
    return pd.read_csv('test.csv').to_dict('records')

def getData2():
    return pd.read_csv('test2.csv').to_dict('records')
    
def back_to_df(dictio):
    return pd.DataFrame.from_dict(dictio)

tblcols=[{"name": i, "id": i} for i in back_to_df(getData()).columns]

app = dash.Dash(__name__)


app.layout = html.Div([
      html.H4('Dashboard'),
      dcc.Interval('graph-update', interval = 45000, n_intervals = 0),
      dash_table.DataTable(
          id = 'table',
          data = getData(),
          columns=tblcols)])

@app.callback(
        dash.dependencies.Output('table','data'),
        [dash.dependencies.Input('graph-update', 'n_intervals')])

def updateTable(n):
     return getData()

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

How do I add another DataTable based on getData2()? Everything can be identical to the first DataTable, just a different dataframe should be loaded. I can't manage to get two DataTables to work

1 Answers

I have verified that you can duplicate your code everywhere:

  • tblcols
  • dcc.Interval
  • dash_table.DataTable
  • updateTable

I've used a "2" as suffix for all, and even used a different interval value.

The key is that you link the 'id' of the dcc.Interval and dash_table.DataTable to the specific @app.callback.

This will result in:

import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_table
import pandas as pd
import numpy as np

def getData():
    return pd.read_csv('test.csv').to_dict('records')

def getData2():
    return pd.read_csv('test2.csv').to_dict('records')
    
def back_to_df(dictio):
    return pd.DataFrame.from_dict(dictio)

tblcols  =[{"name": i, "id": i} for i in back_to_df(getData()).columns]
tblcols2 =[{"name": i, "id": i} for i in back_to_df(getData2()).columns]

app = dash.Dash(__name__)


app.layout = html.Div([
      html.H4('Dashboard'),
      dcc.Interval('graph-update', interval = 45000, n_intervals = 0),
      dash_table.DataTable(
          id = 'table',
          data = getData(),
          columns=tblcols
      ),
      dcc.Interval('graph2-update', interval = 14000, n_intervals = 0),
      dash_table.DataTable(
          id = 'table2',
          data = getData2(),
          columns=tblcols2
      )
])

@app.callback(
        dash.dependencies.Output('table','data'),
        [dash.dependencies.Input('graph-update', 'n_intervals')])
def updateTable(n):
     return getData()

@app.callback(
        dash.dependencies.Output('table2','data'),
        [dash.dependencies.Input('graph2-update', 'n_intervals')])
def updateTable2(n):
     return getData2()

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