Black Lives Matter. Please consider donating to Black Girls Code today.

DataTable Not Updating on Callback

Hi,

I am having issues populating a DataTable. Essentially, I am looking to create a DataTable by querying a database according to some set of user defined constraints.

The code below successfully uses slidera to define the user constraints and returns a dataframe to the callback function in question (def update_table), however it doesn’t seem to be populating the DataTable.

What am I missing? Apologies that the example is not more reproducible…

import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State
import dash
import appDataManager
import dash_table_experiments as dt

app = dash.Dash()

ratingsDict = {
2: 'AAA',
3: 'AA+',
4: 'AA',
5: 'AA-',
6: 'A+',
7: 'A',
8: 'A-',
9: 'BBB+',
10: 'BBB',
11: 'BBB-',
12: 'BB+',
13: 'BB',
14: 'BB-',
15: 'B+',
16: 'B',
17: 'B-',
18: 'CCC+',
19: 'CCC',
20: 'CCC-',
21: 'CC',
22: 'C',
23: 'D',
24: 'NR'}
conversionDict = {
2: 24,
3: 23,
4: 22,
5: 21,
6: 20,
7: 19,
8: 18,
9: 17,
10: 16,
11: 15,
12: 14,
13: 13,
14: 12,
15: 11,
16: 10,
17: 9,
18: 8,
19: 7,
20: 6,
21: 5,
22: 4,
23: 3,
24: 2}

path = 'somepath'

appDM = appDataManager.appDataManager()
appDM.initialize(path)

app.layout = html.Div([

html.Div([
    dcc.RangeSlider(
        id='slider-dur',
        min=0,
        max=30,
        marks={val: str(val) for val in range(0, 31)},
        value=[]
    )
]),
html.Div([
    dcc.RangeSlider(
        id='slider-ratings',
        min=2,
        max=24,
        marks=ratingsDict,
        value=[]
    )
]),
html.Div([
    html.Button(id='button-update', n_clicks=0, children='Update')
]),

dt.DataTable(
    rows=[{}],  # initialise the rows
    row_selectable=True,
    filterable=True,
    sortable=True,
    selected_row_indices=[],
    id='table'
),

html.Div(id='constraints-data', style={'display': 'none'})

], className='app-wide')

@app.callback(
    Output('constraints-data', 'children'),
    [Input('slider-dur', 'value'),
     Input('slider-ratings', 'value')])
def update_constraints(durList, ratingsList):
    d = {'dur_min': durList[0], 
           'dur_max': durList[1], 
           'rating_min': ratingsList[0], 
           'rating_max': ratingsList[1]}
    return d


@app.callback(
    Output('table', 'rows'),
    [Input('button-update', 'n_clicks')],
    [State('constraints-data', 'children')])
def update_table(clicks, d):
    df = appDM.main(d)
    df = df.to_dict('records')
    return df


app.css.append_css({
'external_url': 'https://codepen.io/chriddyp/pen/bWLwgP.css'
})


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

did you try using the button as an event as opposed to an input?