Skip to content

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