I have a simple dash app containing a data table.Two user inputs make it possible to add a row or a column. Juste like when I add a row I get default values (here 0 hours) for every column, I would also like to have default values for all rows when adding a new column. Here is the code:
import pathlib as pl
import dash
from dash import dash_table
from dash.dash_table.Format import Format, Scheme, Sign, Symbol
from dash import dcc
from dash import html
import plotly.graph_objs as go
import pandas as pd
from dash.dependencies import Input, Output, State
table_header_style = {
"backgroundColor": "rgb(2,21,70)",
"color": "white",
"textAlign": "center",
}
app = dash.Dash(__name__)
app.title = "Trial"
server = app.server
APP_PATH = str(pl.Path(__file__).parent.resolve())
list_rows = ['a', 'b', 'c', 'd']
tasks = ['task' + str(i) for i in range(5)]
data = {task:[0 for i in range(len(list_rows))] for task in tasks}
app.layout = html.Div(
className="",
children=[
html.Div(
# className="container",
children=[
html.Div(
# className="row",
style={},
children=[
html.Div(
# className="four columns pkcalc-settings",
children=[
html.P(["Study Design"]),
html.Div(
[
html.Label(
[
dcc.Input(
id="new-row",
placeholder="Row to be added...",
type="text",
debounce=True,
maxLength=20,
style={
'width':'66%',
'margin-left': '5px'
}
),
html.Button(
'Add',
id='add-row-button',
n_clicks=0,
style={
'font-size': '10px',
'width': '140px',
'display': 'inline-block',
'margin-bottom': '5px',
'margin-right': '5px',
'margin-left': '5px',
'height':'38px',
'verticalAlign': 'top'
}
),
]
),
html.Label(
[
dcc.Input(
id="new-task",
placeholder="Task to be added...",
type="text",
debounce=True,
maxLength=50,
style={'width':'66%'}
),
html.Button(
'Add',
id='add-task-button',
n_clicks=0,
style={
'font-size': '10px',
'width': '140px',
'display': 'inline-block',
'margin-bottom': '5px',
'margin-right': '5px',
'margin-left': '5px',
'height':'38px',
'verticalAlign': 'top'
}
),
]
),
]
),
],
),
html.Div(
# className="eight columns pkcalc-data-table",
children=[
dash_table.DataTable(
id='table',
columns=(
[{
'id': 'name',
'name': 'Name',
'type': 'text',
'deletable': True,
'renamable': True,
}] +
[{
'id': task,
'name': task,
'type': 'numeric',
'deletable': True,
'renamable': True,
'format': Format(
precision=0,
scheme=Scheme.fixed,
symbol=Symbol.yes,
symbol_suffix='h'
),
} for task in tasks]
),
data=[dict(name=i, **{task: 0 for task in tasks}) for i in list_rows],
editable=True,
style_header=table_header_style,
active_cell={"row": 0, "column": 0},
selected_cells=[{"row": 0, "column": 0}],
),
],
),
],
),
],
),
],
)
# Callback to add column
@app.callback(
Output(component_id='table', component_property='columns'),
Input(component_id='add-task-button', component_property='n_clicks'),
State(component_id='new-task', component_property='value'),
State(component_id='table', component_property='columns'),)
def update_columns(n_clicks, new_task, existing_tasks):
if n_clicks > 0:
existing_tasks.append({
'id': new_task, 'name': new_task,
'renamable': True, 'deletable': True
})
return existing_tasks
# Callback to add row
@app.callback(
Output(component_id='table', component_property='data'),
Input(component_id='add-row-button', component_property='n_clicks'),
State(component_id='new-row', component_property='value'),
State(component_id='table', component_property='columns'),
State(component_id='table', component_property='data'))
def update_rows(n_clicks, new_row, columns, rows):
if n_clicks > 0:
rows.append(
{
'name': new_row,
**{column['id']: 0 for column in columns[1:]}
}
)
return rows
if __name__ == "__main__":
app.run_server(debug=True)
Any help would be greatly appreciated!
