Dynamic Dash Datatable Height

Dash Python
1

Hey Dash Community,

is it possible to let a Dash Datatable fill out the available space in a container?
I tried using the following CSS parameters

display: flex;
flex-flow: column;
flex: 1 1 auto;

as well as unsetting the default height of the Dash Datatable. However, this leads to displaying all rows in the Datatable at once, without any scrolling available.
The goal is to have a scrollable DataTable but no scrollbar on the page itself.

2

Example Code:

from pandas import DataFrame
from dash import Dash
import dash_html_components as html
import dash_bootstrap_components as dbc
import dash_table

df = DataFrame({"Datum": [i for i in range(100)],
                "Value": [i for i in range(100)]})

app = Dash(__name__,  external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = html.Div(
    dash_table.DataTable(
        id="example-table",
        row_selectable="single",
        cell_selectable=False,
        fixed_rows={"headers": True, "data": 0},
        columns=[{"name": "Datum", "id": "Datum"},
                 {"name": "Value", "id": "Value"}],
        data=df.to_dict("records")
    ),
    style={"height": "100vh",
           "width": "100vw",
           "overflow": "hidden",
           "display": "flex",
           "flex-flow": "column"}
)


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

CSS:

.dash-table-container .row {
    margin: 0;
}
.dash-spreadsheet.dash-freeze-top, .dash-spreadsheet.dash-virtualized {
    max-height: unset !important;
}
3

where can i find the documentation that shows all of these dashes datatable specific css?

.dash-table-container .row {
margin: 0;
}
.dash-spreadsheet.dash-freeze-top, .dash-spreadsheet.dash-virtualized {
max-height: unset !important;
}