Datatable column id in callback

Dash Python
1

so i have this table below its all dropdowns. final_staging is the output from combining all the other inputs Based on selected value
inputs

Here is my code

app.layout = html.Div([
    dash_table.DataTable(
        id='table-dropdown',
        data=staging.to_dict('records'),
        columns=[
            {'id': 'customer_id', 'name': 'Customer ID'},
            {'id': 'booking_date', 'name': 'Booking Date'},
            {'id': 'oustanding_balance_(currency)',
             'name': 'Outstanding Balance(currency)'},
            {'id': 'booking_date', 'name': 'Booking Date'},
            {'id': 'past_due_days', 'name': 'Past Due Days'},
            {'id': 'segment', 'name': 'Segment'},
            {'id': 'contract_rate_%', 'name': 'Contract Rate(%)'},
            {'id': 'fee/commission_rate_%', 'name': 'Fee/Commission Rate(%)'},
            {'id': 'collateral_(force_sale_value_(currency)',
             'name': 'Collateral(currency)'},
            {'id': 'collateral_(type)', 'name': 'Collateral(Type)'},
            {'id': 'maturity_date', 'name': 'Maturity Date'},
            {'id': 'repayment_years', 'name': 'Repayment(Years)'},
            {'id': 'quantitative_assessment', 'name': 'Quantitative Assessment'},
            {'id': 'reason_code',
                'name': 'Reason Code', 'presentation': 'dropdown'},
            {'id': 'staging',
                'name': 'Staging', 'presentation': 'dropdown'},
            {'id': 'overwrite',
                'name': 'Overwrite', 'presentation': 'dropdown'},
            {'id': 'final_staging', 'name': 'Final Staging'},
        ],

        editable=True,
        dropdown={
            'reason_code': {
                'options': [
                    {'label': i, 'value': i}
                    for i in staging['reason_code'].unique()
                ]
            },
            'staging': {
                'options': [
                    {'label': s, 'value': s}
                    for s in staging['staging'].unique()
                ]
            },
            'overwrite': {
                'options': [
                    {'label': o, 'value': o}
                    for o in staging['overwrite'].unique()
                ]
            }
        }
    ),
    html.Div(id='table-dropdown-container')
])


@app.callback(
    Output(component_id='final_staging', component_property='children'),
    [Input(component_id='quantitative_assessment', component_property='value'),
    Input(component_id='reason_code', component_property='value'),
    Input(component_id='staging', component_property='value'),
    Input(component_id='overwrite', component_property='value')]
)
def update_output_div(quantitative_assessment, reason_code, staging, overwrite):
    if quantitative_assessment == 'Stage 1' and reason_code == 'Breach of contract' and staging == 'Stage 1' and overwrite == 'Yes':
        return 'Stage 1'
    elif quantitative_assessment == 'Stage 1' and reason_code == 'Breach of contract' and staging == 'Stage 1' and overwrite == 'No':
        return 'Stage 1'
    elif quantitative_assessment == 'Stage 1' and reason_code == 'Breach of contract' and staging == 'Stage 2' and overwrite == 'Yes':
        return 'Stage 2'
    elif quantitative_assessment == 'Stage 1' and reason_code == 'Breach of contract' and staging == 'Stage 2' and overwrite == 'No':
        return 'Stage 1'
    elif quantitative_assessment == 'Stage 1' and reason_code == 'Breach of contract' and staging == 'Stage 3' and overwrite == 'Yes':
        return 'Stage 3'
    elif quantitative_assessment == 'Stage 1' and reason_code == 'Breach of contract' and staging == 'Stage 3' and overwrite == 'No':
        return 'Stage 1'
    else:
        return 'No decision'

After running i get this error

ID not found in layout
Attempting to connect a callback Input item to component:
  "overwrite"
but no components with that id exist in the layout.

If you are assigning callbacks to components that are
generated by other callbacks (and therefore not in the
initial layout), you can suppress this exception by setting
`suppress_callback_exceptions=True`.
This ID was used in the callback(s) for Output(s):
  final_staging.children

What am i doing wrong?

2

hi @dankie were you able to figure this out? I am facing almost the exact same issue with trying to wire a callback to a component inside of a table cell but getting that the ID is not found

3

Hi @gabrielcenteno

It’s not currently possible to have components in cells of the DataTable. The dropdown prop may look like a component, but it’s actually just a way to make sure only certain data can be entered into a cell.

You can use the data_* props to trigger the callback and then determine what data has changed. Here is a link to a gist with more info.

If you have a simple table, then using an html table would be easier, since it’s possible to have components inside an html table.

4

@AnnMarieW thanks for the quick reply! I will take a look at the gist and let you know what I find