Problem with Table width

Dash Python
1

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:

Fullscreen
Fullscreen1186×1045 43.7 KB

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

shortscreen
shortscreen1186×1045 42.9 KB

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 !!!

2

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.

3

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
4

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