✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
⚡️ Concerned about the grid? Kyle Baranko teaches how to predicting peak loads using XGBoost. Register for the August webinar!

Problem with Table width

Hi Dash Community,
I’m using tables inside tabs and I have some visual problems, the tables are much longer than the division when you resize the screen or use a smaller device like an ipad, I am using the last version of Dash.

it shows this with full screen:


And this is how it looks like when I resize the screen:

I think is related with the fixed_rows property but I can’t find a solution.

this is the app: https://companyanalysis.herokuapp.com/

Thanks in advance !!!

Here is a code with a more simple example:

import dash
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
import urllib
import dash_table
from dash.dependencies import Input, Output

df = pd.DataFrame({
    'a': ['New York City','San Francisco', 3, 'Montréal',5,6,7,8,'San Francisco',10,'Montréal',12,'San Francisco',14,15,'San Francisco',17,18,19,20],
    'b': [2, 'Montréal', 5, 'New York City',7,4,'Montréal',6,3,26,35,'San Francisco',10,'Montréal',15,67,12,63,'San Francisco',8],
    'c': ['x', 'x', 'y', 'y', 'x', 'x', 'y', 'y', 'x', 'y', 'x', 'x', 'y', 'y' ,'x', 'x', 'y', 'y', 'x', 'y'],
    'd': [2, 1, 5, 'New York City',7,4,9,6,'Montréal',26,'Montréal',58,'Montréal',22,15,'San Francisco',12,'San Francisco',12,8],
    'e': [2, 'San Francisco', 5, 'New York City',7,4,9,6,3,'San Francisco',35,'Montréal',10,22,15,67,12,'Montréal',12,'San Francisco'],
    'f': [2, 'Montréal', 5, 'San Francisco',7,4,9,6,'San Francisco',26,35,'Montréal',10,22,15,'San Francisco',12,'San Francisco',12,8],
    'g': [2, 1,'Montréal', 'New York City',7,4,9,6,3,'San Francisco',35,58,'San Francisco',22,'Montréal',67,'San Francisco',63,12,8],    
})


def generate_table(dataframe, max_rows=10):
    return dash_table.DataTable(
        # Header
        columns=[{"name": i, "id": i, 'type': 'any'} for i in dataframe.columns],

        # Body
        data=dataframe.to_dict("rows"),
        fixed_rows={'headers': True}
    )


app = dash.Dash(__name__)
app.css.append_css({"external_url": "https://codepen.io/chriddyp/pen/bWLwgP.css"})
app.layout = html.Div([

    html.Label('Filter'),
    dcc.Dropdown(
        id='field-dropdown',
        options=[
            {'label': i, 'value': i} for i in
            (['all'] + list(df['c'].unique()))],
        value='all',
        style={'width': '80%'}
    ),
    html.Div([
    dcc.Tabs([
        dcc.Tab(label='TAB-1', children=[
             html.Table(html.Div(id='table'))]),        
        dcc.Tab(label='TAB-2', children=[
             html.Table(html.Div(id='table1'))]),
        ]),
    ], style={'width': '50%','display': 'inline-block'}),
    html.Div([
    html.Div(id='table2'),
    ], style={'width': '50%','display': 'inline-block'}),        

])


def filter_data(value):
    if value == 'all':
        return df
    else:
        return df[df['c'] == value]


@app.callback([Output('table', 'children'),
               Output('table1', 'children'),
               Output('table2', 'children')],
              [Input('field-dropdown', 'value')])
def update_table(filter_value):
    dff = filter_data(filter_value)
    return generate_table(dff), generate_table(dff), generate_table(dff)



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

I noticed that the problem appears when the table is shown into a Tab and the table have the “fixed_rows={‘headers’: True}” property.
The problem disappears when other tab is clicked or when the page is uploaded.

Hi @Eduardo

Providing the sample code made it possible to see what was going on. Making the following changes fixed the problem when I ran it. Would you let me know if it works for you?

First: I took out the additional html.Table() in the dcc.Tabs. so now it looks like this:

dcc.Tabs([
        dcc.Tab(label='TAB-1', children=[
             html.Div(id='table')]),
        dcc.Tab(label='TAB-2', children=[
             html.Div(id='table1')]),
        ]),
    ], style={'width': '50%','display': 'inline-block'}),

This worked as long as you keep the fixed_rows in your dash DataTable definition:

fixed_rows={'headers': True}

If you don’t use the fixed_rows, then adding this works:

style_table={'overflowX': 'auto'},

And on a completely different topic if you get a run time error like this:

...pandas/core/frame.py:1485: FutureWarning: Using short name for 'orient' is deprecated. Only the options: ('dict', list, 'series', 'split', 'records', 'index') will be used in a future version. Use one of the above to silence this warning.

You can fix it by changing:
data=dataframe.to_dict("rows"),
to this:
data=dataframe.to_dict("records"),

1 Like

You did it :grinning::grinning:
The problem is finally solved :star_struck::star_struck:
Thank you very much, it really makes a difference.
:clinking_glasses::champagne:

El El dom, 11 oct. 2020 a la(s) 12:48, AnnMarieW via Plotly Community Forum <plot@discoursemail.com> escribió:

1 Like