Datatable cutting off last letter of columns headers

[gtg489p]

Bug first appeared for me when I upgraded to dash-table 4.11.1

Notice the last letter of the column headers are being cut off when the header text is longer than the cell contents and sorting is enabled. I think this also only happens when the table has a bunch of columns. Small tables with just a few columns and plenty of horizontal space to stretch out seem to be immune, but when you load up a table with many columns, you see this start to happen.

bug in action:

and without sorting:

Thanks yall are great. Nathan

[mtwichan]

Just want to confirm that I'm also getting the same error as above. I got around it by hardcoding the widths of each of the columns based on the number of characters in the column title.

# custom width for each column as a workaround for this issue: 
long_column_names = [{"if": {"column_id": column}, "min-width": "300px"} for column in df.columns if len(column) >= 30]
med_column_names = [{"if": {"column_id": column}, "min-width": "225px"} for column in df.columns if (len(column) > 15 and len(column)) < 30]
small_column_names = [{"if": {"column_id": column}, "min-width": "100px"} for column in df.columns if len(column) <= 15]

adjusted_columns = long_column_names + med_column_names + small_column_names

# build App
app = Dash(__name__)
app.layout = html.Div(
    children=[
        dash_table.DataTable(
            id="table",
            columns=[{"name": col, "id": col} for col in df.columns],
            data=df.to_dict("records"),
            filter_action="native",
            sort_action="native",
            sort_mode="multi",
            style_cell_conditional=adjusted_columns
        ),
    ]
)

Dependencies:

dash==1.20.0
dash-table==4.11.3
pandas==1.1.5
plotly==4.14.3

[chuktuk]

I have the same issue, and it seems like adding sort_action should not have this problem. I implemented the workaround by @mtwichan, and it is working.

I would be very nice to see column widths expanded automatically when adding sort options.

[ghost]

+1, I am also seeing this issue. In Dash 1.9.x (data-table 4.6.1) this did not happen. As of Dash 1.19+ (data-table 4.11.2) the problem does exist. I'm not sure which release introduced the bug but this makes the column headers unreadable when using sort_action.

[ghost]

It looks like this bug was introduced with dash-table 4.11.x -- installing dash 1.16.3 gets the latest working table 4.10.1. My guess is that this is related to adding the tooltip_header property.

[RunQi-Han]

It seems that with the latest Dash==2.0.0 and dash_table==5.0.0, the issue persists. With the sample code below:

import dash
from dash import html
import pandas as pd
import dash_table

df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/solar.csv')

app = dash.Dash(__name__)

app.layout = html.Div([
    html.Div([
        dash_table.DataTable(
                id='table',
                columns=[{"name": i, "id": i} for i in df.columns],
                data=df.to_dict('records'),
                editable=True,
                filter_action="native",
                sort_action="native",
                sort_mode="multi",
                style_table={'overflowX': 'auto'},
            ),
    ], style={'width': '60%'}),
])

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

The last letter of the column headers are being cut off when the header text is longer than the cell contents. This only happens when the sorting is enabled.

[AnnMarieW]

@RunQi-Han I tried your example, and it looks like this was fixed in Dash 2.1.0 @alexcjohnson I think this issue can be closed.

[RunQi-Han]

@AnnMarieW Thanks so much. I have tested it out and confirm the issue is gone with Dash 2.1.0.

[mnissman]

Hello,

I ran into this issue before and was happy to see it solved in Dash 2.1.0. However, I have noticed the issue comes back if you you use fixed_rows.

dash==2.2.0

import dash
from dash import dash_table
import pandas as pd
from collections import OrderedDict

data = OrderedDict(
    [
        ('Temperature', [1, -20, 3.512, 4, 10423, -441.2]),
        ('Temperature1', [1, -20, 3.512, 4, 10423, -441.2]),
        ('Temperature2', [1, -20, 3.512, 4, 10423, -441.2]),
        ('Temperature3', [1, -20, 3.512, 4, 10423, -441.2]),
        ('Temperature4', [1, -20, 3.512, 4, 10423, -441.2]),
        ('Temperature5', [1, -20, 3.512, 4, 10423, -441.2]),
        ('Temperature6', [1, -20, 3.512, 4, 10423, -441.2]),
        ('Temperature7', [1, -20, 3.512, 4, 10423, -441.2]),
        ('Temperature8', [1, -20, 3.512, 4, 10423, -441.2]),
        ('Temperature9', [1, -20, 3.512, 4, 10423, -441.2]),
        ('Temperature10', [1, -20, 3.512, 4, 10423, -441.2]),
        ('Temperature11', [1, -20, 3.512, 4, 10423, -441.2]),
        ('Temperature12', [1, -20, 3.512, 4, 10423, -441.2]),
        ('Temperature13', [1, -20, 3.512, 4, 10423, -441.2]),
        ('Temperature14', [1, -20, 3.512, 4, 10423, -441.2]),
        ('Temperature15', [1, -20, 3.512, 4, 10423, -441.2]),
    ]
)
df = pd.DataFrame(data)

app = dash.Dash(__name__)

app.layout = dash_table.DataTable(
    data=df.to_dict('records'),
    columns=[{'id': c, 'name': c} for c in df.columns[0:2]] +
        [{'id': c, 'name': c, 'clearable': True, 'renamable': True, 'deletable': True, 'selectable': True,} for c in df.columns[2:]],
    filter_action='native',
    sort_action='native',
    sort_mode='multi',
    column_selectable=False,
    row_selectable='multi',
    fixed_rows={'headers': True}
)

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

Thanks, Max

[chubukov]

I'm running into the same issue (only happens with fixed rows, same as comment above) with dash 2.2.0.

[mnissman]

Thanks @chubukov. Anybody have any updates?

With Appreciation, Max

[DesertLabRat]

I'm having the same issue with Dash 2.7.1. If I use fixed_rows, the header gets cutoff when data in the column is shorter than the header. Is there a work-around besides hardcoding widths?

[brifordwylie]

@DesertLabRat precisely identified the issue. When you use fixed_rows={'headers': True} then it will cut off the Column Headers (when data is smaller than header).

Without fixed_rows={'headers': True}

With fixed_rows={'headers': True}

❯ pip list | grep dash
dash                                              2.8.1
dash-bootstrap-components                         1.4.0
dash-bootstrap-templates                          1.0.8
dash-core-components                              2.0.0
dash-html-components                              2.0.0
dash-table                                        5.0.0