Data Table Causes Scrolling Issues on Chrome

[austinm911]

I am trying to constrain the data table's height within a parent container.

I haven't quite figured out how to get this working properly where the Table View Options Header, Table Header, and Table Pagination are all pinned, while the Table Body scrolls, but I have noticed there is an issue where once the page count is changed, on Chrome it causes the entire page to expand with scroll. This isn't the case on Firefox

https://codesandbox.io/p/sandbox/async-cherry-7jzsym?file=%2Fcomponents%2Fui%2FDataTable%2FDataTable.tsx%3A73%2C64

Direct link - https://7jzsym-3000.csb.app/

To reproduce: Change rows per page from 10 to 50. On Firefox there will be no page scroll but there will be a page scroll on Chrome

[Tpuljak]

I've been struggling with this one for a while as well.

Turns out the problem is with the dropdown I render as the action dots in the last column (similar to the shadcn docs). Seems that the radix dropdown breaks the table scroll behavior.

I didn't manage to fix it, but my workaround is to place the action items as the first column and not the last. Seems that then the page doesn't shift anymore. Not the ideal solution, but better than breaking the entire page.

[artursvanags]

I've been struggling with this one for a while as well.

Turns out the problem is with the dropdown I render as the action dots in the last column (similar to the shadcn docs). Seems that the radix dropdown breaks the table scroll behavior.

I didn't manage to fix it, but my workaround is to place the action items as the first column and not the last. Seems that then the page doesn't shift anymore. Not the ideal solution, but better than breaking the entire page.

I have the same issue, it adds a white space below my page with doble scroll bars

I actually have solved it simply by adding relative classname inside a container the data table is in:

export default async function Template() {
  const { data } = await getData();

  return (
    <div className="relative flex flex-col gap-2">
      <div>
        <DataTable columns={columns} data={data} />
      </div>
    </div>
  );
}

Let me know if this has solved it for you.

[chetra-seng]

@artursvanags I have the same issues but with horizontal scrollbar. It doesn't add horizontal scroll bar when there's no data. However, once the data is loaded, the scrollbar appear out of nowhere even when there's no overflow component

[chetra-seng]

Update: this issue seems to be related to radix dropdown menu component. I added this to my global.css and it worked. For more detail check it here

body {
  @apply overflow-x-hidden;
}

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.