addSelectedRows body props do not update with selected state

[fnimick]

Not entirely sure why, this is working in the REPL demo, yet doesn't work in my application. There are no errors logged to the console.

<script lang="ts">
  const table = createTable(tableData, {
    select: addSelectedRows(),
  });

  const columns = table.createColumns([
    table.display({
      id: "selected",
      header: "",
      cell: ({ row }, { pluginStates }) => {
        const { isSelected, isSomeSubRowsSelected } = pluginStates.select.getRowState(row);
        return createRender(SelectIndicator, { isSelected, isSomeSubRowsSelected });
      },
    }),
  ]);
  const { headerRows, rows, tableAttrs, tableBodyAttrs, pluginStates } = table.createViewModel(
    columns,
  );
  const { selectedDataIds } = pluginStates.select;
  $selectedDataIds = { "0": true }; // this sets the prop for row 0
</script>

<div>
  <div class="table-container w-full">
    <table class="table-hover table" {...$tableAttrs}>
      <thead>
        {#each $headerRows as headerRow (headerRow.id)}
          <Subscribe rowAttrs={headerRow.attrs()} let:rowAttrs>
            <tr {...rowAttrs}>
              {#each headerRow.cells as cell (cell.id)}
                <Subscribe attrs={cell.attrs()} let:attrs props={cell.props()}>
                  <th {...attrs}>
                    <Render of={cell.render()} />
                  </th>
                </Subscribe>
              {/each}
            </tr>
          </Subscribe>
        {/each}
      </thead>
      <tbody {...$tableBodyAttrs}>
        {#each $rows as row (row.id)}
          <Subscribe rowProps={row.props()} let:rowProps>
            <tr class:selected={rowProps.select.selected}>
              {#each row.cells as cell (cell.id)}
                <Subscribe attrs={cell.attrs()} let:attrs>
                  <td {...attrs}>
                    <Render of={cell.render()} />
                  </td>
                </Subscribe>
              {/each}
            </tr>
          </Subscribe>
        {/each}
      </tbody>
    </table>
  </div>
</div>

<style>
  .selected {
    background: rgb(148, 205, 255);
  }
</style>

And my SelectIndicator is:

<script lang="ts">
  import { writable, type Readable, type Writable } from "svelte/store";

  export let isSelected: Writable<boolean>;
  export let isSomeSubRowsSelected: Readable<boolean> | undefined = undefined;

  $: indeterminateStore = writable($isSomeSubRowsSelected ?? false);
</script>

<input
  type="checkbox"
  class="checkbox"
  bind:checked={$isSelected}
  bind:indeterminate={$indeterminateStore}
/>

The row's props for the selected state is only true for row 0, and false for all other rows. This does not update along with selections.

[fnimick]

Actually, this is very odd, I figured out what's happening.

If the incoming table data is updated via a call to invalidateAll() in sveltekit, the row props appear to get desynchronized from the actual table. This leads to behavior such as where checking a row marks a different row as checked, even though the id in $selectedDataIds is correct.

I suspect this is due to the row prop association to the row not being recalculated when the id assigned to each row changes. The row props are stored by index (I think), so if e.g. a row had id 1 and index 3, and then the data updates such that the row with id 1 is at index 1, checking that row now marks the row at index 3 as checked in row props.

[shawnphoffman]

Adding to this. The issue only pops up when linkDataSubRows: true. I'm experiencing the same issue when I have a basic table with sub rows that expand and the select plugin. It initializes with random rows being selected even though the selectedDataIds is empty. The only row that works as expected for me is id = '0', its children, and anything at the top-level without sub rows. Everything else misbehaves and never corrects itself.

[fnimick]

@shawnphoffman are you sure? in my case, I am not using subrows, yet I still experience this desynchronization from the table input data when the input data is updated with some rows removed and other rows added compared to the currently selected row set.

[hgoona]

@fnimick @shawnphoffman I think I experienced this issue also when i was using table.display <<< it seems to not maintain sync with the 'id' of the cell / row.

Use table.column instead and I think it should solve your issue! 🤞🏾

[jrsimp]

This sounds very similar to an issue I'm experiencing which I put together on the discussions board. I'm not using table.display, instead have been using table.column which hasn't resolved the problem.

https://github.com/bryanmylee/svelte-headless-table/discussions/186#discussion-6095437