Add row to new data table based on selected row of another data table

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:

  1. Something is wrong with the State whereby I’m basically copying the data from the entire first table to the second.
  2. 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)

Hi,

Please try the following



from dash import Dash, dash_table, html, ctx, no_update
from dash.dependencies import Input, Output, State


app = Dash(__name__)

server = app.server

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",
        selected_rows=[],
        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-table2', 'data'),)
def add_row(n_clicks, selected_row, data, rows,):

    rows = rows or []

    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)

1 Like