Return data table from json content in Python Dash Canvas - Table doesnt update when adding column

Viewed 482

I am making a Python Dash Canvas and try to access the json data from geometries painted on the canvas. From here, I aim to return a data table from the information stored in json format.

I first predefined columns found in the json data: ['type', 'width', 'height', 'scaleX', 'strokeWidth', 'path']:

enter image description here

Then I would like to also add the column "pathOffset", found in the json, but when adding this column to the list of predefined columns, the table doesnt update accordingly.

This is my code:

from dash_canvas import DashCanvas
import dash
from dash.exceptions import PreventUpdate
from dash.dependencies import Input, Output
import dash_html_components as html
import dash_core_components as dcc
import dash_daq as daq
from dash_table import DataTable
import json


filename = 'https://www.publicdomainpictures.net/pictures/60000/nahled/flower-outline-coloring-page.jpg'

canvas_width = 100
columns = ['type', 'width', 'height', 'scaleX', 'strokeWidth', 'path']
    
app = JupyterDash(__name__)

app.layout = html.Div([

        html.Div([    

            DashCanvas(
                id='canvaas-color',
                width=canvas_width,
                filename=filename,
                hide_buttons=['line', 'zoom', 'pan'],
                )
                ], className="six columns"),
                     
    DataTable(id='canvaas-table',
              style_cell={'textAlign': 'left'},
              columns=[{"name": i, "id": i} for i in columns])        
        ])

@app.callback(Output('canvaas-table', 'data'),
              Input('canvaas-color', 'json_data'))

def update_data(string):
    if string:
        data = json.loads(string)
    else:
        raise PreventUpdate
    return data['objects']


if __name__ == '__main__':
    app.run_server(mode="inline", port=3000)

    
    
# Run app and display result inline in the notebook
0 Answers
Related