Clicking a Toggle in DataTable without triggering row click

[omar2205]

I have a data table that contains a toggle. I want to click the row and be able to toggle the toggle.

<DataTable
  zebra
  headers={school_headers}
  rows={school_rows}
  class="selectable-table"
  on:click={goto_school}
>
  <Toolbar>
    <ToolbarSearch persistent shouldFilterRows bind:filteredRowIds />
  </Toolbar>

  <svelte:fragment slot="cell" let:cell let:row>
    {#if cell.key === 'status'}
      <Toggle
        hideLabel
        labelA=""
        labelB=""
        toggled={cell.value === 'ACTIVE'}
      />
    {:else}
      {cell.value}
    {/if}
  </svelte:fragment>
</DataTable>

[metonym]

Try stopping the click event propagation on the Toggle.

<Toggle
+ on:click={(e) => e.stopPropagation()}
  hideLabel
  labelA=""
  labelB=""
  toggled={cell.value === "ACTIVE"}
/>

[omar2205]

Cool. That did it!