Display tables in Dash

[pratikmondkar]

@sud Please see this comment from @filmcup86 for the actual code

[HansG]

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

[filmcup86]

@sud
This simple code.

import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_table_experiments as dt
import json
import pandas as pd

print(dcc.__version__) # 0.6.0 or above is required

app = dash.Dash()

DF_SIMPLE = pd.DataFrame({
    'x': ['A', 'B', 'C', 'D', 'E', 'F'],
    'y': [4, 3, 1, 2, 3, 6],
    'z': ['a', 'b', 'c', 'a', 'b', 'c']
})


# Since we're adding callbacks to elements that don't exist in the app.layout,
# Dash will raise an exception to warn us that we might be
# doing something wrong.
# In this case, we're adding the elements through a callback, so we can ignore
# the exception.
app.config.supress_callback_exceptions = True
app.scripts.config.serve_locally = True

app.layout = html.Div([
    dcc.Location(id='url', refresh=False),
    html.Div(id='page-content'),
    html.Div(dt.DataTable(rows=[{}]), style={'display': 'none'})
])


index_page = html.Div([
    html.H1('Page Home'),
    html.Br(),
    dcc.Link('Go to Home', href='/'),
    html.Br(),
    dcc.Link('Go to Page 1', href='/page-1'),
])

page_1_layout = html.Div([
    html.H1('Page 1'),
    html.Br(),
    dcc.Link('Go back to home', href='/'),
    
    html.H4('Editable DataTable'),
    dt.DataTable(
        rows=DF_SIMPLE.to_dict('records'),

        # optional - sets the order of columns
        columns=sorted(DF_SIMPLE.columns),

        editable=True,

        id='editable-table'
    ),
    html.Div([
        html.Pre(id='output', className="two columns"),
        html.Div(
            dcc.Graph(
                id='graph',
                style={
                    'overflow-x': 'wordwrap'
                }
            ),
            className="ten columns"
        )
    ], className="row"),

])
            
@app.callback(
    dash.dependencies.Output('output', 'children'),
    [dash.dependencies.Input('editable-table', 'rows')])
def update_selected_row_indices(rows):
    return json.dumps(rows, indent=2)


@app.callback(
    dash.dependencies.Output('graph', 'figure'),
    [dash.dependencies.Input('editable-table', 'rows')])
def update_figure(rows):
    dff = pd.DataFrame(rows)
    return {
        'data': [{
            'x': dff['x'],
            'y': dff['y'],
        }],
        'layout': {
            'margin': {'l': 10, 'r': 0, 't': 10, 'b': 20}
        }
    }

# Update the index
@app.callback(dash.dependencies.Output('page-content', 'children'),
              [dash.dependencies.Input('url', 'pathname')])
def display_page(pathname):
    if pathname == '/page-1':
        return page_1_layout
    else:
        return index_page
    # You could also return a 404 "URL not found" page here

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

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

[sud]

Hi guys!

Thank-you so much for response! I think my issue was different and maybe some other people have it as well. Issues are:

1. in \dash-table-experiments-master\dash_table_experiments_init_.py, the bold link is not accessing bundle.js or bundle.js.map

_js_dist = [
{
“relative_package_path”: “bundle.js”,
“external_url”: (
"https://unpkg.com/dash-table-experiments@{}"
"/dash_table_experiments/bundle.js"
).format(version),
“namespace”: “dash_table_experiments”
}
]
so I went to https://unpkg.com/dash-table-experiments/ and manually downloaded all the files in “https://unpkg.com/dash-table-experiments@0.5.0/dash_table_experiments/” and put them in “\dash-table-experiments-master\dash_table_experiments” folder

2. Then I ran “python setup.py install”. This spits out correct folder “dash_table_experiments.egg-info”
3. Then I ran the file with “python usage.py” and it loaded in the browser without any issues.

So I guess the issue that needs addressing is missing index file in https://unpkg.com/dash-table-experiments.

I appreciate everyone’s comments and response here!

Thanks,
Sud

[julien]

Hi!
I tried to split the app I’m working on into 2 pages using the URL support and it seems that the tables break down the app.
Did someone notice that before?
Below a code example :

import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_table_experiments as dtable
import pandas as pd
print(dcc.version) # 0.6.0 or above is required
app = dash.Dash()
app.config.supress_callback_exceptions = True
app.layout = html.Div([
dcc.Location(id=‘url’, refresh=False),
html.Div(id=‘page-content’)
])
index_page = html.Div([
dcc.Link(‘Go to Page 1’, href=‘/page-1’),
html.Br(),
dcc.Link(‘Go to Page 2’, href=‘/page-2’),
])
page_1_layout = html.Div([
html.H1(‘Page 1’),
dcc.Dropdown(
id=‘page-1-dropdown’,
options=[{‘label’: i, ‘value’: i} for i in [‘LA’, ‘NYC’, ‘MTL’]],
value=‘LA’
),
html.Div(id=‘page-1-content’),
html.Br(),
dcc.Link(‘Go to Page 2’, href=‘/page-2’),
html.Br(),
dcc.Link(‘Go back to home’, href=‘/’),
])
@app.callback(dash.dependencies.Output(‘page-1-content’, ‘children’),
[dash.dependencies.Input(‘page-1-dropdown’, ‘value’)])
def page_1_dropdown(value):
return ‘You have selected “{}”’.format(value)
page_2_layout = html.Div([
html.H1(‘Page 2’),
dcc.RadioItems(
id=‘page-2-radios’,
options=[{‘label’: i, ‘value’: i} for i in [‘Orange’, ‘Blue’, ‘Red’]],
value=‘Orange’
),
dtable.DataTable(
rows=pd.DataFrame({‘a’:[1, 2], ‘b’:[3,4]}).to_dict(‘records’),
id=‘table’),
html.Div(id=‘page-2-content’),
html.Br(),
dcc.Link(‘Go to Page 1’, href=‘/page-1’),
html.Br(),
dcc.Link(‘Go back to home’, href=‘/’)
])
@app.callback(dash.dependencies.Output(‘page-2-content’, ‘children’),
[dash.dependencies.Input(‘page-2-radios’, ‘value’)])
def page_2_radios(value):
return ‘You have selected “{}”’.format(value)
@app.callback(dash.dependencies.Output(‘page-content’, ‘children’),
[dash.dependencies.Input(‘url’, ‘pathname’)])
def display_page(pathname):
if pathname == ‘/page-1’:
return page_1_layout
elif pathname == ‘/page-2’:
return page_2_layout
else:
return index_page
# You could also return a 404 “URL not found” page here
app.css.append_css({
‘external_url’: ‘https://codepen.io/chriddyp/pen/bWLwgP.css’
})
if name == ‘main’:
app.run_server(debug=True)

Thanks!

[roman]

@julien

app.layout = html.Div([

dcc.Location(id=‘url’, refresh=False),

html.Div(id=‘page-content’)

])

add empty hidden table here. something like
html.Div(dt.DataTable(rows=[{}]), style={'display': 'none'})
After that dash will be able to render other tables.

[julien]

Hi Roman,
Tanks for the trick! It worked perfectly.
Julien

[irisp]

If you are working with JSON I would recommend to check out this tool. https://jsonformatter.org