Adding component to DataTable?

[omar2205]

I want to have a toggle for each row in a DataTable. How would I do that?

[metonym]

You can use slotted cells to render custom markup per cell.

Svelte REPL

<script>
  import { DataTable, Toggle } from "carbon-components-svelte";
</script>

<DataTable
  headers={[
    { key: "name", value: "Name" },
    { key: "protocol", value: "Protocol" },
    { key: "port", value: "Port" },
    { key: "rule", value: "Rule" },
  ]}
  rows={Array.from({ length: 6 }).map((_, i) => ({
    id: i,
    name: "Load Balancer " + (i + 1),
    protocol: "HTTP",
    port: i % 3 ? (i % 2 ? 3000 : 80) : 443,
    rule: i % 3 ? "Round robin" : "DNS delegation",
  }))}
>
  <svelte:fragment slot="cell" let:row let:cell>
    {#if cell.key === "rule" && cell.value === "Round robin"}
      <Toggle size="sm" hideLabel />
    {:else}
      {cell.value}
    {/if}
  </svelte:fragment>
</DataTable>

[omar2205]

I'm very sorry. I just went back to the docs and saw the slotted examples.

[theetrain]

Note, the DataTable has built-in support for 'Selectable' checkboxes if you don't require the Toggle interaction: https://carbon-components-svelte.onrender.com/components/DataTable#selectable-rows-checkbox

<DataTable
+ selectable
  bind:selectedRowIds
  headers={headers}
  rows={rows}
/>