mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-20 12:23:02 +00:00
dce2dda72a* chore(docs): run "npx browserslist@latest --update-db" * chore(docs): upgrade carbon-icons-svelte to latest * refactor(docs): re-use styles from css/all.scss * chore(docs): add pnpm install command * chore(docs): upgrade prettier, prettier-plugin-svelte * docs(date-picker): improve "DatePicker in a modal" example * fix(docs): restore "scripts-markup-styles" svelte sort order * chore(docs): upgrade mdsvex * chore(deps-dev): bump prettier, prettier-plugin-svelte, svelte * refactor(docs): use svelte:fragment where applicable * fix(docs): include missing "options" in svelteSortOrder prettier config
38 lines
1.2 KiB
Svelte
38 lines
1.2 KiB
Svelte
<script>
|
|
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 },
|
|
];
|
|
|
|
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" },
|
|
];
|
|
</script>
|
|
|
|
<DataTable sortable headers="{headers}" rows="{rows}">
|
|
<svelte:fragment 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}
|
|
</svelte:fragment>
|
|
</DataTable>
|