Rules in style_table of dash datatable are not applied

Dash Python
1

Hi, i don’t know why, but no matter what i put in the proprety style_table of my Dash Datatable, it’s not applied.

style_table={
            'height':'100%',
            'width':'100%',
            'overFlowY':'auto',
            'overFlowX':'auto',
        }

Here is the full app.layout :thinking:

app = dash.Dash(__name__, prevent_initial_callbacks=True, external_stylesheets=['https://codepen.io/chriddyp/pen/bWLwgP.css'])

app.layout = html.Div([
    dcc.Upload(
        id='upload-data',
        children=html.Div([
            'Glisser / déposer ou ',
            html.A('Selectionner fichier',
                   style={'color':'#446ccf'})
        ]),
        style={
            'width': '99%',
            'height': '60px',
            'lineHeight': '60px',
            'borderWidth': '1px',
            'borderStyle': 'dashed',
            'borderRadius': '5px',
            'textAlign': 'center',
            'margin': '10px',

        },
        # Allow multiple files to be uploaded
        multiple=True
    ),

    html.Button('Reinitialiser filtres',id='clear-filter'),

    dash_table.DataTable(
        id='datatable-interactivity',
        columns=[
            {"name": i, "id": i, "deletable": True, "selectable": True, "hideable": True}
            if i == "iso_alpha3" or i == "year" or i == "id"
            else {"name": i, "id": i, "deletable": True, "selectable": True}
            for i in df.columns
        ],
        data=df.to_dict('records'),  # the contents of the table
        editable=True,              # allow editing of data inside all cells
        filter_action="native",     # allow filtering of data by user ('native') or not ('none')
        sort_action="native",       # enables data to be sorted per-column by user or not ('none')
        sort_mode="single",         # sort across 'multi' or 'single' columns   row_selectable=True
        column_selectable="multi",  # allow users to select 'multi' or 'single' columns
        row_selectable="multi",     # allow users to select 'multi' or 'single' rows
        row_deletable=True,         # choose if user can delete a row (True) or not (False)
        selected_columns=[],        # ids of columns that user selects selected_rows=[]
        selected_rows=[],           # indices of rows that user selects
        page_action="native",       # all data is passed to the table up-front or not ('none')
        page_current=0,             # page number that user is on
        page_size=6,                # number of rows visible per page
        style_table={
            'height':'100%',
            'width':'100%',
            'overFlowY':'auto',
            'overFlowX':'auto',
        },
        #style_as_list_view=True,   # Table as list (without vertical grid lines)
        style_cell={                # ensure adequate header width when text is shorter than cell's text
            'font-family':'verdana',
            'whitespace':'normal',
            'padding': '5px',
            'minWidth': 200, 'maxWidth': 200, 'width': 200
        },
        style_header={
            'color':'white',
            'backgroundColor': '#446ccf',
            'fontWeight':'bold',
            'border': '1px solid black'
        },
        style_data={                # overflow cells' content into multiple lines
            'whiteSpace': 'normal',
            'border': '1px solid black'
        },
        style_cell_conditional=(
                [    # align text columns to left. By default they are aligned to right
                    {'if': {'column_id': c},'textAlign': 'left'}
                    for c in cat_cols
                ] + [
                    {}
                ]
        ),
        style_header_conditional=[],
        style_data_conditional=[
            {
                'if': {
                    'state': 'selected'  # 'active' | 'selected'
                },
                'backgroundColor': 'rgba(0, 116, 217, 0.3)',
                'border': '3px solid rgb(0, 116, 217)',
                'textAlign': 'center'
            },{
                'if':{'row_index': 'odd'},
                'backgroundColor': 'rgb(248, 248, 248)'
            },{
                'if': {'column_id':'Prix unitaire'},
                'backgroundColor':'#3D9970',
                'color': 'white',
            }
        ]
    ),

    html.Br(),
    html.Br(),
    #html.Div(id='bar-container'),
    #html.Div(id='choromap-container')

],
    style={'font-family':'verdana'}
)

The result looks like this :

image
image1920×779 25.8 KB

The rule : ‘width’:‘100%’ is not applied, and the vertical or horizontale scroll bar is not showing. :thinking:

Also, if you know how to deal with the column names that are too long i would appreciate.

Thanks in advance ! :innocent: