primeng icon indicating copy to clipboard operation
primeng copied to clipboard
verified publisher icon primefaces

Component: P-Table's state pagination does not restore if signal's initial value is '[]'

Open ross1296 opened this issue 1 year ago • 7 comments

Describe the bug

I am using PrimeNG for tables (p-table) with the built in session state, and NgRx SignalStore's withEntities(). I perform a HTTP request and then patch the entity state with the result.

I then use the signal to populate the table, like so: [value]="store.entities()"

The issue is that the default/initial value of withEntities()'s entities() signal is []

When PrimeNG goes to restore the state, the pagination is not restored because of this. So if I was on page 3, navigate away and come back to the table, it goes back to page 1. Column sorts and filters are maintained.

This issue does not happen if the initital value is undefined, but the default value of withEntities()'s entities() signal cannot be changed and is, by design, suppose to be [].

Environment

  • "primeng": "^17.18.9",
  • "@ngrx/signals": "^18.0.2",

Reproducer

No response

Angular version

18.2.2

PrimeNG version

17.18.9

Build / Runtime

TypeScript

Language

TypeScript

Node version (for AoT issues node --version)

20.16.0

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

No response

ross1296 avatar Oct 10 '24 16:10 ross1296

Due to PrimeNG team's busy roadmap, this issue is available for anyone to work on. Make sure to reference this issue in your pull request. :sparkles: Thank you for your contribution! :sparkles:

github-actions[bot] avatar Nov 19 '24 11:11 github-actions[bot]

I have run into this same issue, however it only occurs when using filters and SignalStore, but not if using a regular Signal as the data source.

  • "primeng": "^19.0.0"
  • "@ngrx/signals": "^19.0.0"

I have created a Stackblitz to reproduce the issue, link below, and attached a screen recording. Demo is forked from the PrimeNG Table Pagination example. In my demo, you can switch between the Signal and SignalStore sources, and enable/disable the header filter.

https://stackblitz.com/edit/73368ji3-d3fqvemp?file=src%2Fapp%2Ftable-paginator-programmatic-demo.ts

https://github.com/user-attachments/assets/3dfb2352-77d6-4625-8adf-1001c18baf22

Steps to Reproduce

(correct and incorrect behavior based on data source and header filter options)

  1. Refresh page
  2. Select "Signal" as source
  3. Don't use header filter
  4. Note that table is on Page 1
  5. Click "Increment Balance" in any row: the balance value will increment by 1
  6. Click on the paginator to move to Page 5
  7. Click "Increment Balance" in any row: the balance value will increment by 1
  8. Note that the table is still on Page 5 => CORRECT BEHAVIOR

========

  1. Refresh page
  2. Select "Signal" as source
  3. Check the "Use header filter" box
  4. Note that table is on Page 1
  5. Click "Increment Balance" in any row: the balance value will increment by 1
  6. Click on the paginator to move to Page 5
  7. Click "Increment Balance" in any row: the balance value will increment by 1
  8. Note that the table is still on Page 5 => CORRECT BEHAVIOR

=========

  1. Refresh page
  2. Select "SignalStore" as source
  3. Don't use header filter
  4. Note that table is on Page 1
  5. Click "Increment Balance" in any row: the balance value will increment by 1
  6. Click on the paginator to move to Page 5
  7. Click "Increment Balance" in any row: the balance value will increment by 1
  8. Note that the table is still on Page 5 => CORRECT BEHAVIOR

=========

  1. Refresh page
  2. Select "SignalStore" as source
  3. Check the "Use header filter" box
  4. Note that table is on Page 1
  5. Click "Increment Balance" in any row: the balance value will increment by 1
  6. Click on the paginator to move to Page 5
  7. Click "Increment Balance" in any row: the balance value will increment by 1
  8. Note that the table paginator has reset to Page 1. => INCORRECT BEHAVIOR

mplgn avatar Jan 28 '25 11:01 mplgn

@ross1296 - did you ever get this working? I've run into the same issue, just added details to your ticket. The only way I found to get around it is to not use the PrimeNG column filters (p-columnFilter) and instead use InputText or Select directly as filters.

mplgn avatar Jan 28 '25 11:01 mplgn

@ross1296 - did you ever get this working? I've run into the same issue, just added details to your ticket. The only way I found to get around it is to not use the PrimeNG column filters (p-columnFilter) and instead use InputText or Select directly as filters.

Sadly not. Which is a total shame. I've been meaning to see how easy of a fix it would be and PR it myself if it's reasonable, but haven't found the time.

ross1296 avatar Jan 28 '25 11:01 ross1296

I have run into this same issue, however it only occurs when using filters and SignalStore, but not if using a regular Signal as the data source.

* "primeng": "^19.0.0"

* "@ngrx/signals": "^19.0.0"

I have created a Stackblitz to reproduce the issue, link below, and attached a screen recording. Demo is forked from the PrimeNG Table Pagination example. In my demo, you can switch between the Signal and SignalStore sources, and enable/disable the header filter.

https://stackblitz.com/edit/73368ji3-d3fqvemp?file=src%2Fapp%2Ftable-paginator-programmatic-demo.ts 2025-01-28_06-12-12.mp4

Steps to Reproduce

(correct and incorrect behavior based on data source and header filter options)

1. Refresh page

2. Select "Signal" as source

3. Don't use header filter

4. Note that table is on Page 1

5. Click "Increment Balance" in any row: the balance value will increment by 1

6. Click on the paginator to move to Page 5

7. Click "Increment Balance" in any row: the balance value will increment by 1

8. Note that the table is still on Page 5 _=> CORRECT BEHAVIOR_

========

1. Refresh page

2. Select "Signal" as source

3. Check the "Use header filter" box

4. Note that table is on Page 1

5. Click "Increment Balance" in any row: the balance value will increment by 1

6. Click on the paginator to move to Page 5

7. Click "Increment Balance" in any row: the balance value will increment by 1

8. Note that the table is still on Page 5 _=> CORRECT BEHAVIOR_

=========

1. Refresh page

2. Select "SignalStore" as source

3. Don't use header filter

4. Note that table is on Page 1

5. Click "Increment Balance" in any row: the balance value will increment by 1

6. Click on the paginator to move to Page 5

7. Click "Increment Balance" in any row: the balance value will increment by 1

8. Note that the table is still on Page 5 _=> CORRECT BEHAVIOR_

=========

1. Refresh page

2. Select "SignalStore" as source

3. Check the "Use header filter" box

4. Note that table is on Page 1

5. Click "Increment Balance" in any row: the balance value will increment by 1

6. Click on the paginator to move to Page 5

7. Click "Increment Balance" in any row: the balance value will increment by 1

8. Note that the table paginator has reset to Page 1. **=> INCORRECT BEHAVIOR**

Addition information to this:

If you follow the documentation about table state here: https://primeng.org/table#stateful

And add

stateStorage="session"
stateKey="statedemo-session"

To the table, then refreshing the entire application (using SignalStore) restores the page. So the table is capable of restoring page on data changes, given that the store will run its onInit method on a full refresh, it just seems to be any change to [value] resets the paging to 0.

ross1296 avatar Feb 18 '25 11:02 ross1296

@mertsincan Would it be possible to re-triage this issue, given the above added detail? Appears to be related to https://github.com/primefaces/primeng/issues/16472 too

ross1296 avatar Feb 18 '25 11:02 ross1296

Any update on that ? Still exists on 20.3.0 ?

emplu-de avatar Nov 27 '25 14:11 emplu-de