svelte-headless-table icon indicating copy to clipboard operation
svelte-headless-table copied to clipboard

`props.sort.order` not updated while using the filter and pagination plugins

Open Ennoriel opened this issue 11 months ago • 4 comments

Thanks for your awesome library! :)

I've been struggling to understand where my problem comes from. I am using the filter and pagination plugins in order to use the component asyncronously with a fetch call. At the moment I do not make any fetch call but fake it with a promise/setTimeout. When doing so, the value of props.sort.order is not fully updated (sometimes using it as the condition of an if block works).

here is a REPL with my code: https://svelte.dev/repl/5f845383976b49e3a5edb4a0ad9a1953?version=4.2.0 (the order indication "up" and "down" does not work)

Do you know where this behavior comes from?

There is a workaround using the table state.

Ennoriel avatar Aug 18 '23 14:08 Ennoriel

I experienced this issue too. Can you share the workaround, while it's not fixed yet?

codenius avatar Sep 16 '23 10:09 codenius

@codenius You have access to a global sortKeys store: const { sortKeys } = pluginStates.sort;. You can use that to display anything you want

Ennoriel avatar Sep 21 '23 10:09 Ennoriel

came here for this

hartwm avatar Dec 22 '23 01:12 hartwm

@codenius You have access to a global sortKeys store: const { sortKeys } = pluginStates.sort;. You can use that to display anything you want

What's interesting although, that as soon as I add these to lines inside the script tag, it suddenly all works perfectly fine. There were no additional changes requierd in my case, which indicates a weird reactivity issue under the hood. In another table hover, this trick didn't work.

const { sortKeys } = pluginStates.sort;
$: $sortKeys

codenius avatar Jan 31 '24 14:01 codenius