I’m trying to edit an uploaded datatable and use this uploaded datatable as an input to generate another datatable. I have tried the different methods mentioned in the documentation - Editable DataTable | Dash for Python Documentation | Plotly. Nothing seems to work.
def parse_contents(contents, filename, date):
content_type, content_string = contents.split(',')
decoded = base64.b64decode(content_string)
try:
if 'csv' in filename:
# Assume that the user uploaded a CSV file
df = pd.read_csv(
io.StringIO(decoded.decode('utf-8')))
elif 'xls' in filename:
# Assume that the user uploaded an excel file
df = pd.read_excel(io.BytesIO(decoded))
except Exception as e:
print(e)
return html.Div([
'There was an error processing this file.'
])
return html.Div([
html.H5(children="Uploaded file name : "),
html.Div([
dcc.Input(
id='adding-rows-name',
placeholder='Enter a column name...',
value='',
style={'padding': 10}
),
html.Button('Add Column', id='adding-rows-button', n_clicks=0)
], style={'height': 50}),
html.Hr(),
dash_table.DataTable(
data=df.to_dict('records'),
columns=[{'name': i, 'id': i} for i in df.columns],
page_size=15,
style_cell={'textAlign': 'left'},
style_cell_conditional=
[
{
'if': {'column_id': 'Region'},
'textAlign': 'left'
}
],
editable=True,
filter_action="native",
sort_action="native",
sort_mode="multi",
column_selectable="single",
row_selectable="multi",
row_deletable=True,
selected_columns=[],
selected_rows=[],
page_action="native",
page_current= 0,
),
html.Button('Add Row', id='editing-rows-button', n_clicks=0),
html.Button(id="submit-button", children="Extract data"),
dcc.Store(id='stored-data', data=df.to_dict('records')),
html.Hr(), # horizontal line
])
def layout():
return html.Div([
html.Div([
dcc.Upload(
id='upload-data',
children=html.Div([
'Drag and Drop or ',
html.A('Select Files')
]),
style={
'width': '100%',
'height': '60px',
'lineHeight': '60px',
'borderWidth': '1px',
'borderStyle': 'dashed',
'borderRadius': '5px',
'textAlign': 'center',
'margin': '10px'
},
# Allow multiple files to be uploaded
multiple=True
),
], className='row'),
html.Div(id='output-div'),
html.Div(id='output-container', children=[dash_table.DataTable(id='table-editing-simple-output2')]),
html.Div(id='uploaded-datatable', children=[dash_table.DataTable(id='table-editing-simple-output')]),
])
@app.callback(Output(component_id='uploaded-datatable', component_property='data'),
Output(component_id='uploaded-datatable', component_property='columns'),
Input(component_id='upload-data',component_property= 'contents'),
State(component_id='upload-data', component_property='filename'),
State(component_id='upload-data',component_property= 'last_modified'))
def update_output(list_of_contents, list_of_names, list_of_dates):
if list_of_contents is not None:
children = [
parse_contents(c, n, d) for c, n, d in
zip(list_of_contents, list_of_names, list_of_dates)]
return children
@app.callback(
Output('uploaded-datatable', 'data'),
Input('editing-rows-button', 'n_clicks'),
State('uploaded-datatable', 'data'),
State('uploaded-datatable', 'columns'))
def add_row(n_clicks, rows, columns):
if n_clicks > 0:
rows.append({c['id']: '' for c in columns})
return rows
@app.callback(
Output('uploaded-datatable', 'columns'),
Input('adding-rows-button', 'n_clicks'),
State('adding-rows-name', 'value'),
State('uploaded-datatable', 'columns'))
def update_columns(n_clicks, value, existing_columns):
if n_clicks > 0:
existing_columns.append({
'id': value, 'name': value,
'renamable': True, 'deletable': True
})
return existing_columns
@app.callback(Output(component_id='output-container', component_property='children'),
Input('submit-button','n_clicks'),
State('uploaded-datatable', 'data'))
def func(n_clicks,df):
if n_clicks:
rand_csv= initialize_empty_columns()
for val in df2['xyz']:
rand_csv=rand_csv.append(rand_csv_func(val))
return html.Div([
dash_table.DataTable(
data=df1.to_dict('records'),
columns=[{'name': i, 'id': i} for i in df1.columns],
page_size=15,
style_cell={'textAlign': 'left'},
style_cell_conditional=
[
{
'if': {'column_id': 'Region'},
'textAlign': 'left'
}
],
editable=True,
filter_action="native",
sort_action="native",
sort_mode="multi",
column_selectable="single",
row_selectable="multi",
row_deletable=True,
selected_columns=[],
selected_rows=[],
page_action="native",
page_current= 0,
)])