search

vincjo / datatables

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

[Bug] pagination styling unresponsive after updating data #57

Closed ghost closed 10 months ago

ghost commented 10 months ago

First of all: Love the tables!

I've encountered a small bug where updating the data for the table prevents the pagination to properly show what page is active. I initiate the table with the last known data, that is in a localstorage-based store. link The data is refreshed via an API-call using TanStack-query, and when this finished, the data in the LocalStorageStore is updated. After this update, the visual key for the active page in the pagination does not update.

I've provided a video to illustrate the issue.

https://github.com/vincjo/datatables/assets/128392483/96323c00-ce33-494e-8375-6cdf9410ed97

edit: i've noticed the same behaviour when filtering: The number of pages does not adapt, and the page-indicator does not visually update when changing pages

vincjo commented 10 months ago

Hello @JeroenLanceFree

Do you use handler.setRows(data) once your API-call is finished?

In your video it seems like rows are updated during the api call.

Your data must be injected into the DataHandler instance thanks to the setRows method. Then the derived stores (pagination, filters etc.) are able to update properly.

ghost commented 10 months ago

Hi @vincjo,

Sorry for the late response. I did test with setRows, and it did not solve the issue. However, I completely changed the use of the table (no pagination, but endless scroll)

I believe i used a reactive statement to create a new handler when the data renewed, and that resulted in the above video. I'll plan on reusing this component in another project, and i'll try to recreate. For now you can close it, since that will take some time.

Keep up the good work :)