From a3a50ac8d8ba6497a50fe6a885c4008d02214011 Mon Sep 17 00:00:00 2001
From: haild173094 <haileduc1111@gmail.com>
Date: Tue, 15 Jul 2025 14:43:05 +0700
Subject: [PATCH 1/4] Update: trigger resize scroll bar when tableElement width
 is changed

---
 src/components/IndexTable/IndexTableBase.vue | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/src/components/IndexTable/IndexTableBase.vue b/src/components/IndexTable/IndexTableBase.vue
index b0a729c8..84ce2a06 100644
--- a/src/components/IndexTable/IndexTableBase.vue
+++ b/src/components/IndexTable/IndexTableBase.vue
@@ -393,6 +393,22 @@ watch(
   triggerResizeTableScrollBar,
 );
 
+watch(
+  () => [tableElement.value?.offsetWidth, scrollableContainerElementRef.value],
+  () => {
+    if (scrollableContainerElementRef.value) {
+      const { scrollableContainerRef } = scrollableContainerElementRef.value;
+      scrollableContainerElement.value = scrollableContainerRef;
+    }
+
+    if (tableElement.value) {
+      resizeTableScrollBar();
+      // Resize header headings after the scroll bar is resized
+      triggerResizeTableHeadings();
+    }
+  }
+);
+
 watch(
   () => tableInitialized.value,
   () => {
@@ -484,6 +500,7 @@ const handleResize = () => {
 
 const handleScrollContainerScroll = (tmpCanScrollLeft: boolean, tmpCanScrollRight: boolean) => {
   if (!scrollableContainerElement.value || !scrollBarElement.value) {
+    console.log('No scrollableContainerElement or scrollBarElement found');
     return;
   }
 
@@ -559,8 +576,10 @@ function resizeTableScrollBar() {
       `${tableElement.value.offsetWidth - SCROLL_BAR_PADDING}px`,
     );
 
+
     hideScrollContainer.value = scrollContainerElement.value?.offsetWidth === tableElement.value?.offsetWidth;
   }
+  console.log(hideScrollContainer.value, scrollContainerElement.value?.offsetWidth, tableElement.value?.offsetWidth, tableInitialized.value);
 }
 
 function triggerResizeTableScrollBar() {

From ff72ec1b809612a9453b173ed01960ae1f725b2c Mon Sep 17 00:00:00 2001
From: haild173094 <haileduc1111@gmail.com>
Date: Tue, 15 Jul 2025 14:44:11 +0700
Subject: [PATCH 2/4] Update: remove conssole.log

---
 src/components/IndexTable/IndexTableBase.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/IndexTable/IndexTableBase.vue b/src/components/IndexTable/IndexTableBase.vue
index 84ce2a06..a798a315 100644
--- a/src/components/IndexTable/IndexTableBase.vue
+++ b/src/components/IndexTable/IndexTableBase.vue
@@ -500,7 +500,6 @@ const handleResize = () => {
 
 const handleScrollContainerScroll = (tmpCanScrollLeft: boolean, tmpCanScrollRight: boolean) => {
   if (!scrollableContainerElement.value || !scrollBarElement.value) {
-    console.log('No scrollableContainerElement or scrollBarElement found');
     return;
   }
 
@@ -579,7 +578,6 @@ function resizeTableScrollBar() {
 
     hideScrollContainer.value = scrollContainerElement.value?.offsetWidth === tableElement.value?.offsetWidth;
   }
-  console.log(hideScrollContainer.value, scrollContainerElement.value?.offsetWidth, tableElement.value?.offsetWidth, tableInitialized.value);
 }
 
 function triggerResizeTableScrollBar() {

From 6c614ccbe12fb48bbfcb8aabc7bef69b4856f921 Mon Sep 17 00:00:00 2001
From: haild173094 <haileduc1111@gmail.com>
Date: Tue, 15 Jul 2025 14:45:21 +0700
Subject: [PATCH 3/4] Update: remove blank

---
 src/components/IndexTable/IndexTableBase.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/IndexTable/IndexTableBase.vue b/src/components/IndexTable/IndexTableBase.vue
index a798a315..011aa2dd 100644
--- a/src/components/IndexTable/IndexTableBase.vue
+++ b/src/components/IndexTable/IndexTableBase.vue
@@ -575,7 +575,6 @@ function resizeTableScrollBar() {
       `${tableElement.value.offsetWidth - SCROLL_BAR_PADDING}px`,
     );
 
-
     hideScrollContainer.value = scrollContainerElement.value?.offsetWidth === tableElement.value?.offsetWidth;
   }
 }

From 694d02d01033c77644a36cc0bc05c793499d4a45 Mon Sep 17 00:00:00 2001
From: haild173094 <haileduc1111@gmail.com>
Date: Tue, 15 Jul 2025 15:16:27 +0700
Subject: [PATCH 4/4] Update: use triggerResizescrollbar funct in watch instead

---
 src/components/IndexTable/IndexTableBase.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/IndexTable/IndexTableBase.vue b/src/components/IndexTable/IndexTableBase.vue
index 011aa2dd..bb8f74b5 100644
--- a/src/components/IndexTable/IndexTableBase.vue
+++ b/src/components/IndexTable/IndexTableBase.vue
@@ -402,8 +402,7 @@ watch(
     }
 
     if (tableElement.value) {
-      resizeTableScrollBar();
-      // Resize header headings after the scroll bar is resized
+      triggerResizeTableScrollBar();
       triggerResizeTableHeadings();
     }
   }