# DataTable Header Scrolling Issues

**URL:** <https://community.plotly.com/t/datatable-header-scrolling-issues/50105>\
**Category:** Dash Python\
**Created:** [February 17, 2021, 4:56am UTC](https://community.plotly.com/t/datatable-header-scrolling-issues/50105 "2021-02-17T04:56:22Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![bigmike](https://avatars.discourse-cdn.com/v4/letter/b/a87d85/32.png) [@bigmike](https://community.plotly.com/u/bigmike)\
**Post date:** [February 17, 2021, 4:56am UTC](https://community.plotly.com/t/datatable-header-scrolling-issues/50105/1 "2021-02-17T04:56:22Z")

</div>

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](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/7/7dc4481a24d70c66ef087efeb4d9d80c545ffde8.gif)

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!

```auto
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,
                                        ),

```

---

<div class="post-metadata">

**Author:** ![bigmike](https://avatars.discourse-cdn.com/v4/letter/b/a87d85/32.png) [@bigmike](https://community.plotly.com/u/bigmike)\
**Post date:** [March 5, 2021, 4:54pm UTC](https://community.plotly.com/t/datatable-header-scrolling-issues/50105/2 "2021-03-05T16:54:10Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![lukekasper25](https://avatars.discourse-cdn.com/v4/letter/l/c67d28/32.png) [@lukekasper25](https://community.plotly.com/u/lukekasper25)\
**Post date:** [March 27, 2024, 12:01pm UTC](https://community.plotly.com/t/datatable-header-scrolling-issues/50105/3 "2024-03-27T12:01:58Z")

</div>

I’m running Dash 2.13.0 with the corresponding dash-table (\> 5.0) and still getting this issue.

---

<div class="post-metadata">

**Author:** ![jinnyzor](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jinnyzor/32/21194_2.png) [@jinnyzor](https://community.plotly.com/u/jinnyzor)\
**Post date:** [March 27, 2024, 4:06pm UTC](https://community.plotly.com/t/datatable-header-scrolling-issues/50105/4 "2024-03-27T16:06:15Z")

</div>

Hello @lukekasper25,

Have you considered using AG Grid instead?

---

<div class="post-metadata">

**Author:** ![lukekasper25](https://avatars.discourse-cdn.com/v4/letter/l/c67d28/32.png) [@lukekasper25](https://community.plotly.com/u/lukekasper25)\
**Post date:** [March 28, 2024, 6:38pm UTC](https://community.plotly.com/t/datatable-header-scrolling-issues/50105/5 "2024-03-28T18:38:57Z")

</div>

@jinnyzor I could probably rewrite it as an AG Grid. But there are alot of dependencies on the dash-table construct and it would be a lengthy rewrite. Don’t have budget to make that invasive of a change right now. I was hoping there would be a bug patch for dash-table, but if time/money becomes available maybe I can transition to AG Grid.