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

<script lang="ts">
  import {
    DataTable,
    DataTableSkeleton,
    Toolbar,
    ToolbarContent,
    ToolbarSearch,
    ToolbarMenu,
    ToolbarMenuItem,
    Button,
    Link,
  } from "../types";
  import Launch16 from "carbon-icons-svelte/lib/Launch16";

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

  function sort(a: any, b: any) {
    if (new Date(a) > new Date(b)) return 1;
    return 0;
  }
</script>

<DataTable headers="{headers}" rows="{rows}" />

<DataTable headers="{headers}" rows="{rows}">
  <span slot="cell-header" let:header>
    {#if header.key === 'port'}
      {header.value}
      (network)
    {:else}{header.value}{/if}
  </span>
  <span slot="cell" let:cell>
    {#if cell.key === 'rule' && cell.value === 'Round robin'}
      <Link
        inline
        href="https://en.wikipedia.org/wiki/Round-robin_DNS"
        target="_blank"
      >
        {cell.value}
        <Launch16 />
      </Link>
    {:else}{cell.value}{/if}
  </span>
</DataTable>

<DataTable
  title="Load balancers"
  description="Your organization's active load balancers."
  headers="{headers}"
  rows="{rows}"
/>

<DataTable
  title="Load balancers"
  description="Your organization's active load balancers."
  headers="{headers}"
  rows="{rows}"
>
  <Toolbar>
    <ToolbarContent>
      <ToolbarSearch />
      <ToolbarMenu>
        <ToolbarMenuItem primaryFocus>Restart all</ToolbarMenuItem>
        <ToolbarMenuItem href="https://cloud.ibm.com/docs/loadbalancer-service">
          API documentation
        </ToolbarMenuItem>
        <ToolbarMenuItem danger>Stop all</ToolbarMenuItem>
      </ToolbarMenu>
      <Button>Create balancer</Button>
    </ToolbarContent>
  </Toolbar>
</DataTable>

<DataTable
  size="short"
  title="Load balancers"
  description="Your organization's active load balancers."
  headers="{headers}"
  rows="{rows}"
>
  <Toolbar size="sm">
    <ToolbarContent>
      <ToolbarSearch />
      <ToolbarMenu>
        <ToolbarMenuItem primaryFocus>Restart all</ToolbarMenuItem>
        <ToolbarMenuItem href="https://cloud.ibm.com/docs/loadbalancer-service">
          API documentation
        </ToolbarMenuItem>
        <ToolbarMenuItem danger>Stop all</ToolbarMenuItem>
      </ToolbarMenu>
      <Button>Create balancer</Button>
    </ToolbarContent>
  </Toolbar>
</DataTable>

<DataTable zebra headers="{headers}" rows="{rows}" />

<DataTable size="tall" headers="{headers}" rows="{rows}" />

<DataTable size="short" headers="{headers}" rows="{rows}" />

<DataTable size="compact" headers="{headers}" rows="{rows}" />

<DataTable sortable headers="{headers}" rows="{rows}" />

<DataTable
  sortable
  title="Load balancers"
  description="Your organization's active load balancers."
  headers="{[{ key: 'name', value: 'Name' }, { key: 'protocol', value: 'Protocol' }, { key: 'port', value: 'Port' }, { key: 'cost', value: 'Cost', display: (cost) => cost + ' €' }, { key: 'expireDate', value: 'Expire date', display: (date) => new Date(date).toLocaleString(), sort }]}"
  rows="{[{ id: 'a', name: 'Load Balancer 3', protocol: 'HTTP', port: 3000, cost: 100, expireDate: '2020-10-21' }, { id: 'b', name: 'Load Balancer 1', protocol: 'HTTP', port: 443, cost: 200, expireDate: '2020-09-10' }, { id: 'c', name: 'Load Balancer 2', protocol: 'HTTP', port: 80, cost: 150, expireDate: '2020-11-24' }, { id: 'd', name: 'Load Balancer 6', protocol: 'HTTP', port: 3000, cost: 250, expireDate: '2020-12-01' }, { id: 'e', name: 'Load Balancer 4', protocol: 'HTTP', port: 443, cost: 550, expireDate: '2021-03-21' }, { id: 'f', name: 'Load Balancer 5', protocol: 'HTTP', port: 80, cost: 400, expireDate: '2020-11-14' }]}"
/>

<DataTable expandable headers="{headers}" rows="{rows}">
  <div slot="expanded-row" let:row>
    <pre>
      {JSON.stringify(row, null, 2)}
    </pre>
  </div>
</DataTable>

<DataTable batchExpansion headers="{headers}" rows="{rows}">
  <div slot="expanded-row" let:row>
    <pre>
      {JSON.stringify(row, null, 2)}
    </pre>
  </div>
</DataTable>

<DataTableSkeleton />

<DataTableSkeleton
  headers="{['Name', 'Protocol', 'Port', 'Rule']}"
  rows="{10}"
/>

<DataTableSkeleton showHeader="{false}" showToolbar="{false}" />

<DataTableSkeleton showHeader="{false}" showToolbar="{false}" size="tall" />

<DataTableSkeleton showHeader="{false}" showToolbar="{false}" size="short" />

<DataTableSkeleton showHeader="{false}" showToolbar="{false}" size="compact" />