DataTable: Infinite loop onValueChange

[patrickalcomendas]

Describe the bug

When enabling Row Group on DataTable and adding a filter, onValueChange loops infinitely if you try to store the data that is being passed.

Reproducer

https://codesandbox.io/p/sandbox/primereact-demo-forked-8nt3cw

PrimeReact version

10.0.5

React version

17.x

Language

ES6

Build / Runtime

Create React App (CRA)

Browser(s)

No response

Steps to reproduce the behavior

1. Fork https://codesandbox.io/s/8kd8w6.
2. Add a filter on the Country column.

4. Create a function for onValueChange callback to store the data.

5. Enable onValueChange callback by passing a function from step 3.

Expected behavior

The data that is being rendered by the datable should be available for processing. I need to get the filtered data in order to get the total of a column and display it in rowGroupFooterTemplate.

[melloware]

I don't think you can do this. You are getting OnValueChange then changing the value of the Table which causes a re-render of the table which triggers your onValueChange which triggers a re-render....

[patrickalcomendas]

@melloware the code replicator is not updating the value of the table back. The OnValueChange is calling a function setFilteredData to get current value rendered by the Table. setFilteredData is just setting filteredData and is not doing anything to filteredData at all after being set.

I understand that it will loop infinitely if I set the value of table back in OnValueChange, but that is not what I am doing. I will not be changing the value of the table, I just want to capture the changes after filtering, then render the footer (rowGroupFooterTemplate) of the rowGroup with type of subheader which is not going to change the value of the table.

[melloware]

Thanks let me take a closer look.

[melloware]

Interesting it doesn't happen in NextJS when I replicated your scenario but I can definitively see the error in CRA.

[FAMSTM]

Hi, I have a similar bug with 10.0.7 by using onValueChange to count the filtered rows (table goes back quickly to all data after filtering, or goes in infinite loop after sorting). Does anybody has a workaround to count the displayed rows after filtering?

[patrickalcomendas]

Interesting it doesn't happen in NextJS when I replicated your scenario but I can definitively see the error in CRA.

I tried it with NextJS as well, but the issue persists.

[melloware]

Weird I run your scenario in the NextJs showcase and it doesn't happen.

[patrickalcomendas]

Do you still have the codebox? I will double-check it against my code if I miss something.

[melloware]

No what I did was take your example and then in the PrimeReact showcase replicated your scenario which is Next 12 and I couldn't get it to infinite loop.