<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>

<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}
/>