Hello all,
I have two DataTables in the Dash app. The first DataTable is used as a big report dashboard, user has to scroll from left to right to see all the columns. By selecting a number from the dashboard, user can drill down to see the relevant records in the second DataTable. The problem is the focus is still on the active-cell in the first table, user has to scroll left and down to view the second table with details records. Does anyone know how to move the focus to the second datable automatically when the callback is completed?
My code sample
app.layout = html.Div([
html.H1(
children=‘Dashboard’,
html.Div([
dash_table.DataTable(
id='da_table',
columns=[{'name': i, 'id': i} for i in df.columns],
data=df.to_dict('records'),
filter_action='native',
sort_action='native',
),
html.Div(id='selected_cell')
]),
html.Div(id='metrics'),
dash_table.DataTable(
id='metric_table',
columns=[],
data=[])
])
@app.callback(
Output(‘selected_cell’, ‘children’),
Output(‘metrics’, ‘children’),
Output(‘metric_table’,‘columns’),
Output(‘metric_table’, ‘data’),
Output(‘metric_table’, ‘export_format’),
Input(‘da_table’, ‘active_cell’),
State(‘da_table’, ‘derived_viewport_data’)
)
def get_da_table_selection(active_cell, data):
if active_cell:
col = active_cell[‘column_id’]
row = active_cell[‘row’]
cellData = data[row][col]
if (cellData > 0):
metrics_id=data[row]['Data source'].replace("-", "_")
path_of_csv = processed_metrics.get_path()+'/'+selected_month+'/'+metrics_id+'.csv'
if os.path.exists(path_of_csv):
met_df = pd.read_csv(path_of_csv)
met_columns = [{'name': i, 'id': i} for i in met_df.columns]
met_data= met_df.to_dict('records')
metrics_caption=metrics_id+ " Drill Down"
else:
met_columns = []
met_data= []
cellData=0
metrics_caption=""
return html.P(f'row: {row}, col: {col}, value: {cellData}'), dcc.Markdown(metrics_caption), met_columns,met_data,'csv'
else:
return html.P(f'row: {row}, col: {col}, value: {cellData}'), '',[],[],None
else:
return html.P(f'active cell:{active_cell}, row_vid: {row_vid}'),'',[],[],None
Thanks
Chun