Hello,
I have created two tables with the following code:
app.layout = html.Div([
html.Div([html.Label('AML RISK CALIBRATION', style={'fontWeight': 'bold', 'fontFamily': 'Arial, Helvetica, sans-serif', 'color': 'darkorange', 'fontSize': 16})]),
html.Br(),
html.Div([html.Label('WEIGHTS', style={'fontWeight': 'bold', 'fontFamily': 'Arial, Helvetica, sans-serif', 'color': 'darkorange', 'fontSize': 14}),
dash_table.DataTable(id='table-threshold', data=df_weight.to_dict('records'),
columns= [{'name': 'Feature', 'id': 'Feature'}, {'name': 'Weight', 'id': 'Weight'},
{'name': 'new_Weight', 'id': 'new_Weight', 'editable': True, 'type': 'numeric',}],
style_header={'backgroundColor': 'darkorange',
'color': 'white',
'fontWeight': 'bold', 'fontFamily': 'Arial, Helvetica, sans-serif', 'fontSize': 12
},
style_data={'backgroundColor': 'white',
'color': 'slategray',
'fontFamily': 'Arial, Helvetica, sans-serif', 'fontSize': 12,
'width': '100%', 'maxWidth': '100px'
},
style_cell_conditional=[{'if': {'column_id': 'Feature'}, 'textAlign': 'left'}],
style_cell={'padding-right': '16px', 'padding-left': '4px'},
fill_width=False,
style_table={'height': cal_height, 'width': '440px', 'overflowY': 'auto'},
export_format='csv', export_headers='display',
#filter_action='native',
#filter_options={'case': 'insensitive'},
#sort_action='native',
#sort_mode='multi',
)],
style={'display': 'inline-block', 'margin-right': '80px'}),
html.Div([html.Label('THRESHOLDS', style={'fontWeight': 'bold', 'fontFamily': 'Arial, Helvetica, sans-serif', 'color': 'darkorange', 'fontSize': 14}),
dash_table.DataTable(id='table-threshold', data=df_thres.to_dict('records'),
columns= [{'name': 'Feature', 'id': 'Feature'}, {'name': 'Threshold', 'id': 'Threshold'},
{'name': 'new_Threshold', 'id': 'new_Threshold', 'editable': True, 'type': 'numeric'}],
style_header={'backgroundColor': 'darkorange',
'color': 'white',
'fontWeight': 'bold', 'fontFamily': 'Arial, Helvetica, sans-serif', 'fontSize': 12
},
style_data={'backgroundColor': 'white',
'color': 'slategray',
'fontFamily': 'Arial, Helvetica, sans-serif', 'fontSize': 12,
'width': '100%', 'maxWidth': '100px'
},
style_cell_conditional=[{'if': {'column_id': 'Feature'}, 'textAlign': 'left'}],
style_cell={'padding-right': '16px', 'padding-left': '4px'},
fill_width=False,
style_table={'height': cal_height, 'width': '440px', 'overflowY': 'auto'},
export_format='csv', export_headers='display',
#filter_action='native',
#filter_options={'case': 'insensitive'},
#sort_action='native',
#sort_mode='multi',
)],
style={'display': 'inline-block'})
There are three columns in each table and only the last one is editable in both cases.
How would I go about a callback that updates the two underlying dataframes but only when a (single) submit button is clicked?
Second question: If I add filter and sort functionality to the tables, would the new dataframes by default preserve the original content and sorting or the filtered and re-sorted ones? If possible, I would like to preserve the original sorting and content but with the edits introduced by the user.
The second question is relatively irrelevant because the dataframes are very small and I can live without sorting and filtering.
Best,
Ed