How to preserve current page when calling setRows

[leonardodipace]

Maybe I have a weird use case, but I'm initializing a table using new TableHandler(data) and then I'm refetching my data every 10 seconds, updating the table using table.setRows(newData).

I've noticed that when the data updates, the current page resets to page one. This behavior is problematic for my application since the data changes frequently and retaining the current page is essential.

Is there a way to preserve the currently selected page even when data changes? Thanks!

[vincjo]

I guess it is possible inside your data fetching function.

const page = table.currentPage
table.setRows(data)
table.setPage(page)

Let me know if this induces a visible and annoying page break in your UI

[leonardodipace]

Thank you for the code snippet!
I would expect this to work, but I'm handling updates a little differently so it's not working for my use case:

// +page.svelte
<script lang="ts">
  const query = createQuery(...)
</script>

<List data={query.data} />


// List.svelte
<script lang="ts">
  let { data } = $props()
  
  const table = new TableHandler(data)
  
  $effect(() => {
    table.setRows(data)
    table.setPage(table.currentPage)
  })
</script>

With the above (partial) snippet, I'm not even able to change page, probably because $effect() kicks in immediately.
I also tried replacing $effect() with $derived(new TableHandler(data)).

What am I doing wrong? Is there a better way to handle this scenario?
PS: Amazing library!

[vincjo]

Thx 👍
We have similar patterns too.
If I remember correctly, inside $effect in List.svelte, when data changes, you can use a function instead of instructions, it should work. Not sure 100% though

// List.svelte
<script lang="ts">
  let { data } = $props()
  
  const table = new TableHandler(data)
  
  const update = () => {
    const page = table.currentPage
    table.setRows(data)
    table.setPage(page)
  } 
  $effect(() => {
    data // detects changes in data prop
    update() 
  })
</script>

[leonardodipace]

Amazing, this worked!
Thank you very much for your help, keep up the great work!