renderComponet not sorting

[xulioc]

I have a table with a a renderComponet column. When I sort the table, the rows move according to the sorting but the renderComponent column is not sorted. The rendered component in this row dont move no matter which column I select for sorting.

This is my column definition:

{
  key: 'last_seen',
  title: 'ONLINE',
  value: (v: any) => v.last_seen,
  sortable: true,
  renderComponent: ScreenOnline
}

Inside the copmonent I just have a badge that shows diferent color depending on last_seen parameter.

{#if elapsed_minutes <= 60}
    <span class="badge badge-success">{elapsedString}</span>
{:else if elapsed_minutes <= 60 * 24}
    <span class="badge badge-warning">{elapsedString}</span>
{:else}
    <span class="badge badge-error">{elapsedString}</span>
{/if}

Using Svelte and "svelte-table": "^0.5.2"

Am I missing something?

Thanks for this great project!

Xulio.

[dasDaniel]

you probably are missing a keyed block

have a look at the component in https://svelte.dev/repl/35a5b1180dd84374ac3df1420f776305 for example

it might look something like (if you have a unique id field)

{#key row.id}
    {#if elapsed_minutes <= 60}
    <span class="badge badge-success">{elapsedString}</span>
    {:else if elapsed_minutes <= 60 * 24}
    <span class="badge badge-warning">{elapsedString}</span>
    {:else}
    <span class="badge badge-error">{elapsedString}</span>
    {/if}
{/key}

This could probably be documented better and probably be handled using the rowKey parameter.

[xulioc]

I've added keyed block inside component but still not working. My row.id field is uinique like 49640f4e-b893-4634-b399-77d77ca2a2c9 Still cannot understand if row.id changes when sorting

In the example the Status component is working properly when sorting so I need to try harder :)

Any hint is welcome.

Thanks!

[dasDaniel]

you could include the id somewhere in the component's template to see if it is changing.

[dasDaniel]

if you have a repl to share, I can have a look.

[xulioc]

I think has nothing to do with svelte-table but my understanding of svelte... Maybe you can help.

https://svelte.dev/repl/bb48326d52c740fab51a41601d9dfeff?version=3.55.0

[dasDaniel]

agreed 😊 the problem you have will not be resolved by adding a key.

the issue is that the variables you have declared are not reactive. The table reuses the component. So when the row value updates, the component should react to the change. You have your variables defined as consts, and there is not going to be a change that would update these rendered values.

the will not re-render

const last = new Date(row.last_seen);
const now = Date.now();
const elapsed = now - last.getTime();
const elapsed_minutes = elapsed / 1000 / 60;
const elapsedString = toElapsed(elapsed / 1000 / 60);

but wrap them in a reactive block, and they will update, and you might not even need the keyed block

let elapsedString, elapsed_minutes;
$: {
  const last = new Date(row.last_seen);
  const now = Date.now();
  const elapsed = now - last.getTime();
  elapsed_minutes = elapsed / 1000 / 60;
  elapsedString = toElapsed(elapsed / 1000 / 60);
}

have a look at https://svelte.dev/docs#component-format-script-3-$-marks-a-statement-as-reactive

or at least go through these quickly, they will help you understand how reactivity in svelte works better

• https://svelte.dev/tutorial/reactive-assignments
• https://svelte.dev/tutorial/reactive-declarations the solution could be implemented this way too
• https://svelte.dev/tutorial/reactive-statements but I opted for reactive block
• https://svelte.dev/tutorial/updating-arrays-and-objects though not directly related but worth being aware of too

[xulioc]

It works!

Thanks for your help.

$ usally make things work better ;)