DataTable height difficulties

Dash Python
1

I can’t seem to get the height of my DataTable to fill the card that I have it in ('general_table). I can easily change the height of the card by style = {‘height’ : ‘64vh’} but nothing happens when I update the height in the style_table section of my callback for the DashTable.

dbc.Row([ #Row that contains the mapbox and table
        dbc.Col([
            dbc.Card([
                dbc.CardBody(id='general_table', 
                className = '',
                style = {'height' : '64vh'}),
                    ]),
            dbc.Card([
                dbc.CardBody(
                    dcc.Graph(id='vaccine_state'))])
            ],width = 3),

@app.callback(
    Output('general_table', 'children'),
    Input("states_dropdown", 'value'))

def general_table_update(value):
    font_size_body = ".7vw"
    if value == 'United States':
        table = dash_table.DataTable(
                data = df_state.to_dict('records'),
                columns = [
                    {'name': 'State/County', 'id' : 'state_name'},
                    {'name': 'Confirmed Cases', 'id': 'actuals.cases'},
                    {'name': 'New Cases', 'id': 'actuals.newCases'},
                    {'name': 'Confirmed Deaths', 'id': 'actuals.deaths'},
                ],
                editable = False,
                sort_action = 'native',
                column_selectable = 'single',
                style_as_list_view=True,
                fixed_rows={"headers": True},
                fill_width=True,
                style_table={
                    "width": "100%",
                    "Height": "60vh",
                },
                style_header={
                    "backgroundColor": 'rgba(0,0,0,0)',
                    "border": 'rgba(0,0,0,0)',
                    "fontWeight": "bold",
                    "font": "Lato, sans-serif",
                    'color' : 'white',
                    "height": "auto",
                    "border-bottom": "0.1rem solid #313841",
                },
                style_cell={
                    "font-size": font_size_body,
                    'styleAlign': 'center',
                    'text-align': 'center',
                    "font-family": "Lato, sans-serif",
                    "border-bottom": "0.01rem solid #313841",
                    "backgroundColor": 'rgba(0,0,0,0)',
                    "color": "#FEFEFE",
                    'hover' : {'backgroundColor ' : 'transparent'},
                    "height": "2.0vw",
                    'whiteSpace': 'normal',
                },
                style_cell_conditional=[
                    {
                        "if": {"column_id": "state_name",},
                        "minWidth": "3vw",
                        "width": "3vw",
                        "maxWidth": "3vw",
                        'text-align': 'left',
                    },
                    {
                        "if": {"column_id": "actuals.cases",},
                        "color": "#ffeb79",
                        "minWidth": "2vw",
                        "width": "2vw",
                        "maxWidth": "2vw",
                    },
                    {
                        "if": {"column_id": "actuals.newCases",},
                        "color": "#fdb10b",
                        "minWidth": "2vw",
                        "width": "2vw",
                        "maxWidth": "2vw",
                    },
                     {
                        "if": {"column_id": "actuals.deaths",},
                        "color": "#ff1631",
                        "minWidth": "2vw",
                        "width": "2vw",
                        "maxWidth": "2vw",
                    },
                ]
            )

card
card692×945 43.5 KB

2

Modifying the height of datatables has been finicky in my experience. Try also setting the maxHeight to 60vh.