Bring Drag & Drop to Dash with Dashboard Engine. 💫 Learn how at our next 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:

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
        fixed_rows={'headers': True}

app = dash.Dash(__name__)
app.css.append_css({"external_url": ""})
app.layout = html.Div([

            {'label': i, 'value': i} for i in
            (['all'] + list(df['c'].unique()))],
        style={'width': '80%'}
        dcc.Tab(label='TAB-1', children=[
        dcc.Tab(label='TAB-2', children=[
    ], style={'width': '50%','display': 'inline-block'}),
    ], style={'width': '50%','display': 'inline-block'}),        


def filter_data(value):
    if value == 'all':
        return df
        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__':

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.Tab(label='TAB-1', children=[
        dcc.Tab(label='TAB-2', children=[
    ], 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/ 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:
to this:

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.

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

1 Like