scroll a row into view

[grahampcharles]

Does anyone have a working example for making a row scroll into view on load, using scrollIntoView()? I'm struggling with it a bit.

Here's what I've tried:

I set a custom data attribute on the target row:

                customRowAttributes={({ id }) => {
                    if (id === props.highlight) {
                        return ({ 'data-highlight': true });
                    }
                    return {};
                }}

... and then try to scroll to it in a useEffect:

    useEffect(() => {
        const highlights = document.querySelectorAll('[data-highlight]');
        if (!highlights[0]) {
            alert('nope');
            return;
        }
        highlights[0].scrollIntoView({behavior: 'smooth'});
    }, []);

No luck, though -- seems the grid hasn't been loaded by that point.

Anyway, I'm sure I'll find the secret sauce soon, just wondered if anyone had managed it yet.

[kingpalethe]

Similar question here. Maybe another way ...... could just be to assign an id to a row, and then use a url like domain.com/my_page#unique-id-for-row .. ? Would that be a reasonable way to accomplish this? I only need to scroll-into-view on page load....

[icflorescu]

Hey, @kingpalethe - see my answer below - try to make sure the table rendered its content before attempting to scroll.

P.S. Thanks a lot for your sponsorship! It's people like you that keep the project alive!... 🙏❤️🙏

[icflorescu]

I like the idea of using the customRowAttributes property to achieve this - see an example here: icflorescu.github.io/mantine-datatable/examples/scrolling-a-row-into-view.

A few things to keep in mind, though:

First, you need to keep in mind that the DataTable header is fixed, so make sure to use the appropriate scrollIntoView() options (i.e. alignToTop = false or { block: 'end' }) to prevent it being hidden under the header after scrolling.

Second, you have to make sure the table rendered its content before attempting to scroll. For instance, you could consider triggering the scroll in a useEffect() that depends on what you're passing to the table records.

Let me know if this works for you.

[kingpalethe]

Thanks, confirmed that I tested this strategy and it works well.

[icflorescu]

Glad to hear that!

[icflorescu]

@kingpalethe:

One thing I didn't like when using scrollIntoView() on the row element itself is that it also causes the page to scroll to top and it was't as "smooth" on Chrome, at least in my usage scenario. So, I thought about it and managed to come up with another possible approach you could use, involving scrollTo on the table viewport element.

See the second example on the docs page here: icflorescu.github.io/mantine-datatable/examples/scrolling-a-row-into-view

[icflorescu]

I'll summarize the final answer here, for the benefit of other people bumping into this:

• Refer to scrolling-a-row-into-view docs page
• Make sure to trigger the scrolling after the table data is loaded (i.e. in a useEffect() depending on on what you're passing to the table records.)