✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🐇 Announcing Dash VTK for 3d simulation graphics. Check out the March webinar.

Datatable splitting fixed row from rest of table

Hello,

I’ve been working on a multi-page dash application but I’ve run into an annoying problem. When I use Datatable fixed row, the table splits up like shown in the red box in the picture:

I’ve tried all I know to use Div styling to fix it, but I don’t seem able to influence the styling of the css generated by the dash app.

Does anyone have ideas?

The code for the Datatable is:

dash_table.DataTable(
                                id='npi_new-parts',
                                columns=[{'name': x, 'id': x} for x in new_parts.columns[:-1]],
                                data=new_parts.iloc[:, :-1].to_dict('records'),
                                # filter_action='native',
                                export_headers='display',
                                # todo: fix the top row issue
                                fixed_rows={'headers': True, 'padding-bottom': '0px'},
                                export_columns='visible',
                                export_format='xlsx',
                                # style_as_list_view=True,
                                style_header={'margin': 0},
                                style_data={
                                    'whiteSpace': 'normal',
                                    'height': 'auto', },
                                style_cell={
                                    'height': 'auto',
                                    'minWidth': '30px', 'maxWidth': '120px',
                                    'whiteSpace': 'normal',
                                    'padding': 0,
                                    'margin-bottom': 100,
                                },
                            )