Disappearing DataTable with fixed_rows

Very similar to Datatable disappears with filtering and virtualization (and relatedly [BUG] Can not read properties of undefined ... · Issue #2209 · plotly/dash · GitHub) but without virtualization.

from dash import Dash, dash_table
import pandas as pd

app = Dash(__name__)

df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/solar.csv')
app.layout = dash_table.DataTable(
    data=df.to_dict('records'),
    columns=[{"name": i, "id": i} for i in df.columns],
    virtualization=False,
    fixed_rows={'headers': True},
    filter_action='native',
    page_action='native',
    page_size=10,
    style_cell={
        'border': 'none',
         'padding':'0px',
        'width':'100px',
    },
    fill_width=False,

)


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

Put in a filter value that will filter out all rows. The table disappears.

Changing border, padding or cell_width doesn’t make it disappear completely, but still collapses it into something unusable.

Hello @chubukov

fixed_rows={'headers': True}

Will also cause issues with dropdowns that are inside of the table, if there arent enough rows to expand the full length of the dropdown.

What I do is have this inside of my “header.css” file in the assets folder and remove the fixed_rows prop:

#filters table tr th {
        position: sticky;
        top: -1px;
        z-index: 900;
    }

Where “filters” is the id of the table that I wanted to fix the headers. The z-index is so that you dont get an issue when scrolling down, you can adjust that to better fit your needs as well.

1 Like

Thanks for the tip @jinnyzor!

I realize now that once I am forced to move from virtualization to pagination anyway, having fixed_rows is not super important.

Nasty bug still.

V