Documentation needs update for rowVirtualizerInstanceRef.current?.scrollToIndex with virtualized table and renderDetailPanel

[RedX2501]

material-react-table version

2.12.1

react & react-dom versions

"react": "^18.2.0", "react-dom": "^18.2.0",

Describe the bug and the steps to reproduce it

When an MRT is row virtualized and sets renderDetailPanel the function scrollToIndex from the virtualizer does not scroll to the item.
It only scrolls to "half" of the items.

This is because MRT will insert rows for the details but this is not documented.

I think it's enough to update the documentation.

Minimal, Reproducible Example - (Optional, but Recommended)

const Example = () => {
    const columns = useMemo<MRT_ColumnDef<Person>[]>(
        //column definitions...
        () => [
            {
                accessorKey: 'firstName',
                header: 'First Name',
            },
            {
                accessorKey: 'middleName',
                header: 'Middle Name',
            },
            {
                accessorKey: 'lastName',
                header: 'Last Name',
            },
            {
                accessorKey: 'email',
                header: 'Email Address',
            },
            {
                accessorKey: 'phoneNumber',
                header: 'Phone Number',
            },
            {
                accessorKey: 'address',
                header: 'Address',
            },
            {
                accessorKey: 'zipCode',
                header: 'Zip Code'
            },
            {
                accessorKey: 'city',
                header: 'City',
            },
            {
                accessorKey: 'state',
                header: 'State'
            },
            {
                accessorKey: 'country',
                header: 'Country',
            },
            {
                accessorKey: 'petName',
                header: 'Pet Name'
            },
            {
                accessorKey: 'age',
                header: 'Age'
            },
            {
                accessorKey: 'salary',
                header: 'Salary'
            },
            {
                accessorKey: 'dateOfBirth',
                header: 'Date of Birth'
            },
            {
                accessorKey: 'dateOfJoining',
                header: 'Date of Joining'
            },
            {
                accessorKey: 'isActive',
                header: 'Is Active'
            }
        ],
        []
        //end
    );

    const handleDoubleClick = useCallback(() => alert('hey'), []);

    const rowDetails = useCallback(
        ({row}) =>
            row.original.salary ? (
                <Box display='grid'>
                    <Typography variant='h6' gutterBottom sx={{fontWeight: 'bold'}}>
                        Signals To Pdu Mapping
                    </Typography>
                    <Typography
                        onClick={handleDoubleClick}
                    >{row.original.salary}</Typography>
                </Box>
            ) : null,
        [handleDoubleClick]
    )

    //optionally access the underlying virtualizer instance
    const rowVirtualizerInstanceRef = useRef<MRT_RowVirtualizer>(null);

    const [data, setData] = useState<Person[]>([]);
    const [isLoading, setIsLoading] = useState(true);
    const [sorting, setSorting] = useState<MRT_SortingState>([]);
    useEffect(() => {
        if (typeof window !== 'undefined') {
            setData(makeData(10_000));
            setIsLoading(false);
        }
    }, []);

    useEffect(() => {
        //scroll to the top of the table when the sorting changes
        try {
            rowVirtualizerInstanceRef.current?.scrollToIndex?.(0);
        } catch (error) {
            console.error(error);
        }
    }, [sorting]);

    const table = useMaterialReactTable({
        columns,
        data,
        //defaultDisplayColumn: {enableResizing: true},
        enableBottomToolbar: false,
        enableColumnResizing: true,
        enableColumnOrdering: false,
        enableColumnVirtualization: true,
        enableGlobalFilterModes: true,
        enablePagination: false,
        enableColumnPinning: false,
        enableRowNumbers: true,
        enableRowVirtualization: true,
        renderDetailPanel: rowDetails,
        // muiTableContainerProps: { sx: { maxHeight: '600px' } },
        // muiTableContainerProps: { sx: { tableLayout: 'fixed', maxWidth: '100% !important' } },
        //muiTablePaperProps: {sx: {maxWidth: '100% !important'}},
        onSortingChange: setSorting,
        muiTableBodyRowProps: useCallback(() => ({
            onClick: () => {
                rowVirtualizerInstanceRef.current?.scrollToIndex?.(2_000);
            },
        }), []),
        muiTablePaperProps: {
            sx: {flexGrow: 1},
        },
        state: {isLoading, sorting},
        rowVirtualizerInstanceRef, //optional
        rowVirtualizerOptions: {overscan: 5}, //optionally customize the row virtualizer
        columnVirtualizerOptions: {overscan: 2} //optionally customize the column virtualizer
    });

    return <Box>
        <Button onClick={() => rowVirtualizerInstanceRef.current?.scrollToIndex(1000)}>Go to element 1000</Button>
        <MaterialReactTable table={table}/>;
    </Box>
};

export default Example;

Screenshots or Videos (Optional)

No response

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

No, because I do not have time to dig into it

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.