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

• 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 #331. I'm curious if these are related.