hi,
I’m trying to create an app where there are two tables. In the first, you can select a single row. There is a button that then allows you to add data from the selected row to a new table. I would like to be able to select different rows and press the button multiple times to add multiple rows to the second data table.
My current implementation has two problems:
- Something is wrong with the State whereby I’m basically copying the data from the entire first table to the second.
- Each time I select a new row, the added row is replaced. I want to keep each selected and added row in the second data table.
here is my code:
from dash import Dash, dash_table, html, ctx
from dash.dependencies import Input, Output, State
app = Dash(__name__)
app.layout = html.Div([
dash_table.DataTable(
id='adding-rows-table',
columns=[{
'name': 'Column {}'.format(i),
'id': 'column-{}'.format(i),
} for i in range(1, 5)],
data=[
{'column-{}'.format(i): (j + (i-1)*5) for i in range(1, 5)}
for j in range(5)
],
row_selectable="single",
editable=True,
row_deletable=True
),
dash_table.DataTable(
id='adding-rows-table2',
columns=[{
'name': 'Column {}'.format(i),
'id': 'column-{}'.format(i),
} for i in range(1, 5)],
editable=True,
row_deletable=True
),
html.Button('Add Row', id='editing-rows-button', n_clicks=0),
html.Table(id='table')
])
@app.callback(
Output('adding-rows-table2', 'data'),
Input('editing-rows-button', 'n_clicks'),
Input("adding-rows-table", "selected_rows"),
Input("adding-rows-table", "data"),
State('adding-rows-table', 'data'),)
def add_row(n_clicks, selected_row, data, rows,):
if selected_row and data and 'editing-rows-button' == ctx.triggered_id:
da_data = data[selected_row[0]]
rows.append(da_data)
return rows
if __name__ == '__main__':
app.run_server(debug=True)