frontend:table: fix the rows-per-page settings persist among views

[ChayanDass]

Summary

This PR adds persistent rows per page functionality to tables by storing the selected rows per page value in localStorage . Users can now change the number of rows displayed per page, and their preference is automatically saved and restored on page refresh.

Related Issue

Fixes #3227

Changes

• Added localStorage persistence for rows per page - When users change the rows per page in any table, the value is automatically saved to localStorage with key tables_rows_per_page.
• remove useMemo for fetching getTablesRowsPerPage
• I changed the default perPage value in the URL to match the storeRowsPerPageOptions[0] value, ensuring shared links reflect the actual table state.

Steps to Test

• Open a cluster resource table (e.g. Workloads → Namespaces).
• Change the rows-per-page value (e.g. 25 or 50).
• Reload the page or switch to another view and come back.
• Confirm the same rows-per-page value is still selected (persisted via localStorage).

Note: We should avoid using an id for reflectInURL, as it makes the URL unnecessarily long, for example:
http://localhost:3000/c/minikube/?headlamp-cluster.overview.events.perPage=25&headlamp-cluster.overview.events.p=3

[ChayanDass]

HI @illume ..

I think we can remove useSettings here. getTablesRowsPerPage already reads the value from localStorage, and useSettings also persists the same value there.

  const storeRowsPerPageOptions = useSettings('tableRowsPerPageOptions');
  const rowsPerPageOptions = rowsPerPage || storeRowsPerPageOptions;
  const defaultRowsPerPage = getTablesRowsPerPage(rowsPerPageOptions[0]);

Also, we can set reflectInURL to default true, to set the table state values at the URL, which makes it shareable, with preserved table format
.

[ChayanDass]

I removed unnecessary useMemo usage and now pass reflectInURL from parent components. I also noticed that perPage is omitted from the URL when it matches the local default, but defaults can differ between users(if the perpage value already updated and stored in localstorage). This can cause shared links to render different table views, so it may be better to always include perPage in the URL when URL reflection is enabled.

[illume]

If you want, you could improve the git message subject body. By including some of the explanation from the PR description and your comment.

[illume]

Can you please add some steps to test in the PR description?

[Copilot]

Pull request overview

This PR adds persistent rows-per-page functionality to tables by storing the selected value in localStorage. When users change the number of rows displayed, their preference is saved using the tables_rows_per_page key and automatically restored on future page visits. The implementation uses new helper functions getTablesRowsPerPage and setTablesRowsPerPage to manage localStorage operations.

Changes:

• Added localStorage persistence for rows per page using helper functions
• Modified Table component to call setTablesRowsPerPage when pagination changes
• Removed useMemo optimizations from defaultRowsPerPage, initialState, and state objects
• Changed ResourceTable default reflectInURL value to always enable URL reflection when id is present

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 5 comments.

File	Description
frontend/src/components/common/Table/Table.tsx	Added localStorage persistence call in onPaginationChange; modified URL state handling to always use 'perPage' key; removed useMemo optimizations
frontend/src/components/common/Resource/ResourceTable.tsx	Changed default reflectInURL from undefined to template literal using id
frontend/src/components/common/Table/snapshots/Table.ReflectInURL.stories.storyshot	Updated snapshot to include perPage=5 parameter in URL
frontend/src/components/common/Table/snapshots/Table.ReflectInURLWithPrefix.stories.storyshot	Updated snapshot to include mySuperTable.perPage=5 parameter in URL

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[ChayanDass]

updated, PTAL!

[illume]

nit, you could fix the first letter of the subject after the context to be capitalized. Also add some of the Changes part of the PR description into the git message body, and any Why you can think of that may help people.

frontend: table: Add row-per-page persist and update url

[illume]

Thanks! 🎉

[k8s-ci-robot]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: ChayanDass, illume

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Details

Needs approval from an approver in each of these files:

• OWNERS [illume]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[ChayanDass]

updated, Thanks!