carbon-components-svelte/tests/DataTableNestedHeaders.test.svelte
2024-11-11 21:35:48 -08:00

30 lines
643 B
Svelte

<script lang="ts">
import { DataTable } from "../types";
</script>
<DataTable
headers={[
{ key: "name", value: "Name" },
{ key: "protocol", value: "Protocol", width: "400px", minWidth: "40%" },
{ key: "port", value: "Port" },
{ key: "rule.name", value: "Rule", sort: false },
]}
rows={[
{
id: "a",
name: "Load Balancer 3",
protocol: "HTTP",
port: 3000,
"rule.name": "Round robin",
},
]}
>
<span slot="cell" let:cell let:row>
{cell.key === "rule.name"}
{#if cell.key === "name"}
{row.name} {row.id}
{:else}
{cell.value}
{/if}
</span>
</DataTable>