I am working on dash app. To display a dataframe, I am using datatable component. In the datatable, I also have dropdown inside it.

Issue: The problem comes when selecting the dropdown in the lower portion of the datatable, The dropdown options gets hidden and scrollbar appears.

I tried setting different height values and observed:

1. “auto” (Prefered), In this the distance between the datatable and the pagination is best but dropdown options gets hidden.
2. “400px”, result same as above.
3. “600px”, In this the dropdown options are fully visible but the distance between the datatable and the pagination start to get disproportionate, and on increasing the size distance also increases.

MWE:

from dash import Dash, dash_table, html
import pandas as pd
from collections import OrderedDict

dbc_css = (
    "https://cdn.jsdelivr.net/gh/AnnMarieW/[email protected]/dbc.min.css"
)


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

df = pd.DataFrame(
    OrderedDict(
        [
            (
                "climate",
                [
                    "Sunny",
                    "Snowy",
                    "Sunny",
                    "Rainy",
                    "Sunny",
                    "Snowy",
                    "Sunny",
                    "Rainy",
                    "Sunny",
                    "Snowy",
                    "Sunny",
                    "Rainy",
                ],
            ),
            ("temperature", [13, 43, 50, 30, 13, 43, 50, 30, 13, 43, 50, 30]),
            (
                "city",
                [
                    "NYC",
                    "Montreal",
                    "Miami",
                    "NYC",
                    "NYC",
                    "Montreal",
                    "Miami",
                    "NYC",
                    "NYC",
                    "Montreal",
                    "Miami",
                    "NYC",
                ],
            ),
        ]
    )
)


app.layout = html.Div(
    [
        dash_table.DataTable(
            id="table-dropdown",
            data=df.to_dict("records"),
            columns=[
                {"id": "climate", "name": "climate", "presentation": "dropdown"},
                {"id": "temperature", "name": "temperature"},
                {"id": "city", "name": "city", "presentation": "dropdown"},
            ],
            editable=True,
            dropdown={
                "climate": {
                    "options": [
                        {"label": i, "value": i} for i in df["climate"].unique()
                    ]
                },
                "city": {
                    "options": [{"label": i, "value": i} for i in df["city"].unique()]
                },
            },
            page_action="native",
            page_current=0,
            page_size=10,
            style_table={
                "height": "400px",  # "auto", 600
                "overflowX": "auto",
            },
        ),
        html.Div(id="table-dropdown-container"),
    ]
)


if __name__ == '__main__':
    app.run(debug=True)

How to make dropdown options visible thereby minimizing the distance between them?