rowVirtualizerInstanceRef scrollToIndex not working properly

[zargounii]

mantine-react-table version

2.0.0-beta.7

react & react-dom versions

18.2.0

Describe the bug and the steps to reproduce it

Hello, i'm using a table with enableRowVirtualization set to true, i have injected a rowVirtualizerInstanceRef to the table and i'm using the method rowVirtualizerInstanceRef.current?.scrollToIndex(rowIndex) the problem is it does the scroll but it doesn't scroll to the exact index, i tried several params for the scrollToIndex method but the result is always the same

Minimal, Reproducible Example - (Optional, but Recommended)

const Component = (props) => {
const rowVirtualizerInstanceRef = useRef<MRT_RowVirtualizer>(null)

  useEffect(() => {
    if (props.expandedRowId) {
      const rowIndex = props.data.findIndex(row => row.invariant === props.expandedRowId)
      setExpanded({ [rowIndex]: true })
      rowVirtualizerInstanceRef.current?.scrollToIndex(rowIndex)
    }
  }, [props.expandedRowId])

return (
    <MantineProvider
      defaultColorScheme={darkTheme ? 'dark' : 'light'}
      forceColorScheme={darkTheme ? 'dark' : 'light'}>
      <MantineReactTable
        localization={MRT_Localization_FR}
        columns={columns}
        data={props.data}
        layoutMode='grid'
        enablePagination={false}
        enableTopToolbar={true}
        enableStickyHeader={true}
        enableRowVirtualization={true}
        rowVirtualizerInstanceRef={rowVirtualizerInstanceRef}
        state={{
          density: 'xs'
        }}
        mantineTableContainerProps={{
          style: { height: '60vh' }
        }}
      />
    </MantineProvider>)
}

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.

[EdwardEB]

Hi,

I also noticed this problem with the visualizer and tree combination, it seems as if the visualizer does not take into account the record that is expanded when you set the expanded flag to true.

I managed to get it working with this workaround:

rowVirtualizerInstanceRef.current?.scrollToIndex(index, {
align: "center",
});

Example:
https://codesandbox.io/p/sandbox/boring-nova-g9kg77

[alessandrojcm]

Hi guys, first of all, MRT uses TanStack Virtual under the hood. You can customize the virtualizer according to your needs using rowVirtualizerProps. We try to make sane assumptions about the size of the rows; however, we cannot estimate them all! So you can pass your own estimateSize function to fit your needs. As per your original issue, this wasn't a bug with the virtualizer, your scroll to index implementation just needed a bit of tuning, this works as expected:

 const scrollToIndex = (targetIndex: number) => {
    // Gets the parent index (doesn't use flatRows as that will take into account the child rows)
    const parentRow = table.getRowModel().rows[targetIndex];
    if (parentRow && parentRow.subRows?.[0]) {
      setExpanded({ [parentRow.id]: true });
      // Maybe use flushSync here instead of setTimeout
      // Wait for expand state to update before scrolling
      setTimeout(() => {
        // Find the child row's index in flat rows
        const childFlatIndex = table.getRowModel().flatRows.findIndex(
          row => row.id === parentRow.subRows[0].id
        );
        if (childFlatIndex !== -1) {
          rowVirtualizerInstanceRef.current?.scrollToIndex(childFlatIndex, {
            align: 'center'
          });
        }
      }, 0);
    }
  };

Also just as a bit of advise try not to use useEffect for this 😄

[alessandrojcm]

Also @zargounii I strongly recommend you use MRT with the useMantineReactTable hook instead of the old component approach, as this will give you access to the table instance, with all the TanStack Table methods you see in the snippet above.