Dash table - update columns of the same table from a dataframe created/updated from a callback

Dash Python
1

Hello, I’m looking to create a data table that updates dynamically based on one column which is editable and the rest not (I know how to do this initial part). My current project looks like the following:

currentCodeExample
currentCodeExample1976×780 59.8 KB

Where the first data frame is editable, and if rows are edited, the values in the second data table will change automatically. I’m looking to merge the two i.e., remove the top data table and just have the ‘Bin’ column in the second table and make this editable. The data table must also be created in a call back - by default the optimal variable bins are created and outputted to the user which will change based on the variable they select (mentioning this as the documentation provides an example however the column is built into the layout, not via a callback).

I’ve also had a go at implementing a similar structure in this link: [Dash table update values for column/ row based on callback/user input from another column - #6 by keval] (post 7/8 - very useful for understanding states!) although the user refreshes based on a button and I’m looking to avoid this. Any help would be appreciated…thank you! My shortened code is:

dcc.Tab(label='Edit Bins', children=[

    html.Br(),

    html.Div([
        "Variable Selected:",
        dcc.Dropdown(
            id='select-char-tab-two',
            options=variable_names,
            multi=False,
            value=variables['Char Name'][0]
        )
    ]),

    html.Br(),

    dcc.Tabs(id="edited-bin-tabs", value="plots-tab-two", children=[
        dcc.Tab(label='Plot 1', value="tab-one-id"),
        dcc.Tab(label='Plot 2', value='tab-two-id')
    ]),
    html.Div(id='edited-bin-plots'),

    html.Br(),

    dbc.Label('Current Bins:'),
    html.Div(id='variable-bin-table'),

    html.Br(),

    html.Div(id='updated-bin-table'),

    html.Br()

])


@app.callback(
    Output('variable-bin-table', 'children'),
    Input('select-char-tab-two', 'value')
)
def render_bin_table(char_selected):
    optb_df = get_updated_df(data, char_selected)

    current_bins = optb_df[['Bin']]

    return dash_table.DataTable(
        id='current-bins-table',
        editable=True,
        columns=[{'name': i, 'id': i} for i in current_bins.columns],
        data=current_bins.to_dict('records')
    )


@app.callback(
    Output('updated-bin-table', 'children'),
    Input('current-bins-table', 'data'),
    Input('current-bins-table', 'columns'),
    Input('select-char-tab-two', 'value')
)
def render_main_table(rows, columns, char_selected):

    df = pd.DataFrame(rows, columns=[c['name'] for c in columns])

    current_bins = df.loc[:, 'Bin']

    # Create list of lists containing current_char bins
    bin_list = []
    for char_bin in current_bins:
        bin_list.append(char_bin.split(','))

    new_binned_df = get_edited_binned_stats(df)

    return dash_table.DataTable(
        data=new_binned_df.to_dict('records'),
        columns=[{'name': i, "id": i} for i in new_binned_df.columns]
    )