added #key before rendering col.renderComponent

[RicardoViteriR]

Custom component that are passed using the renderComponent prop are not updating after changes occurred when using filters on other columns.

Wrapping the code in {#key c_rows} {/key} fixes the issue.

              {#key c_rows}
                {#if col.renderComponent}
                  <svelte:component
                    this={col.renderComponent.component || col.renderComponent}
                    {...col.renderComponent.props || {}}
                    {row}
                    {col}
                  />
                {:else if col.parseHTML}
                  {@html col.renderValue
                    ? col.renderValue(row, n, colIndex)
                    : col.value(row, n, colIndex)}
                {:else}
                  {col.renderValue
                    ? col.renderValue(row, n, colIndex)
                    : col.value(row, n, colIndex)}
                {/if}
              {/key}

[dasDaniel]

Can you describe how to reproduce the issue? I would like to understand the scenario where the update is not happening.

[RicardoViteriR]

Sure, here is the REPL, use the inputs to filter, look at the value of the last column - it does not change

https://svelte.dev/repl/e91cf5854bec4920af128ba7c3d2d7bc?version=3.47.0

[dasDaniel]

I'm hesitant to wrap the column with key. This will force a re-render when not necessary and have performance implications.

The reason you are seeing the issue is due to the way the component assigns the first_name

<script>
  export let row;
  const {first_name} = row
</script>

{first_name}

using const {first_name} = row will stop the reactivity, because it assigns the value at creation.

if you switch it to use the reactive assignment $: first_name = row.first_name or use row.first_name in the template, it should work.

<script>
  export let row;
  $: first_name = row.first_name
</script>

{first_name}

[RicardoViteriR]

Okay, great thank you. I just tested it. I had no idea that we would need to make the variable reactive.