Dash Table not showing

Question

I have the following code

import dash
import dash_bootstrap_components as dbc
from dash import dcc
from dash import html
from dash import dash_table
from dash_bootstrap_templates import load_figure_template
import pandas as pd 


df = pd.read_csv("https://docs.google.com/spreadsheets/d/e/2PACX-1vSlasVmsQglAUGhesSL9_bJHaZ4rsbNG0m2U5nTFj25LyBdylAPiRvt2eDIVjfFQ7yI_ElWDus-qx2b/pub?gid=1999881373&single=true&output=csv")

df_warning = df[df[("Tipificação Incidente ")].eq("WARNING")]
table_df = df_warning[["TIME","Concorrente","Descrição"]]

print(table_df)

warning_table = dash_table.DataTable(
    id='table',
    columns=[{"name": i, "id": i} for i in table_df.columns],
    data=table_df.to_dict('records'),
    # Define table styling 
    fixed_rows={'headers': True},
    style_table={'height': 400},  

    # Condition resizing of columns 
    style_cell_conditional=[
        {'if': {'column_id': 'name'},
         'width': '10%'},
         {'if': {'column_id': 'opstatus'},
         'width': '15%'},
        {'if': {'column_id': 'stage'},
         'width': '10%'},
    ],
    # Define overall styling for the table
    style_as_list_view=True,
     style_header={'backgroundColor': 'rgb(30, 30, 30)'},
    style_cell={
        'backgroundColor': 'rgb(50, 50, 50)',
        'color': 'white',
        'fontSize':16, 'font-family':'Open Sans',
    },
)

new_table = dbc.Table.from_dataframe(table_df, striped=True, bordered=True, hover=True,id="table_new")

app = dash.Dash(__name__, external_stylesheets=[dbc.themes.PULSE],title='Rally de Portugal Vodafone 2021',update_title=None,
                meta_tags=[{'name': 'viewport',
                           'content': 'width=device-width, initial-scale=1.0, maximum-scale=1.2, minimum-scale=0.5,'}]
        )

server = app.server

app.layout = dbc.Container(
    [
    html.H6("CRASHES"),       
    dbc.Row(
            [
            dbc.Col(html.H6("CHECK 4"),lg=4),
            dbc.Col(dbc.Table.from_dataframe(table_df, striped=True, bordered=True, hover=True,id='warnings_tb')),
            dbc.Col(id='table',lg=4),
            ],
        ),


    ],

    fluid=True,
)


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

However when I run the app only one table shows up, and that is the one generated by

dbc.Col(dbc.Table.from_dataframe(table_df, striped=True, bordered=True, hover=True,id='warnings_tb')),

I don't know what I'm doing wrong that the dbc.Col(id='table',lg=4), doesn't return the table that is defined as warning_table and with id=table

Any help with this would be appreciated. Thank you in advance!

Disclaimer: This code will be used in a Open Source project for an NGO.

coralvanda · Answer 1 · 2021-12-12T21:55:42.140

0

You haven't added thje warning_table to your layout. This should fix it:

app.layout = dbc.Container(
    [
    html.H6("CRASHES"),       
    dbc.Row(
            [
            dbc.Col(html.H6("CHECK 4"),lg=4),
            dbc.Col(dbc.Table.from_dataframe(table_df, striped=True, bordered=True, hover=True,id='warnings_tb')),
            dbc.Col(id='some-id',lg=4),  # edit on this line to change ID
            ],
        ),
    warning_table,

    ],

    fluid=True,
)

edited Dec 12 '21 at 21:55

answered Dec 12 '21 at 17:38

coralvanda

6,431
2
15
25

That is my issue, has by including the warning_table id "table" I would expect that the table would render, as I define it earlier in the code. – Jorge Gomes Dec 12 '21 at 17:54
I see what you mean. Each ID has to be unique in the layout, and giving something an ID value is not how the component is included in the layout. You need to have the variable that holds the component in the layout, or define it in the layout directly. Try the code I've edited to see if it works. – coralvanda Dec 12 '21 at 21:56

Dash Table not showing

1 Answers1