Add Optional scrollRef prop for having manual control over tableDivContainer scroll position.

[angel1254mc]

Related Issue

None

Description

This pull request adds a new prop, scrollRef that gives users access to the ref that handles the table's vertical scroll. (when the amount of items in the table exceeds the bodies height).

Wanted to pitch this PR idea. We use this package at the company I work at and we wanted to make it so that paginating through the table always puts you at the top of the table when you switch pages. We looked for a prop or configurable parameter that would do that but couldn't find one 🥹.

I understand this prop is extremely specific to this one usecase so feel free to close MR if y'all feel it's not necessary

Related PRs

N/A

Impacted Areas in Application

material-table.js, specifically the same place where tableDivContainer gets set. Does not impact any existing functionality by itself. May cause unexpected behavior if a user tries to do something crazy with their ref.

Additional Notes

Here's an example of how this prop could be used- scrolling back to top of table body on page change.

const ExampleTable = () => {
    const scrollRef = useRef();

    return (
            <MaterialTable
                title="Table With ScrollRef"
                options={{
                    maxBodyHeight: "300px",
                    scrollRef: scrollRef,
                }}
                data={DEMO_DATA}
                columns={DEMO_COLS}
                onPageChange={() => {
                    // Scroll back to top on page change
                    if (scrollRef?.current) scrollRef.current.scrollTop = 0;
                }}
            />
    );
};

export default ExampleTable

Also removed an unused snapshot parameter in the drag-and-drop context callback but I can add that back in if need be.