Datatable header overlaps on dropdown list


If you see here, the datatable header overlaps on dropdown list. It is happening for other apps too. is this a bug?


@chriddyp, @Damian any updates on this?


I don’t work here, just follow the what’s going on. If you post a small code example to here or the github you might get a better response.

FYI, I’ve had a lot of trouble laying out the DataTable with the common CSS patterns provided, but not sure if that’s my fault as I’m not very experienced with CSS.


Oh I didn’t know that. Sorry @Damian.


@app.callback(Output(‘tab_data’, ‘children’),
[Input(‘config_list’, ‘value’),
Input(‘sheet_names’, ‘value’)]
def display_tab_data(config, tab):

if tab:
tab_df = pd.read_excel(‘C:\Users\N0207022\Desktop\NGRT\Config\HMR\{}.xlsx’.format(config), sheet_name=tab)

table_data = dash_table.DataTable(
    columns=[{"name": i, "id": i} for i in tab_df.columns],
    style_table={'overflowX': 'scroll',
                 'maxHeight': '700px',
                 'maxWidth': '1500px',
                 'border': 'thin lightgrey solid'
    style_cell={'width': '150px',
                'textAlign': 'left'
            'if': {'row_index': 'odd'},
            'backgroundColor': 'rgb(248, 248, 248)'
        'backgroundColor': '#3DC2ED',
        'fontWeight': 'bold'
        'selector': '.dash-cell div.dash-cell-value',
        'rule': 'display: inline; white-space: inherit; overflow: inherit; text-overflow: inherit;'


return table_data


Same problem. I haven’t dug into the DataTable code yet, but I suspect this is a common problem, since data is often displayed beneath a drop-down. Maybe a CSS issue?


Thanks for reporting this. We’ve opened an issue for it here to follow it up:

This happens because with fixed rows the header must be absolutely positioned and is given a z-index to behave visually correctly in respect to other absolutely positioned items in the table.