Plotly Dash - callback dash table on python doesnt trigger

Question

I have an app with multiple pages, controlled from this index, in a new page I want to insert a dash table and assign some interactivity using callbacks. Take a basic dash table example (https://dash.plotly.com/datatable) and insert it into my app, but the callback doesn't get executed. The only thing that changes when inserting into my app, is the way I create the app.layout, which is created from a function. The table is created but the callback doesn't trigger.

Index.py

import dash
from dash import dcc, html
from dash.dependencies import Input, Output
import dash_bootstrap_components as dbc
from homepage import Homepage
from resumen_comunal import Resumen_Comunal
from dash_main_table import main_Table

app = dash.Dash(__name__, external_stylesheets=[dbc.themes.FLATLY])

app.config.suppress_callback_exceptions = True

app.layout = html.Div([
    dcc.Location(id = 'url', refresh = False),
    html.Div(id = 'page-content')
])


@app.callback(dash.dependencies.Output('page-content', 'children'),
            [dash.dependencies.Input('url', 'pathname')])
def display_page(pathname):
    if pathname == '/Cobertura_CV':
        return Resumen_Comunal()
    if pathname == '/Gestion_CV':
        return main_Table()
    else:
        return Homepage()


if __name__ == '__main__':
    app.run_server(debug=False)

dash_table.py

import dash
from dash import Dash, dash_table, dcc, html
from dash.dependencies import Input, Output
import pandas as pd
import dash_bootstrap_components as dbc
from navbar import Navbar

nav = Navbar()

app = dash.Dash(__name__, external_stylesheets = [dbc.themes.FLATLY])

df = pd.read_csv('https://git.io/Juf1t')

body = dbc.Container([
    dbc.Label('Click a cell in the table:'),
    dash_table.DataTable(df.to_dict('records'),[{"name": i, "id": i} for i in df.columns], id='tbl'),
    dbc.Alert(id='tbl_out'),
])

@app.callback(Output('tbl_out', 'children'), 
                Input('tbl', 'active_cell'))
def update_graphs(active_cell):
    return str(active_cell) if active_cell else "Click the table"


def main_Table():
    layout = html.Div([
        nav,
        body
    ])
    return layout


if __name__ == "__main__":
    app.run_server(debug=True)

Thanks for your help!

Answer 1

So, the callback is not triggered because you’re trying to populate the dash table in a separate application while the callback for the same is created inside a different application.
You don't have to create a new app object given that it's already created in index.py and the layout is passed to that same app object
Here's what you should do inside dash_table.py

import dash
from dash import Dash, dash_table, dcc, html,callback
from dash.dependencies import Input, Output
import pandas as pd
import dash_bootstrap_components as dbc
from navbar import Navbar

nav = Navbar()

df = pd.read_csv('https://git.io/Juf1t')

body = dbc.Container([
    dbc.Label('Click a cell in the table:'),
    dash_table.DataTable(df.to_dict('records'),[{"name": i, "id": i} for i in df.columns], id='tbl'),
    dbc.Alert(id='tbl_out'),
])

@callback(Output('tbl_out', 'children'), 
                Input('tbl', 'active_cell'))
def update_graphs(active_cell):
    print(active_cell)
    return str(active_cell) if active_cell else "Click the table"


def main_Table():
    layout = html.Div([
        nav,
        body
    ])
    return layout