Skip to content

fix: reset page when filtering reduces items and page is invalid #391

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

GerardoIbarra
Copy link

@GerardoIbarra GerardoIbarra commented May 23, 2025

Type

What types of changes does your code introduce?

Put an x in the boxes that apply_

  • Fix
  • Feature
    -(?)

🛠 Fix: Reset pagination to page 1 when filtering reduces total pages
Problem

When a user navigates to a higher page (e.g., page 3) and then applies filters that reduce the number of results, the current page can exceed the maximum available pages, causing the table to show no data.
Solution

Added a watch on items.length and rowsPerPageRef to check if the current page is greater than the new maximum number of pages. If so, it resets the pagination to page 1.

Code :

watch(
  () => [items.value.length, rowsPerPageRef.value],
  () => {
    const maxPage = Math.ceil(items.value.length / rowsPerPageRef.value);
    if (currentPaginationNumber.value > maxPage && maxPage > 0) {
      updatePage(1);
    }
  }

);
Why this matters

This improves UX by ensuring filtered results are always visible, and prevents the table from displaying "No Available Data" when there actually are results, just not on the current page.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant