Make Overflow menu example more similar to react one

This commit is contained in:
Nicolas Peugnet 2024-08-12 16:27:41 +02:00
commit 2921502122
2 changed files with 4 additions and 2 deletions

View file

@ -9,7 +9,7 @@
{ key: "name", value: "Name" }, { key: "name", value: "Name" },
{ key: "port", value: "Port" }, { key: "port", value: "Port" },
{ key: "rule", value: "Rule" }, { key: "rule", value: "Rule" },
{ key: "overflow", empty: true }, { key: "overflow", empty: true, columnMenu: true },
]; ];
const rows = [ const rows = [
@ -25,7 +25,7 @@
<DataTable sortable headers="{headers}" rows="{rows}"> <DataTable sortable headers="{headers}" rows="{rows}">
<svelte:fragment slot="cell" let:cell> <svelte:fragment slot="cell" let:cell>
{#if cell.key === "overflow"} {#if cell.key === "overflow"}
<OverflowMenu flipped> <OverflowMenu size="sm" flipped>
<OverflowMenuItem text="Restart" /> <OverflowMenuItem text="Restart" />
<OverflowMenuItem <OverflowMenuItem
href="https://cloud.ibm.com/docs/loadbalancer-service" href="https://cloud.ibm.com/docs/loadbalancer-service"

View file

@ -37,6 +37,7 @@
class:bx--data-table--zebra="{zebra}" class:bx--data-table--zebra="{zebra}"
class:bx--data-table--static="{useStaticWidth}" class:bx--data-table--static="{useStaticWidth}"
class:bx--data-table--sticky-header="{stickyHeader}" class:bx--data-table--sticky-header="{stickyHeader}"
class:bx--data-table--visible-overflow-menu="{true}"
style="{tableStyle}" style="{tableStyle}"
> >
<slot /> <slot />
@ -54,6 +55,7 @@
class:bx--data-table--zebra="{zebra}" class:bx--data-table--zebra="{zebra}"
class:bx--data-table--static="{useStaticWidth}" class:bx--data-table--static="{useStaticWidth}"
class:bx--data-table--sticky-header="{stickyHeader}" class:bx--data-table--sticky-header="{stickyHeader}"
class:bx--data-table--visible-overflow-menu="{true}"
{...$$restProps} {...$$restProps}
style="{tableStyle}" style="{tableStyle}"
> >