How do I change a table value in daisyui?

Question

I have the following table, made with daisyui and tailwind. category.urgency holds a boolean value, true/false.

Is there any way to change the boolean value once it is clicked (eg from true to false)?

<table class="table w-full">
        <!-- Headers -->
        <thead>
          <tr>
            <th />
            <th>Category</th>
            <th>Urgency</th>
          </tr>
        </thead>
        <tbody>
          {#each categories as category, i}
            <tr class="capitalize">
              <td>{i+1}</td>
              <td>{category.name}</td>
              <td>{category.urgency}</td>
            </tr>
          {/each}
        </tbody>
      </table>

I have trouble changing this value. on:click doesn't work as it is table data.

Answer 1

It's not a great idea to do on:click events on non clickable elemnents like td or div. Svelte warns you about this too.

It would be better to wrap the category in a button element.

Example: https://svelte.dev/repl/581b2f9931ce480584f0aa868f937904?version=3.55.0