✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
⚡️ Concerned about the grid? Kyle Baranko teaches how to predicting peak loads using XGBoost. Register for the August webinar!

Setting DataTable max-height when using fixed headers

I’m using the DataTable component and setting the headers to be fixed using the following param as described in the docs:

fixed_rows={"headers": True, "data": 0}

This causes the max-height of the table to be hard-coded to 500px due to the following CSS:

.dash-spreadsheet.dash-freeze-top, .dash-spreadsheet.dash-virtualized {
    max-height: 500px;
}

I’ve tried using setting the max-height option with the style_table param, but that has no effect. Is there any way I can provide a custom value for the max height when using a fixed header?

3 Likes

Hi, I’m facing the same issue. Has anyone found a workaround/fix yet?

1 Like

Hi I fixed this in datatable by setting:
css=[{“selector”: “table”, “rule”: “width: 100%;”},{“selector”: “.dash-spreadsheet.dash-freeze-top, .dash-spreadsheet .dash-virtualized”, “rule”: “max-height: 1000px;”}]

3 Likes

Thanks, that works for me!

This Code solved my issue and the header also was not going up with scroll window.
style_header=
{
‘fontWeight’: ‘bold’,
‘border’: ‘thin lightgrey solid’,
‘backgroundColor’: ‘rgb(100, 100, 100)’,
‘color’: ‘white’
},
style_cell={
‘fontFamily’: ‘Open Sans’,
‘textAlign’: ‘left’,
‘width’: ‘150px’,
‘minWidth’: ‘180px’,
‘maxWidth’: ‘180px’,
‘whiteSpace’: ‘no-wrap’,
‘overflow’: ‘hidden’,
‘textOverflow’: ‘ellipsis’,
‘backgroundColor’: ‘Rgb(230,230,250)’
},
style_data_conditional=[
{
‘if’: {‘row_index’: ‘odd’},
‘backgroundColor’: ‘rgb(248, 248, 248)’
},
{
‘if’: {‘column_id’: ‘country’},
‘backgroundColor’: ‘rgb(255, 255, 255)’,
‘color’: ‘black’,
‘fontWeight’: ‘bold’,
‘textAlign’: ‘center’
}
],
fixed_rows={‘headers’: True, ‘data’: 0}

Just discovered that setting both height and max-height (with the same value) via the style_table seems to do the trick:

style_table={"height": "90vh", "maxHeight": "90vh"}
3 Likes

Thanks nedned.
Works great for me!!
How did you figure that out??

I got mine to work using @Om1234Nayak 's answer. To summarize: I added the fixed_rows{} property.

dash_table.DataTable(            
            columns = [],
            data=data,
            fixed_rows={
                'headers': True, 
                'data': 0
            },
        )