Setting DataTable max-height when using fixed headers

Dash Python
1

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?

4 Likes
2

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

1 Like
3

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
4

Thanks, that works for me!

5

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}

6

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"}
8 Likes
7

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

8

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
            },
        )
9

Hi nedned,
Thank you so much for posting this solution. I’ve been struggling to get this to work for many hours and your solution did the trick!!! Really great! Thanks! :slight_smile:

10

I was a bit fast in my initial reply.
When using: style_table={"height": "100vh", "maxHeight": "100vh"}, it works as expected in JupyterDash:
app = JupyterDash(__name__...)

However, when I use exactly same code in Dash
app = dash.Dash(__name__..)
the datatable with virtualization on gets only halfway the screen and doesn’t use the full height of the browser screen. Any idea where this difference might come from and more importantly, how to make it work in Dash?
For the rest my code is completely the same. Any idea how to get a Dash datatable with virtualization and top rows frozen use the entire height of the window?

11

Took me 4 hours to find this solution. Thank you very much!

1 Like
12

Thanks. This worked for me!

1 Like