Dash Table height issue

Dash Python
1

Hello
have the following code:

def interactive_table(dataframe):
    return html.Div([
        dash_table.DataTable(
            id='table',
            columns=[{"name": i, "id": i} for i in dataframe.columns],
            data=dataframe.to_dict('records'),
            style_table={'overflowX': 'auto'},
            style_cell_conditional=[{'if': {'column_id': 'ID'},
                                     'width': '20px', 'textAlign': 'center'}],
            style_cell={
                'minWidth': '98px', 'width': '98px', 'maxWidth': '120px',
                'height': '19px', 'minHeight': '19px', 'maxHeight': '19px',
                'overflow': 'hidden',
                'textOverflow': 'ellipsis',
                'textAlign': 'left'
            },

            editable=True,
            filter_action="native",
            sort_action="native",
            page_action="native",
            column_selectable="single",
            #row_selectable="multi",
            #row_deletable=True,
            selected_columns=[],
            selected_rows=[],
            # export_format="csv",
            page_current=0,
            page_size=20
        )
    ], style={'margin': '30px'})

I’m trying to put a specific value for the cell height but it doesn’t work, the height remains unchanged,
please, tell me how to fix it or how to correctly set the height of the cell

Thank you

2

Hi @dilfin07

That code works - try running this MWE:

import dash
import dash_table
import pandas as pd

df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/solar.csv')

app = dash.Dash(__name__)

app.layout = dash_table.DataTable(
    id='table',
    columns=[{"name": i, "id": i} for i in df.columns],
    data=df.to_dict('records'),
    style_cell={
                'minWidth': '98px', 'width': '98px', 'maxWidth': '120px',
                'height': '100px', 'minHeight': '100px', 'maxHeight': '100px',
                'overflow': 'hidden',
                'textOverflow': 'ellipsis',
                'textAlign': 'left'
            },
    style_table={'overflowX': 'auto'},
    editable=True,
    filter_action="native",
    sort_action="native",
    page_action="native",
    column_selectable="single",
    #row_selectable="multi",
    #row_deletable=True,
    selected_columns=[],
    selected_rows=[],
    # export_format="csv",
    page_current=0,
    page_size=20

)

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

So, I just noticed that my first example will make the cell height larger, but not smaller than 30px, which is the min for the rows. To override the min, you can add the following CSS selector:

css=[{
        'selector': '.dash-spreadsheet-inner tr',
        'rule': 'max-height: 19px; min-height: 19px; height: 19px;'
    }],

Here is a complete example:


import dash
import dash_table
import pandas as pd

df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/solar.csv')

app = dash.Dash(__name__)

app.layout = dash_table.DataTable(
    id='table',
    columns=[{"name": i, "id": i} for i in df.columns],
    data=df.to_dict('records'),
    css=[{
        'selector': '.dash-spreadsheet-inner tr',
        'rule': 'max-height: 19px; min-height: 19px; height: 19px;'
    }],
    style_cell={
                'minWidth': '98px', 'width': '98px', 'maxWidth': '120px',
                'overflow': 'hidden',
                'textOverflow': 'ellipsis',
                'textAlign': 'left'
            },
)

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

Hello @AnnMarieW
excellent, the solution looks like it was successful,
perhaps, you can suggest how you can rework other elements for example, page navigation keys