search

vincjo / datatables

A toolkit for creating datatable components with Svelte
https://vincjo.fr/datatables
MIT License
372 stars 15 forks source link

Sorting can lead to jumping when using `setRows` to refresh data #40

Closed josephmr closed 1 year ago

josephmr commented 1 year ago

Because the sorting only recalls the last sorted column, it can lead to rows jumping around when loading fresh data with setRows. This occurs when the most recent sorted column has many rows with identical values and previously sorting by another column. After setRows the table only recalls a single column of the sort order which may not produce the same sort as is currently displayed, causing some rows to jump. (sorry if this is a bit difficult to explain...)

You can see this in action here https://stackblitz.com/edit/vitejs-vite-xre2jw?file=src%2Flib%2FCounter.svelte

Steps:

  1. Sort by the "rest" column twice
  2. Sort by the "value" column
  3. Wait for the data to refresh and notice how the rows jump so the "rest" column changes

These steps are a bit finicky sometimes it resets from descending and sometimes from ascending. You can more easily reproduce at https://prun.josephmr.dev/orders/HLS sort by "UNITS" then wait roughly 10 seconds for the data to refresh.

I'm unsure the best method for resolving this. My main thought would be to store more than just the last column sort, but store the last N column sorts where N <= number of columns.

vincjo commented 1 year ago

Thank you for these clear explanations and examples. That's quite annoying...

Logging sorts makes sens, I'm going to look at this more closely

vincjo commented 1 year ago

As you suggested, storing multiple column sorts seems like the best solution at the moment. In 1.10.9, the last 3 sorts are logged then reapplied when using setRows().

https://vincjo.fr/datatables/test/jumping-sort

Also added handler.clearSort() method which remove all saved sorts