Skip to content
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

DataTable: Pagination stops working when a column filter is applied #1388

Closed
rvstanchev opened this issue Jul 28, 2021 · 5 comments
Closed
Assignees
Labels
Type: Bug Issue contains a bug related to a specific component. Something about the component is not working
Milestone

Comments

@rvstanchev
Copy link

rvstanchev commented Jul 28, 2021

I'm submitting a ...

[x] bug report

CodeSandbox Case (Bug Reports)
Demo:
https://codesandbox.io/s/frosty-dubinsky-j8zvo
https://j8zvo.csb.app/
The provided demo shows a table with 32 rows.
Showing page other than the first one is not possible when a filter is applied.

Current behavior
In versions higher than 2.4.0 pagination (changing pages) of DataTable doesn't work when a filter is applied.

Initially pagination is working (because there's no filter applied). However if we apply a filter which results in more than one page of filtered results - pagination stops working (first page is shown and other pages can not be selected).

Note: This bug has been previously reported with issue #1305 but the proposed fix didn't resolve it.

Expected behavior
Users should be able to see paginated results when clicking on corresponding page buttons with or without filter applied.

Minimal reproduction of the problem with instructions
Steps to reproduce (using the provided codesandbox demo):

  1. Initial load - pagination is working.
  2. Apply a filter resulting in at least two pages (for example "1" - the letter for number one).
  3. Table shows paginated results (total of 13 results, split into two pages).
  4. As long as filter is applied, pages can not be selected (first page always stays on screen).
  5. The only way we can make the pagination work is to clear the filter (use "clear filter" button).

Last version in which pagination with applied filter works is 2.4.0.

Demo:

https://codesandbox.io/s/frosty-dubinsky-j8zvo

What is the motivation / use case for changing the behavior?
The described bug seriously and negatively impacts UX.

Please tell us about your environment:

  • Vue version: 2.6.14
  • PrimeVue version: 2.4.2
  • Browser: Reproduced in Chrome 91.0, Firefox 90.0
@Rocking80
Copy link

Hi @rvstanchev , thanks for reporting this issue. I am going to report the same but see you already raised it. :)

My environment:

  • Vue version: 2.6.12
  • PrimeVue version: 2.4.2
  • Browser: Reproduced in Chrome 91.0, Firefox 90.0

@Rocking80
Copy link

Hi @cagataycivici , I know you are very busy. But could you please help to take a look at this issue or assign it to others to fix? This bug impact the filter functionality.
I have very short knowledge on JS so sorry cannot help in short time.

@lguibr
Copy link

lguibr commented Aug 11, 2021

This bug happens on the V2 documentation on the DataTable Filter section too, if you apply any filter you will be not able to change the page on the paginator.

Having the same issue here, the pull request #1374 already solve this problem just need to be merged by a maintainer, I already test the fix, and works fine, looks pretty much like the fix applied on the v3 ( #977 ), please help us 😭 ❤️

@cagataycivici cagataycivici self-assigned this Aug 19, 2021
@cagataycivici cagataycivici added the Type: Bug Issue contains a bug related to a specific component. Something about the component is not working label Aug 19, 2021
@cagataycivici cagataycivici added this to the 2.5.2 milestone Aug 19, 2021
@cagataycivici
Copy link
Member

Will check for 2.5.2 as it only seems to apply v2.

@Rocking80
Copy link

Thanks @cagataycivici , could I know the schedule about 2.5.2 release?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Type: Bug Issue contains a bug related to a specific component. Something about the component is not working
Projects
None yet
Development

No branches or pull requests

5 participants