Dynamic table created without id

Dash Python
1

Chris, hi,
thank you so much for your package, a real game changer!
i am using it to create entire portal with dynamic pages. however, there is an issue with the data tables (based on the table experiments 0.5.3). When you create a new data table dynamically then the id property is not assigned to the new component. thus no callbacks can be attached to that newly created component. a side issue is that unless there is a table in the original page then dash-table-experiments javascript bundle is not included into page. this one can be worked around by adding a dummy hidden table in the original page layout. here is example of the issue i am describing based on your generate_callbacks example from the dash-recipy. Once you

thanks a lot!

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

import json

app = dash.Dash(__name__)
app.scripts.config.serve_locally = True

app.config['suppress_callback_exceptions'] = True
app.layout = html.Div([
    html.Button(
        id='display-content',
        children='Display Content',
        n_clicks=0
    ),
    html.Div(id='container'),
    dcc.RadioItems(),
    html.Div([
        dt.DataTable(rows=[{'Loading': ''}], id='dummy_table'),
        dcc.Input(id='dummy_input', value='')
    ], id='hidden-table', style={'display': 'none'})
])


@app.callback(
    Output('container', 'children'),
    [Input('display-content', 'n_clicks')])
def display_output(n_clicks):
    print('display_output ' + str(n_clicks))
    if n_clicks == 0:
        return ''
    return html.Div([
        html.Div([
            dcc.Input(
                value='Input {}'.format(i),
                id='input-{}'.format(i)
            )
            for i in range(10)
        ]),
        dt.DataTable(
            rows=[{'Loading': ''}],
            id='new-table'),
        html.Div(id='dynamic-output')
    ])


@app.callback(
    Output('dynamic-output', 'children'),
    [Input('input-{}'.format(i), 'value') for i in range(10)])
def dynamic_output(*args):
    print('update_children ')
    return json.dumps(args, indent=2)


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

Hm, I’m not sure what you mean here. I’ve added a callback to your example code that targets the dynamically generated table id (new-table) and it works for me:

@app.callback(
    Output('new-table', 'rows'),
    [Input('input-{}'.format(i), 'value') for i in range(10)])
def dynamic_output(*args):
    return [{'data': i, 'value': a} for (i, a) in enumerate(args)]

dash-dynamic-table-created-without-id
dash-dynamic-table-created-without-id1263×649 169 KB

Could you elaborate on what isn’t working for you?

3

it does work, thanks! looks like i must have an issue somewhere else…

1 Like
4

like [Input(‘input-{}’.format(i), ‘value’) for i in range(10)])
if range(10) is determined by another callback，how to achieve it？