Unable to update data table on callback

Hi, am new to Dash and having the below issue with updating data table thru callback. Any help is appreciated!

My code as follows:

import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_table
import dash_bootstrap_components as dbc
import pandas as pd
import plotly.express as px
from collections import OrderedDict

from data import dpTab1Query
from app import app

df = dpTab1Query.getData()

fig = px.bar(df, x="CITY_COUNTRY", y="FTE", color="COMMERCIAL_STATUS")

tab1_content = dbc.Card(
    dbc.CardBody(
        [
            dcc.Graph(
                id='location-graph',
                figure=fig
            ),
            html.Div(
                id='city-table'
                
            )
        ],
        className='card-body'
    )
)


@app.callback(
    dash.dependencies.Output('city-table', 'children'),
    dash.dependencies.Input('location-graph', 'clickData')
)
def display_click_data(clickData):
    if clickData:
        print(clickData)
        city = clickData['points'][0]['label']

        city_df = dpTab1Query.getGranularData(city)

        table = dash_table.DataTable(
            id='city-table',
            columns=[{'name': i, 'id': i} for i in city_df.columns],
            data=city_df.to_dict('records'),
            style_cell={'textAlign': 'left'},
            filter_action="native",
            editable=True
        )
        return table
    else:
        return None

The table appears on click but doesn’t update when i click on other bars.

1 post - 1 participant

Read full topic