[wak327]

Done

• Added a scrollToTop prop to MainTable. It is passed to the table's internal Pagination, so the window scrolls to the top when the table page changes. It is off by default, so existing tables behave as before.
• Added tests for scrolling to the top when scrollToTop is set, and not scrolling by default.

QA

Pinging @canonical/react-library-maintainers for a review.

Storybook

To see rendered examples of all react-components, run:

yarn start

QA in your project

from react-components run:

yarn build
npm pack

Install the resulting tarball in your project with:

yarn add <path-to-tarball>

QA steps

• Render a MainTable with paginate set, enough rows for more than one page, and scrollToTop.
• Scroll down the page and change the table page using the pagination: the window scrolls to the top.
• Remove scrollToTop and change the page again: the scroll position doesn't change.

Percy steps

• No visual changes expected.

Fixes

Fixes: #34

[wak327]

@edlerd @jmuzina could you take a look when you have a moment?

@bartaz this picks up #34, which you triaged as low effort / potentially high value. I went with an opt-in scrollToTop prop that's passed through to the table's Pagination, so existing tables aren't affected. Happy to make it the default instead if you'd prefer.

[Stefan3002]

@wak327 Hello! Thanks for picking this up and proposing a fix! Looks good with only one suggestion: can we have a new story underMainTable.stories.tsx with a lot of rows? This would make it easier to visualize the behavior of the component. As of now, I can zoom in a lot and cause it to overflow vertically and then test this new functionality, but it would be easier if we had a dedicated story.

Other than that, looks good! Great job! 😄

[wak327]

@Stefan3002 thanks for the review! I've added a "Paginated with scroll to top" story with 100 rows across 4 pages and scrollToTop enabled (it can be toggled from the controls), so you can scroll down to the pagination and change the page to see it. Percy will show one new snapshot for it.

[Stefan3002]

Hello! Thanks for the work here! Well done!

LGTM! 😄

[github-actions]

🎉 This PR is included in version 4.15.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀