Skip to content
This repository was archived by the owner on Jun 22, 2019. It is now read-only.

Cannot dynamically create tables #28

Closed
mewais opened this issue Dec 13, 2017 · 8 comments
Closed

Cannot dynamically create tables #28

mewais opened this issue Dec 13, 2017 · 8 comments

Comments

@mewais
Copy link

mewais commented Dec 13, 2017

Hello,

Tables are great, they work fine when used in a layout directly, something like this is OK:

app.layout = html.Div([
    html.Div(id='div1'),
    html.Div(id='div2'),
    html.Div(id='div3',children=[dt.DataTable(id='users table', rows=[{}], columns=['', 'col1', 'col2', 'col3', 'col4', 'col5'], filterable=True, sortable=True)])
])

But if you have a function create the table dynamically and assign it to the layout, tables do not even show up. This is needed for cases where you change the page content dynamically based on other inputs, for example If you decide whether to make a table or plot some figure based on a button, or if you want to have tables inside a tab body or so you'd have to do something like this:

app.layout = html.Div([
    html.Div(id='div1'),
    html.Div(id='div2'),
    html.Div(id='div3')
])

@app.callback(Output(div3', 'children'),
            [Input('dropdown1', 'value')])
def display_table(dropdown1_value):
    return dt.DataTable(id='users table', rows=[{}], columns=['', 'col1', 'col2', 'col3', 'col4', 'col5'], filterable=True, sortable=True)

This doesn't work, The table doesn't show up at all, and no error messages are printed.

@chriddyp
Copy link
Member

@mewais - did you post the question here? https://community.plot.ly/t/data-tables-with-multi-pages/7282/3

@chriddyp
Copy link
Member

Also, does it work if the DataTable has non-empty rows?

@chriddyp
Copy link
Member

Also, this example works for me:

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

app = dash.Dash()
app.config['suppress_callback_exceptions'] = True
app.layout = html.Div([
    html.Button(id='button', n_clicks=0, children='Show table'),
    html.Div(id='content'),
    html.Div(DataTable(rows=[{}]), style={'display': 'none'})
])


@app.callback(Output('content', 'children'), [Input('button', 'n_clicks')])
def display_output(n_clicks):
    if n_clicks > 0:
        return html.Div([
            html.Div(id='datatable-output'),
            DataTable(
                id='datatable',
                rows=[{'Column 1': i} for i in range(5)]
            )
        ])


@app.callback(
    Output('datatable-output', 'children'),
    [Input('datatable', 'rows')])
def update_output(rows):
    return html.Pre(
        json.dumps(rows, indent=2)
    )


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

image

(Taken from this thread in the community forum: https://community.plot.ly/t/dash-datatable-updating-the-number-of-rows/6448/2?u=chriddyp)

@mewais
Copy link
Author

mewais commented Dec 14, 2017

Hey Chris, no that's not me I did not post the question.

I just tried the example you posted here, It works! however, this line: html.Div(id='content') seemed useless to me so I tried removing it, all I could see was the button but the table didn't show up!

I tried adding this seemingly useless line to my code and it also did work, the tables now shows up fine.

So, my problem is now solved, but what is happening exactly? why does it work with this line? or why does it not work without it?!

@chriddyp
Copy link
Member

html.Div(id='content') seemed useless to me so I tried removing it

Did you see the callback below?


@app.callback(Output('content', 'children'), [Input('button', 'n_clicks')])
def display_output(n_clicks):
    if n_clicks > 0:
        return html.Div([
            html.Div(id='datatable-output'),
            DataTable(
                id='datatable',
                rows=[{'Column 1': i} for i in range(5)]
            )
        ])

That callback is populating the children property of the component with the id content, in this case html.Div(id='content').

For more about how callbacks work, read through the first section of the user guide: https://plot.ly/dash/getting-started-part-2

@mewais
Copy link
Author

mewais commented Dec 14, 2017

Sorry, I meant to copy the line below it, which is truely useless as it's a hidden table with empty rows.

html.Div(DataTable(rows=[{}]), style={'display': 'none'})

@chriddyp
Copy link
Member

chriddyp commented Dec 14, 2017

html.Div(DataTable(rows=[{}]), style={'display': 'none'})

see the comment in the community forum here: https://community.plot.ly/t/display-tables-in-dash/4707/40?u=chriddyp (similarly #19 )

@mewais
Copy link
Author

mewais commented Dec 14, 2017

Thanks

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants