After creating a store filled with user data, I am looking to sort the users based on different criteria.
store.js
export const users = writable([
{
"id": 11,
"name": "Kepler",
},
{
"id": 13,
"name": "Planck",
},
// more users added here
To achieve this, I am utilizing orderBy from Lodash.
Case A: Without using keyed each blocks, orderBy functions correctly.
App.svelte
{#each _.orderBy($users, [param], [order]) as user}
<div>{user.id} {user.name}</div>
{/each}
However, when making changes to the store or removing items, updates do not work properly. You can find a detailed explanation in Svelte's documentation.
Case B: With a keyed each block, updates function as expected but orderBy does not.
App.svelte
{#each _.orderBy($users, [param], [order]) as user (user.id)}
<div>{user.id} {user.name}</div>
{/each}
Check out a real example on Svelte REPL here.
Visit the link and use the buttons to switch between ascending and descending order.
I may be overlooking something related to keyed each blocks and would appreciate insights from Svelte experts to resolve this issue.