DataTable height with fixed_rows

Dash Python
1

Hi,

It looks like relatively simple thing, but could not figure it out myself.

I have a Dash page, where main component is a DataTable. Key components looks as follows:

app.layout = html.Div([
html.H2(id = ‘header_line’),
dbc.Alert(…
dbc.Alert(…
dbc.Row(…
DataTable(…
html.Div(id = ‘intermediate_forecast_data’, style = {‘display’:‘none’}),
html.Div(id = ‘intermediate_actuals_data’, style = {‘display’:‘none’}),
html.Div(id = ‘artificial_div’, style = {‘display’:‘none’})

As the table can have ~100 rows I wanted to have headers always visible. All is written in official documentation.

This is the relevant part:

app.layout = dash_table.DataTable(
data=df.to_dict(‘records’),
columns=[{‘id’: c, ‘name’: c} for c in df.columns],
fixed_rows={‘headers’: True},
style_table={‘height’: 400} # defaults to 500
)

However, how to make DataTable fill whole page (to the very bottom) so scrolling is within the table and not within whole page (as it would work without fixed headers)? Height option seems not to be working well, plus I cannot specify it as fixed as then it would not properly adjust to different screen sizes.

2

Hi, any ideas how to do that? I sounds to me like a typical problem so hopefully there is a simple way to address it.

3

Do you have any luck in finding the solution for this? I’m trying to figure this out too. I think dbc.Row() has limitation to DataTable’s height …

4

I found the solution from this page here:

Setting DataTable max-height when using fixed headers - Dash Python - Plotly Community Forum

by using this:

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