Edit and Sort combination support for DataTable

[crkives]

I'm submitting a ...

[x ] bug report
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://forum.primefaces.org/viewforum.php?f=57

Codesandbox Case (Bug Reports)
https://codesandbox.io/s/ox0kn6o559

Current behavior
On datatable with a editable and sortable column, if you sort then edit a column the inserted values will skip validation and resort as you type.

Expected behavior
The resort to not occur until after editing and validation is complete.

Minimal reproduction of the problem with instructions
https://codesandbox.io/s/ox0kn6o559

Click the table header for "last year sale" in the sandbox example to sort it ascending. Afterwards, click to edit the first column ( should be Song brand row at 17%). Edit this to 99. Song brand row will now jump to the bottom and you will now be editing the Microsoft brand row. If validation is provided then validation will not execute either for the Song brand record.

• React version:
  16.7.0

• PrimeReact version:
  3.1.2

• Browser: all

• Language: all

[ahmetcevahircinar]

I have same problem. Any fix or suggestion? Thank you.

[NellyHaglund]

Having the same problem. Any solution or fix yet? Thanks.

[mertsincan]

Hi,

Fixed for PrimeReact and PrimeVue. The DataTable component never stores the user's data. Therefore, in any state change, the sort and filter events are called again. That's why you can use onValueChange to send the data that changes during these events to the user. With this callback, you can sync the calculated data with the data you give to the DataTable. Exp;

const [products, setProducts] = useState([]);
const onValueChange = (value) => {
    setProducts(value);
}

...

<DataTable value={products} editMode="cell" onValueChange={onValueChange}>
   ...
</DataTable>

Best Regards,

[master117]

Won't this still make the sorting move while you type? Doesn't this lead to issues with pagination? Or is this only called after Changes are finished / onBlur is called?

[gaganjot07]

I still have this issue on version 6.5.0 The grid is sorted and when I click on a cell to edit the rows are re-ordered. I tried the onValueChange example above, however it seems that the grid fires onValueChange only when the user clicks on the cell to edit it. Ideally the event should be fired as soon as the data passed to the grid in the 'value' prop is changed.
I prepared a small example of the issue here
https://codesandbox.io/s/frosty-galois-ripfy?file=/src/App.tsx
Click on the add button on the top of the grid then try to edit the quantity column cell, the rows will be re-ordered on the first edit. Afterwards on subsequent edits the grid corrects itself. So the problem is only on first edit.

This issue is a blocker for me, any help will be appreciated.