Plotly dash table add rows and update input data

Question

I'm trying to make a dash table based on input data but I'm stucking in add more rows to add new inputs. Actually I read this docs and I know that I can directly input in dash table but I want to update dash table from input.

Below is my code:

import pandas as pd
import numpy as np
from datetime import datetime as dt
import plotly.express as px
import dash
import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import Input, Output, State
import dash_table
import dash_bootstrap_components as dbc
from dash_extensions import Download
from dash_extensions.snippets import send_data_frame
import glob
import os
from pandas.tseries.offsets import BDay
import plotly.graph_objects as go

app = dash.Dash(__name__)

MD23 = pd.DataFrame({'Number':[],
                         'PW':[],
                         'Name 1':[],
                         'Name 2':[],
                         'Email':[],
                         'Web':[],
                         'Abc':[]}) 
# ------------------------------------------------------------------------

input_types = ['number', 'password', 'text', 'tel', 'email', 'url', 'search']

app.layout = html.Div([
    html.Div([
        dcc.Input(
            id='my_{}'.format(x),
            type=x,
            placeholder="insert {}".format(x),  # A hint to the user of what can be entered in the control
            minLength=0, maxLength=50,          # Ranges for character length inside input box
            autoComplete='on',
            disabled=False,                     # Disable input box
            readOnly=False,                     # Make input box read only
            required=False,                     # Require user to insert something into input box
            size="20",                          # Number of characters that will be visible inside box
        ) for x in input_types
    ]),

    html.Br(),
    
    html.Button('Add Row',id='add_row',n_clicks=0),
    
    dbc.Row([    
        dbc.Col([html.H5('List',className='text-center'),
        dash_table.DataTable(
                id='table-container_3',
                data=[],
                columns=[{"name":i_3,"id":i_3,'type':'numeric'} for i_3 in MD23.columns],
                style_table={'overflow':'scroll','height':600},
                style_cell={'textAlign':'center'},
                row_deletable=True,
                editable=True)
                ],width={'size':12,"offset":0,'order':1})
            ]),
])


@app.callback(Output('table-container_3', 'data'),
             [Input('my_{}'.format(x),'value')for x in input_types])

def update_data(selected_number, selected_pw, 
                selected_text, selected_tel, 
                selected_email,selected_url,
                selected_search):
    
    data = pd.DataFrame({'Number':[selected_number],
                         'PW':[selected_pw],
                         'Name 1':[selected_text],
                         'Name 2':[selected_tel],
                         'Email':[selected_email],
                         'Web':[selected_url],
                         'Abc':[selected_search]})        
    
    return data.to_dict(orient='records')


# ------------------------------------------------------------------------
if __name__ == '__main__':
    app.run_server(debug=False)

I tried to add rows as below but it's not worked:

@app.callback(
    Output('table-container_3', 'data'),
    Input('add_row', 'n_clicks'),
    State('table-container_3', 'data'),
    State('table-container_3', 'columns'))

def add_row(n_clicks, rows, columns):
    if n_clicks > 0:
        rows.append()
    return rows

I really need suggestions to solve this problem. Thank you so much.

Adam Schroeder · Accepted Answer · 2022-02-15 05:25:59Z

1

+50

tran Try to replace your callback with this callback:

@app.callback(
Output('table-container_3', 'data'),
Input('add_row', 'n_clicks'),
[State('table-container_3', 'data'),
State('table-container_3', 'columns')]+
[State('my_{}'.format(x), 'value') for x in input_types])
def add_row(n_clicks, rows, columns, selected_number, selected_pw,
            selected_text, selected_tel,
            selected_email, selected_url,
            selected_search):

if n_clicks > 0:
    rows.append({c['id']: r for c,r in zip(columns, [selected_number, selected_pw, selected_text, selected_tel, selected_email, selected_url, selected_search])})

return rows

answered Feb 15, 2022 at 5:25

Adam Schroeder

7582 gold badges9 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Plotly dash table add rows and update input data

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related