Unable to update data table on callback

Dash Python
1

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.

2

It’s likely that your filtering logic based on the bar clicked isn’t quite performing the filtering correctly. Have you tried to print out the city_df in the callback to check and confirm?