Table row count change causes scrolling on Chrome when table is height limited

[austinm911]

Describe the bug

This is an issue i came across when trying to implement shadcn's data table. My data table component is height constrained and nested under some nav bars, headers, footer, and so forth. I want the table to scroll within its container, like airtable does. It seems to work on firefox, but on Chrome when you change the page count it seems to cause the entire page in chrome to expand to the total table height (with the new rows), but the table stays within the container. However the result is a ton of empty space below the table

Here is the issue on shadcn I created.
shadcn-ui/ui#510

You can observe the bug here using chrome https://7jzsym-3000.csb.app/ ... or see codesandbox linked

Your minimal, reproducible example

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

Steps to reproduce

See example here. Change the row count

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

Expected behavior

This should not cause the table to expand in height or cause scrolling behavior on chrome

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

Chrome

react-table version

8.9.1

TypeScript version

No response

Additional context

No response

Terms & Code of Conduct

• I agree to follow this project's Code of Conduct
• I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

[artursvanags]

Is there a solution for this? I have double scroll bars in similar scenario, and the space below also is created.

[JMRodriguez-work]

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

[artursvanags]

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 solved it for you.

[JMRodriguez-work]

Yes ! Thank you !!

[mxn2020]

This error drove me crazy :) This solution solved the issue for me:

Within file "data-table-row-actions.tsx", replace this DropdownMenuTrigger:

<DropdownMenuTrigger asChild> <Button variant="ghost" className="flex h-8 w-8 p-0 data-[state=open]:bg-muted" > <DotsHorizontalIcon className="h-4 w-4" /> <span className="sr-only">Open menu</span> </Button> </DropdownMenuTrigger>

with this here:

<DropdownMenuTrigger asChild> <Button variant="ghost" className="flex h-8 w-8 p-0 data-[state=open]:bg-muted" aria-label="Open menu" // Adding aria-label here > <DotsHorizontalIcon className="h-4 w-4" /> </Button> </DropdownMenuTrigger>

[chetra-seng]

The issue might be due to redix dropdown component, which you can find here. I had similar issue with horizontal scrollbar and this fixes it.

body {
  @apply overflow-x-hidden;
}