carbon-components-svelte/tests/SelectableDataTable.test.svelte

<script lang="ts">
  import { DataTable } from "carbon-components-svelte";
  import type { ComponentProps } from "svelte";
  const headers = [
    { key: "name", value: "Name" },
    { key: "port", value: "Port" },
    { key: "rule", value: "Rule" },
  ] as const;

  const rows = [
    { id: "a", name: "Load Balancer 3", port: 3000, rule: "Round robin" },
    { id: "b", name: "Load Balancer 1", port: 443, rule: "Round robin" },
    { id: "c", name: "Load Balancer 2", port: 80, rule: "DNS delegation" },
    { id: "d", name: "Load Balancer 6", port: 3000, rule: "Round robin" },
    { id: "e", name: "Load Balancer 4", port: 443, rule: "Round robin" },
    { id: "f", name: "Load Balancer 5", port: 80, rule: "DNS delegation" },
  ];

  let selectedRowIds: ComponentProps<DataTable>["selectedRowIds"] = [];

  $: console.log("selectedRowIds", selectedRowIds);
</script>

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