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(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' } }} /> ) }

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.

[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