How do I update the value in a cell?

[MegaMech]

I have a column containing bool data. Each cells bool gets toggled onclick.

table.column({
            header: 'Col',
            accessor: 'col',
            cell: ({ value }) => createRender(Icon, {bool: value})
                .on('click', e => value = !value)
          }),

However, this doesn't appear to update the data nor the html

Icons.svelte

<script lang="ts">

    export let bool: Number = 0;
</script>
<div on:click>
    {#if bool}
    Y
    {:else}
    N
    {/if}
</div>

Looking at the object that cell: (displayCell, state) returns. It looks as if I can displayCell.row.original.data.set or .update but I get undefined errors.

Update:

table.column({
            header: 'Col',
            accessor: 'col',
            cell: ({row}) => createRender(Icons, row.cells[9].value)
                .on('click', (e) => toggleBoolean(row.cells[9]))
          }),

    function toggleBoolean(obj) {
        return obj.value = !obj.value;
    }

This nearly works but nothing gets updated and the .value is not accurate despite the row.cells[9]

In the module adding export let bool and createRender(..., bool: value) initializes the table correctly. but it doesn't get updated by the onclick event. I tried subscribing to state and using set/update but despite those functions existing on the object they also return undefined when I try to use them.

[bryanmylee]

Svelte Headless Table uses a single-source-of-truth model where all derived data comes from $data, and all changes must be applied to $data.

I should make this clearer somehow, but you shouldn't update data by updating any internal references.

table.column({
  header: 'Col',
  accessor: 'col',
  // value is just a primitive here, updating it will not update $data.
  cell: ({ value }) => createRender(Icon, {bool: value})
    .on('click', e => value = !value)
}),

table.column({
  header: 'Col',
  accessor: 'col',
  // row is a reference to the `row` object in the view model. Changes to `row` may not
  // be propagated to $data.
  cell: ({ row }) => createRender(Icons, row.cells[9].value)
    .on('click', (e) => toggleBoolean(row.cells[9]))
}),

Instead you should be updating $data whenever you need data to change. You can refer to this REPL for examples.

table.column({
  header: 'Col',
  accessor: 'col',
  cell: (cell) => createRender(Icon, {bool: cell.value})
    .on('click', () => {
      // Get the data item in `$data` that corresponds to the current row using `dataId`.
      const item = $data[cell.row.dataId];
      // Update the $data store based on the current data item.
      $data[cell.row.dataId].col = !item.col
    })
  },
}),