Datatable header overlaps on dropdown list


#1

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


#2

@chriddyp, @Damian any updates on this?


#3

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.


#4

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


#5

@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(
    id='table',
    columns=[{"name": i, "id": i} for i in tab_df.columns],
    data=tab_df.to_dict("rows"),
    n_fixed_rows=1,
    style_table={'overflowX': 'scroll',
                 'maxHeight': '700px',
                 'maxWidth': '1500px',
                 'border': 'thin lightgrey solid'
                 },
    style_cell={'width': '150px',
                'textAlign': 'left'
                },
    style_cell_conditional=[
        {
            'if': {'row_index': 'odd'},
            'backgroundColor': 'rgb(248, 248, 248)'
        }
    ],
    style_header={
        'backgroundColor': '#3DC2ED',
        'fontWeight': 'bold'
    },
    css=[{
        'selector': '.dash-cell div.dash-cell-value',
        'rule': 'display: inline; white-space: inherit; overflow: inherit; text-overflow: inherit;'
    }],

)

return table_data