cynx-lib 1.3.63 → 1.3.65

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cynx-lib",
-  "version": "1.3.63",
+  "version": "1.3.65",
   "type": "module",
   "main": "./index.cjs",
   "module": "./index.js",

package/vue/components/Table.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref } from "vue";
+import { computed, ref, onMounted, onUnmounted, watch, nextTick } from "vue";
 import {
   ChevronUp,
   ChevronDown,
@@ -62,7 +62,53 @@ const emit = defineEmits<{
 }>();
 
 const rootRef = ref<HTMLElement | null>(null);
+const headerScrollRef = ref<HTMLElement | null>(null);
 const bodyScrollRef = ref<HTMLElement | null>(null);
+const gutterWidth = ref(0);
+
+const updateGutter = () => {
+  if (bodyScrollRef.value) {
+    const hasVScroll = bodyScrollRef.value.scrollHeight > bodyScrollRef.value.clientHeight;
+    if (hasVScroll) {
+      const scrollWidth = bodyScrollRef.value.offsetWidth - bodyScrollRef.value.clientWidth;
+      gutterWidth.value = scrollWidth > 0 ? scrollWidth : 6;
+    } else {
+      gutterWidth.value = 0;
+    }
+  } else {
+    gutterWidth.value = 0;
+  }
+};
+
+let resizeObserver: ResizeObserver | null = null;
+
+onMounted(() => {
+  if (bodyScrollRef.value && typeof ResizeObserver !== "undefined") {
+    resizeObserver = new ResizeObserver(() => {
+      updateGutter();
+    });
+    resizeObserver.observe(bodyScrollRef.value);
+  }
+  nextTick(updateGutter);
+});
+
+onUnmounted(() => {
+  resizeObserver?.disconnect();
+});
+
+watch(
+  () => [props.data, props.columns, props.loading],
+  () => {
+    nextTick(updateGutter);
+  },
+  { deep: true }
+);
+
+const handleBodyScroll = () => {
+  if (headerScrollRef.value && bodyScrollRef.value) {
+    headerScrollRef.value.scrollLeft = bodyScrollRef.value.scrollLeft;
+  }
+};
 
 const { rows: autoRows } = useAutoSkeletonRows(rootRef, {
   rowHeight: props.rowHeight,
@@ -126,23 +172,24 @@ const getSkeletonWidth = (rIdx: number, cIdx: number, key: string) => {
     ]"
     :style="height ? { height: formatWidth(height) } : undefined"
   >
-    <!-- Scrollable Single Unified Table Container (100% Column Alignment) -->
+    <!-- Dedicated Fixed Header Container (Never moves on row scroll) -->
     <div
-      ref="bodyScrollRef"
-      class="w-full overflow-x-auto overflow-y-auto custom-scrollbar flex-1 relative"
+      ref="headerScrollRef"
+      class="w-full overflow-hidden flex-shrink-0 border-b border-slate-200 dark:border-slate-800 bg-[#f8fafc] dark:bg-[#16192e]"
     >
       <table class="w-full border-collapse text-left text-xs table-fixed">
         <colgroup>
           <col
             v-for="col in columns"
-            :key="`col-${col.key}`"
+            :key="`h-col-${col.key}`"
             :style="{
               width: formatWidth(col.width),
               minWidth: formatWidth(col.minWidth || col.width || 100),
             }"
           />
+          <col v-if="gutterWidth > 0" :style="{ width: `${gutterWidth}px` }" />
         </colgroup>
-        <thead class="sticky top-0 z-10 bg-[#f8fafc] dark:bg-[#16192e] border-b border-slate-200 dark:border-slate-800 shadow-[0_1px_0_0_rgba(226,232,240,1)] dark:shadow-[0_1px_0_0_rgba(30,41,59,1)]">
+        <thead>
           <tr>
             <th
               v-for="col in columns"
@@ -191,8 +238,33 @@ const getSkeletonWidth = (rIdx: number, cIdx: number, key: string) => {
                 </span>
               </div>
             </th>
+            <th
+              v-if="gutterWidth > 0"
+              class="bg-[#f8fafc] dark:bg-[#16192e] p-0 border-0 pointer-events-none"
+              :style="{ width: `${gutterWidth}px`, minWidth: `${gutterWidth}px` }"
+            />
           </tr>
         </thead>
+      </table>
+    </div>
+
+    <!-- Dedicated Scrollable Body Container -->
+    <div
+      ref="bodyScrollRef"
+      class="w-full overflow-x-auto overflow-y-auto custom-scrollbar flex-1 relative"
+      @scroll="handleBodyScroll"
+    >
+      <table class="w-full border-collapse text-left text-xs table-fixed">
+        <colgroup>
+          <col
+            v-for="col in columns"
+            :key="`b-col-${col.key}`"
+            :style="{
+              width: formatWidth(col.width),
+              minWidth: formatWidth(col.minWidth || col.width || 100),
+            }"
+          />
+        </colgroup>
         <tbody class="divide-y divide-slate-100 dark:divide-slate-800/80">
           <!-- Loading State (Real matching heights and paddings) -->
           <template v-if="loading">