Select active_cell of dynamic DataTable

Dash Python
1

Hi all!

I appreciate all the help I can get on this…

Goal
I am trying to build a simple app that does the following:

  1. there is initially a datatable on the page, and the user can select a cell from that table.
  2. a new datatable pops up in the page, and its contents depend on the value selected in 1).
  3. the user selects a cell from the second table.
  4. the user hits the submit button, linking the value selected in 1) to the value selected in 3)

I want to use datatables (and not dropdowns) to be able to display more information about the items, so that the user makes a more informed choice.

Problem
I cannot get the active_cell for the second table.
Listening to the second datatable (the one created in 2)) and getting the selected value seem to break the creation of this very second table (which stays empty no matter the value selected in the first table). The second table is created just fine if I do not have it as input to get the active_cell.
In the code below, removing the last callback function shows this fact.

Code

df_1 = pd.DataFrame(['A', 'B', 'C'], columns=['Letter'])

res = {'A': pd.DataFrame([1, 2, 3], columns=['Digit']),
       'B': pd.DataFrame([4, 5, 6], columns=['Digit']),
       'C': pd.DataFrame([7, 8, 9], columns=['Digit'])}

app = dash.Dash(__name__)

app.layout = app.layout = html.Div([
    dash_table.DataTable(
        id='table-one',
        columns=[{"name": i, "id": i} for i in df_1.columns],
        data=df_1.to_dict("rows")),

    html.Hr(),
    html.Div(id='selected-letter'),  # intermediate variable, will have style={'display': 'none'}
    dash_table.DataTable(id='table-two',
                         columns=[{'name': 'Digit', 'id': 'Digit'}],
                         data=[{}]),
    html.Button(id='submit-button', n_clicks=0, children='Submit'),
    html.Div(id='selected-digit')

    ])


@app.callback(Output('selected-letter', 'children'),
              [Input('table-one', 'active_cell'),
               Input('table-one', 'data')])
def get_active_letter(active_cell, data):
    if active_cell:
        return str(data[active_cell[0]]['Letter'])


@app.callback(Output('table-two', 'data'),
              [Input('selected-letter', 'children')])
def neighbors_of_selected(selected_letter):
    if selected_letter:
        return res[selected_letter].to_dict("rows")


@app.callback(Output('selected-digit', 'children'),
              [Input('submit-button', 'n_clicks')],
              [State('table-two', 'active_cell'),
               State('table-two', 'data')])
def get_active_digit(n_clicks, active_cell, data):
    if active_cell and data:
        return str(data[active_cell[0]]['Digit']))
2

Found a way!
Initializing selected-letter by adding a default value in get_active_letter.
Still unclear about exactly why my initial version was not working at all

Code

@app.callback(Output('selected-letter', 'children'),
              [Input('table-one', 'active_cell'),
               Input('table-one', 'data')])
def get_active_letter(active_cell, data):
    if not active_cell:
        return df_1.iloc[0,0]
    if active_cell:
        return str(data[active_cell[0]]['Letter'])