DataTable Header Scrolling Issues

Hey everyone,

I’ve been having a reoccurring problem across several projects. Whenever I try to use a fixed header in combination with scrolling, I get the buggy behavior shown below. The headers will not remained fixed in the correct position.
Screen Recording 2021-02-16 at 11.45.00 PM

This issue occurs in at least chrome and safari so I don’t think that’s the issue. Here’s my code for the table, any help or guidance is appreciated!

html.Div(
                            id="table-zone",
                            children=[
                                build_graph_title("Summary Data"),
                                html.Div(
                                    id="summary-datatable-container",
                                    className="pretty_container",
                                    children=[
                                        dt.DataTable(
                                            id="summary-datatable",
                                            columns=[
                                                {
                                                    "hideable": True,
                                                    "name": i,
                                                    "id": i,
                                                }
                                                for i in summary_df.columns
                                                # omit the id column
                                                if i != "id"
                                            ],
                                            css=[
                                                {
                                                    "selector": ".previous-page, "
                                                    ".next-page, .first-page, "
                                                    ".last-page, .export, .show-hide",
                                                    "rule": "color: white;",
                                                },
                                                {
                                                    "selector": ".current-page",
                                                    "rule": "padding-right: 5px;",
                                                },
                                            ],
                                            fixed_rows={
                                                "headers": True,
                                            },
                                            style_cell={
                                                "whiteSpace": "normal",
                                                "height": "auto",
                                                "minWidth": "110px",
                                                "width": "110px",
                                                "maxWidth": "110px",
                                                "textAlign": "center",
                                            },
                                            style_data_conditional=[
                                                {
                                                    "if": {"row_index": "odd"},
                                                    "backgroundColor": "rgb(242, 239, 233)",
                                                },
                                            ],
                                            style_header={
                                                "backgroundColor": "rgb(25, 36, 68)",
                                                "fontWeight": "bold",
                                                "color": "white",
                                                # "textAlign": "center",
                                            },
                                            style_table={
                                                # "height": 320,
                                                "overflowX": "auto",
                                                "overflowY": "auto",
                                            },
                                            data=summary_df.to_dict("records"),
                                            row_selectable="single",
                                            sort_action="native",
                                            filter_action="native",
                                            export_format="csv",
                                            cell_selectable=False,
                                            style_as_list_view=True,
                                            page_size=20,
                                        ),

For anybody who stumbles across this, it’s an easy fix! It appears to have just been a bug. Upgrading dash from 1.13.3 to 1.19 and dash-table from 4.8.1 to 4.11.2 solved the issue.