kandi background
kandi background
Explore Kits
kandi background
Explore Kits
kandi background
Explore Kits
kandi background
Explore Kits
Explore all Autocomplete open source software, libraries, packages, source code, cloud functions and APIs.

Popular New Releases in Autocomplete

spec-build-number-0.694.0

v6.1.7

3.0.0-alpha.1

v10.2.6

v8.1.1

autocomplete

spec-build-number-0.694.0

downshift

v6.1.7

vue-multiselect

3.0.0-alpha.1

autoComplete.js

v10.2.6

ng-select

v8.1.1

Popular Libraries in Autocomplete

Trending New libraries in Autocomplete

Top Authors in Autocomplete

1

5 Libraries

8665

2

4 Libraries

44

3

3 Libraries

330

4

3 Libraries

1138

5

3 Libraries

376

6

3 Libraries

989

7

3 Libraries

20

8

3 Libraries

12

9

3 Libraries

182

10

2 Libraries

24

1

5 Libraries

8665

2

4 Libraries

44

3

3 Libraries

330

4

3 Libraries

1138

5

3 Libraries

376

6

3 Libraries

989

7

3 Libraries

20

8

3 Libraries

12

9

3 Libraries

182

10

2 Libraries

24

Trending Kits in Autocomplete

No Trending Kits are available at this moment for Autocomplete

Trending Discussions on Autocomplete

    Plotly dash table add rows and update input data
    How to fix: "@angular/fire"' has no exported member 'AngularFireModule'.ts(2305) ionic, firebase, angular
    Module not found: Error: Can't resolve 'date-fns/addDays' in 'C:\Users\
    Simulate Bash's COMPREPLY response without actually completing it
    React/Socket.io not displaying latest message passed down as prop
    Unable to build and deploy Rails 6.0.4.1 app on heroku - Throws gyp verb cli error
    Getting keyboard navigation to work with MUI Autocomplete and SimpleBar for react
    Disable irb autocomplete
    Why typescript does not properly infer T[K] with <T extends Person, K extends keyof T> generic?
    Typescript: deep keyof of a nested object, with related type

QUESTION

Plotly dash table add rows and update input data

Asked 2022-Feb-15 at 05:25

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:

1import pandas as pd
2import numpy as np
3from datetime import datetime as dt
4import plotly.express as px
5import dash
6import dash_html_components as html
7import dash_core_components as dcc
8from dash.dependencies import Input, Output, State
9import dash_table
10import dash_bootstrap_components as dbc
11from dash_extensions import Download
12from dash_extensions.snippets import send_data_frame
13import glob
14import os
15from pandas.tseries.offsets import BDay
16import plotly.graph_objects as go
17
18app = dash.Dash(__name__)
19
20MD23 = pd.DataFrame({'Number':[],
21                         'PW':[],
22                         'Name 1':[],
23                         'Name 2':[],
24                         'Email':[],
25                         'Web':[],
26                         'Abc':[]}) 
27# ------------------------------------------------------------------------
28
29input_types = ['number', 'password', 'text', 'tel', 'email', 'url', 'search']
30
31app.layout = html.Div([
32    html.Div([
33        dcc.Input(
34            id='my_{}'.format(x),
35            type=x,
36            placeholder="insert {}".format(x),  # A hint to the user of what can be entered in the control
37            minLength=0, maxLength=50,          # Ranges for character length inside input box
38            autoComplete='on',
39            disabled=False,                     # Disable input box
40            readOnly=False,                     # Make input box read only
41            required=False,                     # Require user to insert something into input box
42            size="20",                          # Number of characters that will be visible inside box
43        ) for x in input_types
44    ]),
45
46    html.Br(),
47    
48    html.Button('Add Row',id='add_row',n_clicks=0),
49    
50    dbc.Row([    
51        dbc.Col([html.H5('List',className='text-center'),
52        dash_table.DataTable(
53                id='table-container_3',
54                data=[],
55                columns=[{"name":i_3,"id":i_3,'type':'numeric'} for i_3 in MD23.columns],
56                style_table={'overflow':'scroll','height':600},
57                style_cell={'textAlign':'center'},
58                row_deletable=True,
59                editable=True)
60                ],width={'size':12,"offset":0,'order':1})
61            ]),
62])
63
64
65@app.callback(Output('table-container_3', 'data'),
66             [Input('my_{}'.format(x),'value')for x in input_types])
67
68def update_data(selected_number, selected_pw, 
69                selected_text, selected_tel, 
70                selected_email,selected_url,
71                selected_search):
72    
73    data = pd.DataFrame({'Number':[selected_number],
74                         'PW':[selected_pw],
75                         'Name 1':[selected_text],
76                         'Name 2':[selected_tel],
77                         'Email':[selected_email],
78                         'Web':[selected_url],
79                         'Abc':[selected_search]})        
80    
81    return data.to_dict(orient='records')
82
83
84# ------------------------------------------------------------------------
85if __name__ == '__main__':
86    app.run_server(debug=False)
87

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

1import pandas as pd
2import numpy as np
3from datetime import datetime as dt
4import plotly.express as px
5import dash
6import dash_html_components as html
7import dash_core_components as dcc
8from dash.dependencies import Input, Output, State
9import dash_table
10import dash_bootstrap_components as dbc
11from dash_extensions import Download
12from dash_extensions.snippets import send_data_frame
13import glob
14import os
15from pandas.tseries.offsets import BDay
16import plotly.graph_objects as go
17
18app = dash.Dash(__name__)
19
20MD23 = pd.DataFrame({'Number':[],
21                         'PW':[],
22                         'Name 1':[],
23                         'Name 2':[],
24                         'Email':[],
25                         'Web':[],
26                         'Abc':[]}) 
27# ------------------------------------------------------------------------
28
29input_types = ['number', 'password', 'text', 'tel', 'email', 'url', 'search']
30
31app.layout = html.Div([
32    html.Div([
33        dcc.Input(
34            id='my_{}'.format(x),
35            type=x,
36            placeholder="insert {}".format(x),  # A hint to the user of what can be entered in the control
37            minLength=0, maxLength=50,          # Ranges for character length inside input box
38            autoComplete='on',
39            disabled=False,                     # Disable input box
40            readOnly=False,                     # Make input box read only
41            required=False,                     # Require user to insert something into input box
42            size="20",                          # Number of characters that will be visible inside box
43        ) for x in input_types
44    ]),
45
46    html.Br(),
47    
48    html.Button('Add Row',id='add_row',n_clicks=0),
49    
50    dbc.Row([    
51        dbc.Col([html.H5('List',className='text-center'),
52        dash_table.DataTable(
53                id='table-container_3',
54                data=[],
55                columns=[{"name":i_3,"id":i_3,'type':'numeric'} for i_3 in MD23.columns],
56                style_table={'overflow':'scroll','height':600},
57                style_cell={'textAlign':'center'},
58                row_deletable=True,
59                editable=True)
60                ],width={'size':12,"offset":0,'order':1})
61            ]),
62])
63
64
65@app.callback(Output('table-container_3', 'data'),
66             [Input('my_{}'.format(x),'value')for x in input_types])
67
68def update_data(selected_number, selected_pw, 
69                selected_text, selected_tel, 
70                selected_email,selected_url,
71                selected_search):
72    
73    data = pd.DataFrame({'Number':[selected_number],
74                         'PW':[selected_pw],
75                         'Name 1':[selected_text],
76                         'Name 2':[selected_tel],
77                         'Email':[selected_email],
78                         'Web':[selected_url],
79                         'Abc':[selected_search]})        
80    
81    return data.to_dict(orient='records')
82
83
84# ------------------------------------------------------------------------
85if __name__ == '__main__':
86    app.run_server(debug=False)
87@app.callback(
88    Output('table-container_3', 'data'),
89    Input('add_row', 'n_clicks'),
90    State('table-container_3', 'data'),
91    State('table-container_3', 'columns'))
92
93def add_row(n_clicks, rows, columns):
94    if n_clicks > 0:
95        rows.append()
96    return rows
97

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

ANSWER

Answered 2022-Feb-15 at 05:25

tran Try to replace your callback with this callback:

copy icondownload icon

1import pandas as pd
2import numpy as np
3from datetime import datetime as dt
4import plotly.express as px
5import dash
6import dash_html_components as html
7import dash_core_components as dcc
8from dash.dependencies import Input, Output, State
9import dash_table
10import dash_bootstrap_components as dbc
11from dash_extensions import Download
12from dash_extensions.snippets import send_data_frame
13import glob
14import os
15from pandas.tseries.offsets import BDay
16import plotly.graph_objects as go
17
18app = dash.Dash(__name__)
19
20MD23 = pd.DataFrame({'Number':[],
21                         'PW':[],
22                         'Name 1':[],
23                         'Name 2':[],
24                         'Email':[],
25                         'Web':[],
26                         'Abc':[]}) 
27# ------------------------------------------------------------------------
28
29input_types = ['number', 'password', 'text', 'tel', 'email', 'url', 'search']
30
31app.layout = html.Div([
32    html.Div([
33        dcc.Input(
34            id='my_{}'.format(x),
35            type=x,
36            placeholder="insert {}".format(x),  # A hint to the user of what can be entered in the control
37            minLength=0, maxLength=50,          # Ranges for character length inside input box
38            autoComplete='on',
39            disabled=False,                     # Disable input box
40            readOnly=False,                     # Make input box read only
41            required=False,                     # Require user to insert something into input box
42            size="20",                          # Number of characters that will be visible inside box
43        ) for x in input_types
44    ]),
45
46    html.Br(),
47    
48    html.Button('Add Row',id='add_row',n_clicks=0),
49    
50    dbc.Row([    
51        dbc.Col([html.H5('List',className='text-center'),
52        dash_table.DataTable(
53                id='table-container_3',
54                data=[],
55                columns=[{"name":i_3,"id":i_3,'type':'numeric'} for i_3 in MD23.columns],
56                style_table={'overflow':'scroll','height':600},
57                style_cell={'textAlign':'center'},
58                row_deletable=True,
59                editable=True)
60                ],width={'size':12,"offset":0,'order':1})
61            ]),
62])
63
64
65@app.callback(Output('table-container_3', 'data'),
66             [Input('my_{}'.format(x),'value')for x in input_types])
67
68def update_data(selected_number, selected_pw, 
69                selected_text, selected_tel, 
70                selected_email,selected_url,
71                selected_search):
72    
73    data = pd.DataFrame({'Number':[selected_number],
74                         'PW':[selected_pw],
75                         'Name 1':[selected_text],
76                         'Name 2':[selected_tel],
77                         'Email':[selected_email],
78                         'Web':[selected_url],
79                         'Abc':[selected_search]})        
80    
81    return data.to_dict(orient='records')
82
83
84# ------------------------------------------------------------------------
85if __name__ == '__main__':
86    app.run_server(debug=False)
87@app.callback(
88    Output('table-container_3', 'data'),
89    Input('add_row', 'n_clicks'),
90    State('table-container_3', 'data'),
91    State('table-container_3', 'columns'))
92
93def add_row(n_clicks, rows, columns):
94    if n_clicks > 0:
95        rows.append()
96    return rows
97@app.callback(
98Output('table-container_3', 'data'),
99Input('add_row', 'n_clicks'),
100[State('table-container_3', 'data'),
101State('table-container_3', 'columns')]+
102[State('my_{}'.format(x), 'value') for x in input_types])
103def add_row(n_clicks, rows, columns, selected_number, selected_pw,
104            selected_text, selected_tel,
105            selected_email, selected_url,
106            selected_search):
107
108if n_clicks > 0:
109    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])})
110
111return rows
112

Source https://stackoverflow.com/questions/71045841