Python Dash - add submit button at the end of multiple inputs. Also format output table nicely

Question

Want to create a dash board, with two or more inputs, a submit button at the end of inputs that outputs a table. I am having trouble creating properly spaced inputs, placing the button and formatting the output table.

import pandas as pd
import dash
import dash_core_components as dcc
import dash_bootstrap_components as dbc
import dash_html_components as html
from dash.dependencies import Input, Output, State

df1 = pd.DataFrame({{'col1': [1, 2], 'col2': [3, 4]}})
df1 = df1 + 100
df3 = df1 -100
df4 = df1/2

app = dash.Dash()

app.layout = html.Div([
    html.Div([
        html.Div([
            dcc.Markdown(children= ''' Drop Down''')
        ]),
        
        dcc.Dropdown(id = 'dd',
                         options = [{'label' : 'NY', 'value' : 'NY'}, 
                                    {'label' : 'SF', 'value' : 'SF'}],
                         value = 'NY'
                        )
        ],
        style = {'width':'48%', 'display':'inline-block'}
    ),
    
    html.Div([
        html.Div([
            dcc.Markdown(children= ''' Input''')
        ]),
        
        dcc.Input(id = 'x',
                  placeholder='Enter a value...',
                  value = '',
                  type = 'number',
                  max = 1.0,
                  min = 0.0
                 ),
    ],
        style = {'width':'48%', 'display':'inline-block'}
    ),
    
    html.Button(id = 'submit',
#                 n_clicks = 0,
                children = 'Submit here',
                style = {'fontsize':24}
               ),
    
    html.Div(id = 'table')
    
])

@app.callback(Output(component_id = 'table',
                    component_property = 'children'),
              [Input(component_id ='dd', 
                     component_property = 'value'),
               Input(component_id ='x', 
                     component_property = 'value')
              ],
              [State('submit', 'value')]
             )
def risk(dd, d):
    if ((dd == 'NY') and (d <0.5)):
        table = df1
    elif ((dd == 'NY') and (d >= 0.5)):
        table = df2
    elif ((dd == 'SF') and (d <0.5)):
        table = df3
    else :
        table = df4
    return dbc.Table.from_dataframe(table, 
                                    striped=True, 
                                    bordered=True, 
                                    hover=True)


if __name__ == '__main__':
    app.run_server()

I ran the above after commenting out the html.Button and the State part. It runs.

1. How can I properly include the button such that the table is produced only when I input all inputs and click submit?

2. How can I better format the table with borders?

Here is how my html looks like, when I run after removing Button and State.

This is ugly. Help me format better.

PS - I want the puts(Drop Down and Input take equal space, and are on the same line. Submit button should ideally be in the middle, right below the inputs.

Answer 1

I am new to dash and I am also requiring the guidance in the same matter, I have a code with the cascaded radio buttons, I want to add the Start button and after clicking the Start button the dash should start displaying the data, but currently its just opening and displaying the data. I also need help , as I have auto-update in my dash, will there be any contradiction if I need to add Start button and then dash should display the data and auto update the values.