I am brand new to all of this (and I have a cold), so I apologize up front if this seems dense.
I have spent this week trying to figure out how to design an editable datatable via Flask without much success. I found the plugin bootstable, and I had my table ready to go, with the data populating the cells perfectly. But I could not pip install jquery (required) and its dependencies. This appears to be a common problem, evidenced by the posts I saw online.
So I circled back to the editable Dash/plotly datatables.
My problem here is that I cannot figure out how to populate the cells with the data I need to use.
I pasted the code from one the Dash editable templates below as an example, as well as my best attempt to make it work. Changing the columns is easy. And the code works fine with the dummy data, but I cannot figure out how to make my data (currently in JSON form ) compatible with this template. I have poured over the Dash/Plotly website and I don’t see much direction on this topic. I could be wrong, but I made a very honest effort.
How would arrange my data so that it can be used by data=[ ] in the code below?
My data is a list of Python dictionaries currently in JSON form, and sent as a simple list via Flask to index.html. I know it transfers because it works in other unsuccessful attempts. I just can’t install the dependencies for jquery, as noted above. I could easily transform it into a CSV file if necessary, though I would prefer JSON.
Does anyone know how to resolve this issue?
Any help at this point would be greatly appreciated.
Here is the template online, found on the Editable Tables page:
import dash
from dash.dependencies import Input, Output
import dash_table
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
app = dash.Dash(__name__)
params = [
'Weight', 'Torque', 'Width', 'Height',
'Efficiency', 'Power', 'Displacement'
]
app.layout = html.Div([
dash_table.DataTable(
id='table-editing-simple',
columns=(
[{'id': 'Model', 'name': 'Model'}] +
[{'id': p, 'name': p} for p in params]
),
data=[
dict(Model=i, **{param: 0 for param in params})
for i in range(1, 5)
],
editable=True
),
dcc.Graph(id='table-editing-simple-output')
])
@app.callback(
Output('table-editing-simple-output', 'figure'),
Input('table-editing-simple', 'data'),
Input('table-editing-simple', 'columns'))
def display_output(rows, columns):
df = pd.DataFrame(rows, columns=[c['name'] for c in columns])
return {
'data': [{
'type': 'parcoords',
'dimensions': [{
'label': col['name'],
'values': df[col['id']]
} for col in columns]
}]
}
if __name__ == '__main__':
app.run_server(debug=True)
Here is my attempt to make it work, though I receive an “Error loading layout” message, where user_edits is the list of dictionaries and each_dict is each dictionary in the list.
Thank you for any sincere feedback.
app = dash.Dash(__name__)
with open("./json/flask_dict.json", "r") as flask_dicts:
user_edits = json.load(flask_dicts)
app.layout = html.Div([
dash_table.DataTable(
id='table-editing-simple',
columns=(
[{'id': 'Index', 'name': 'Index'}] +
[{'id': 'Amounts', 'name': 'Amounts'}] +
[{'id': 'Modifiers', 'name': 'Modifiers'}] +
[{'id': 'Units', 'name': 'Units'}] +
[{'id': 'Ings', 'name': 'Ings'}]
),
data=[{v for k,v in each_dict.items()} for each_dict in user_edits],
editable=True
),
dcc.Graph(id='table-editing-simple-output')
])
Here is the list of dictionaries in their present form:
recipe_ents_list = [{‘Index’: 0, ‘Amounts’: ‘.5’, ‘Modifiers’: ‘None’, ‘Units’: ‘teaspoon’, ‘Ings’: ‘dried oregano’},
{‘Index’: 1, ‘Amounts’: ‘0.25’,‘Modifiers’: ‘None’, ‘Units’: ‘tsp’, ‘Ings’: ‘red chilli flakes’},
{‘Index’: 2, ‘Amounts’: ‘0.25’, ‘Modifiers’: ‘None’, ‘Units’: ‘tsp’, ‘Ings’: ‘ground cloves’},
{‘Index’: 3, ‘Amounts’: ‘1’, ‘Modifiers’: ‘None’, ‘Units’: ‘tbsp’, ‘Ings’: ‘sunflower oil’},
{‘Index’: 4, ‘Amounts’: ‘1’, ‘Modifiers’: ‘None’, ‘Units’: ‘tsp’, ‘Ings’: ‘mustard seeds’},
{‘Index’: 5, ‘Amounts’: ‘1’, ‘Modifiers’: ‘divided’, ‘Units’: ‘tsp’, ‘Ings’: ‘salt’},
{‘Index’: 6, ‘Amounts’: ‘1.33’, ‘Modifiers’: ‘None’, ‘Units’: ‘tsp’, ‘Ings’: ‘cumin’},
{‘Index’: 7, ‘Amounts’: ‘1.5’, ‘Modifiers’: ‘None’, ‘Units’: ‘teaspoon’, ‘Ings’: ‘dried thyme’},
{‘Index’: 8, ‘Amounts’: ‘10’, ‘Modifiers’: ‘None’, ‘Units’: ‘teaspoon’, ‘Ings’: ‘cardamom pods’},
{‘Index’: 9, ‘Amounts’: ‘3’, ‘Modifiers’: ‘None’, ‘Units’: ‘cm’, ‘Ings’: ‘ginger’},
{‘Index’: 10, ‘Amounts’: ‘3’, ‘Modifiers’: ‘medium’, ‘Units’: ‘cm’, ‘Ings’: ‘shallots’},
{‘Index’: 11, ‘Amounts’: ‘300’, ‘Modifiers’: ‘None’, ‘Units’: ‘grams’, ‘Ings’: ‘red lentils’},
{‘Index’: 12, ‘Amounts’: ‘4’, ‘Modifiers’: ‘minced’, ‘Units’: ‘grams’, ‘Ings’: ‘cloves of garlic’},
{‘Index’: 13, ‘Amounts’:‘400’, ‘Modifiers’: ‘None’, ‘Units’: ‘grams’, ‘Ings’: ‘diced tomatoes’},
{‘Index’: 14, ‘Amounts’: ‘80’, ‘Modifiers’: ‘None’, ‘Units’: ‘grams’, ‘Ings’: ‘baby spinach’},
{‘Index’: 15, ‘Amounts’: ‘1’, ‘Modifiers’: ‘None’, ‘Units’: ‘handful’,‘Ings’: ‘cilantro’},
{‘Index’: 16, ‘Amounts’: ‘1’, ‘Modifiers’: ‘Half’, ‘Units’: ‘handful’, ‘Ings’: ‘lemon’}]
