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

<script lang="ts">
  import { DataTable, OverflowMenu, OverflowMenuItem } from "carbon-components-svelte";

  const headers = [
    { key: "name", value: "Name" },
    { key: "port", value: "Port" },
    { key: "rule", value: "Rule" },
    { key: "overflow", empty: true },
  ] as const;

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

<DataTable
  sortable
  headers="{headers}"
  rows="{rows}"
>
  <span slot="cell" let:cell>
    {#if cell.key === "overflow"}
      <OverflowMenu flipped>
        <OverflowMenuItem text="Restart" />
        <OverflowMenuItem
          href="https://cloud.ibm.com/docs/loadbalancer-service"
          text="API documentation"
        />
        <OverflowMenuItem danger text="Stop" />
      </OverflowMenu>
    {:else}{cell.value}{/if}
  </span>
</DataTable>