DataTable fixed_rows column size resizing back and forth on data load

[jayamuruganaws]

Thank you so much for helping improve the quality of Dash!

We do our best to catch bugs during the release process, but we rely on your help to find the ones that slip through.

Describe your context I am currently using Dash datatable for my use case and I am using fixed_rows to fix the header. After setting it, when I refresh the page, the column size resizing to 0 and once the df data (table data) loaded it comes back to original table state. This is bit annoying and user experience is impacted. Also if I apply some filter (native) and if no data matched the column width size is reducing to 0.

• replace the result of pip list | grep dash below

  dash                      2.0.0
  dash-bootstrap-components 1.0.2
  dash-core-components      2.0.0
  dash-html-components      2.0.0
  dash-table                5.0.0

• if frontend related, tell us your Browser, Version and OS

  If no data to show in table or during refresh of webpage or filter the column, then the width is automatically changing to 0 size

Describe the bug

I am currently using Dash datatable for my use case and I am using fixed_rows to fix the header. dash-table 5.0.0 After setting it, when I refresh the page, the column size resizing to 0 and once the df data (table data) loaded it comes back to original table state. This is bit annoying and user experience is impacted. Also if I apply some filter (native) and if no data matched the column width size is reducing to 0.

A clear and concise description of what you expected to happen.

If applicable, add screenshots or screen recording to help explain your problem.

Below is my code used: dbc.Row([ dbc.Col( dt.DataTable( id='weekly_table_output', columns=[{"name": colname, "id": colname} for colname in DEFAULT_COLUMNS],

columns = form_list_cols(df.columns),

    filter_action="native",
    sort_action="native",
    sort_mode="multi",
    page_action="native",
    page_current= 0,
    page_size= 75,
    tooltip_header={header: header for header in DEFAULT_COLUMNS},
    tooltip_duration=None,
    fixed_rows={ 'headers': True, 'data': 0},
    fixed_columns={'headers': True, 'data': 2},
    style_table={
        'minHeight': '70vh', 'height': '70vh', 'maxHeight': '70vh',
        'minWidth': '100%',
    },
    style_cell={
        'minWidth': '130px', 'width': '130px', 'maxWidth': '130px',
        'textAlign': 'left',
        'fontSize':12,
        'font-family': 'sans-serif',
        'padding': '5px',
        'overflow': 'hidden',
        'textOverflow': 'ellipsis',
    },
    style_data={
        'maxWidth': 0,
        'color': 'black',
        'backgroundColor': 'white',
        'border': '1px solid black'
    },
    style_header={
        'backgroundColor': '#90EE90',
        'color': 'black',
        # 'fontWeight': 'bold',
        'fontSize':14,
        'border': '1px solid black',
    },
    css=[{
        'selector': '.dash-table-tooltip',
        'rule': 'background-color: black; font-family: sans-serif; color: white; fontSize: 13'
    }]
), 
width={"size": 11, "offset": 0}),

]),

[ned2]

Can confirm this issue. It looks like it's caused by fixed_rows being set. I've set my row widths explicitly using style_cell_conditional however when the rows are fixed, it looks like the th elements in the header are not respecting this fixed width and are being dynamically set to 0 when there's no data in the table.

Edit: I may have spoken to soon. Looks like it's the combination of fixed_rows and fixed_columns together that's triggering it for me. If I disable either one of those params, leaving the other enabled, the column widths behave sensibly. However, it's still probably not as simple as that. While trying to create a minimal example, I discovered that I could get the two params to behave nicely in a simple DataTable, however I discovered that adding row_editable=True then triggers this behaviour. It seems like there may be a few interacting things playing together here.

[davidfooshee-blai]

Having the same issue. Any time filtering the DataTable returns zero rows, the header th width, max-width, and min-width are automatically set to 0. If I don't have fixed_rows turned on to keep headers present, then a DataTable with zero rows after filtering just disappears completely.

Has anyone found a resolution for this? @jayamuruganaws @ned2 @chriddyp

[kamaru510]

Found a workaround on this. It is also not perfect in terms of rendering cause the table data getting scrolled behind the <th> elements but for me better than the build-in option.

Do not set the build-in attribute to the DataTable object: dash_table.DataTable(fixed_rows={'headers': True, 'data': 0}) Set the css via: dash_table.DataTable(style_header={'position': 'sticky', 'top': 0})

[aeltanawy]

As a workaround, I found forcing the header style in CSS to be a solution. That however gets rid of the horizontal scroll bar if the table is set to overflow.

.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner .dash-header {
  min-width: 300px !important;
  width: 300px !important;
  max-width: 300px !important;
}