From 2921502122d6219e61992a1cc91bb42302b96510 Mon Sep 17 00:00:00 2001
From: Nicolas Peugnet <nicolas@club1.fr>
Date: Mon, 12 Aug 2024 16:27:41 +0200
Subject: [PATCH] Make Overflow menu example more similar to react one

---
 docs/src/pages/framed/DataTable/DataTableAppendColumns.svelte | 4 ++--
 src/DataTable/Table.svelte                                    | 2 ++
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/docs/src/pages/framed/DataTable/DataTableAppendColumns.svelte b/docs/src/pages/framed/DataTable/DataTableAppendColumns.svelte
index dffa197f..d20ecc30 100644
--- a/docs/src/pages/framed/DataTable/DataTableAppendColumns.svelte
+++ b/docs/src/pages/framed/DataTable/DataTableAppendColumns.svelte
@@ -9,7 +9,7 @@
     { key: "name", value: "Name" },
     { key: "port", value: "Port" },
     { key: "rule", value: "Rule" },
-    { key: "overflow", empty: true },
+    { key: "overflow", empty: true, columnMenu: true },
   ];
 
   const rows = [
@@ -25,7 +25,7 @@
 <DataTable sortable headers="{headers}" rows="{rows}">
   <svelte:fragment slot="cell" let:cell>
     {#if cell.key === "overflow"}
-      <OverflowMenu flipped>
+      <OverflowMenu size="sm" flipped>
         <OverflowMenuItem text="Restart" />
         <OverflowMenuItem
           href="https://cloud.ibm.com/docs/loadbalancer-service"
diff --git a/src/DataTable/Table.svelte b/src/DataTable/Table.svelte
index c46f2246..db2c6cc0 100644
--- a/src/DataTable/Table.svelte
+++ b/src/DataTable/Table.svelte
@@ -37,6 +37,7 @@
       class:bx--data-table--zebra="{zebra}"
       class:bx--data-table--static="{useStaticWidth}"
       class:bx--data-table--sticky-header="{stickyHeader}"
+      class:bx--data-table--visible-overflow-menu="{true}"
       style="{tableStyle}"
     >
       <slot />
@@ -54,6 +55,7 @@
     class:bx--data-table--zebra="{zebra}"
     class:bx--data-table--static="{useStaticWidth}"
     class:bx--data-table--sticky-header="{stickyHeader}"
+    class:bx--data-table--visible-overflow-menu="{true}"
     {...$$restProps}
     style="{tableStyle}"
   >