Dash Bootstrap Table: Overflow scroll

Dash Python
1

Hi all – Using the dash_bootstrap_components lib, I can’t seem to get the dbc.Table.from_dataframe() component to have a fixed height with scroll inside of a dbc.Card(). Anyone have examples? I imagine I need to set some CSS properties but haven’t found the right solution yet.

2

You can use AntdTable in my open source components library feffery-antd-components ( feffery-antd-components在线文档 ) , with the maxHeight parameter.

image
image1292×465 12.9 KB

3

Following this answer on StackOverflow, the best thing to do is probably just wrap the table in a html.Div and set height and scroll on the div.

Here’s an example.

import dash_bootstrap_components as dbc
from dash import Dash, html
from pandas.util.testing import makeDataFrame

df = makeDataFrame()

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

app.layout = dbc.Container(
    dbc.Card(
        html.Div(
            dbc.Table.from_dataframe(df),
            style={"maxHeight": "200px", "overflow": "scroll"},
        ),
        body=True,
    ),
    className="p-5",
)

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

Thanks! That worked.