Row Virtualization Breaks Scrolling

[Aystein]

mantine-react-table version

1.3.4

react & react-dom versions

18.2

Describe the bug and the steps to reproduce it

Using the very basic example with rowVirtualisation:

  const table = useMantineReactTable({
    columns,
    data,
    enableRowVirtualization: true,
    enablePagination: false,
    maxRowsToRender: 10,
    mantineTableContainerProps: { sx: { maxHeight: '600px' } },
  });

The scroll behavior is not correct. The mouse drag is not the same as the scroll drag as shown in this screencast

Screencast_20240425_150752.webm

Minimal, Reproducible Example - (Optional, but Recommended)

const table = useMantineReactTable({ columns, data, enableRowVirtualization: true, enablePagination: false, maxRowsToRender: 10, mantineTableContainerProps: { sx: { maxHeight: '600px' } }, });

Screenshots or Videos (Optional)

No response

Do you intend to try to help solve this bug with your own PR?

None

Terms

• [X] I understand that if my bug cannot be reliably reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

[jporchy]

The scrollbar also does not look great with how it goes over the Header in my opinion. It should just be the body. I created a bug in https://github.com/KevinVandy/mantine-react-table/issues/331. I'm curious if these are related.