cynx-lib 1.3.62 → 1.3.64

package/package.json

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

package/vue/components/Table.vue

@@ -62,8 +62,15 @@ const emit = defineEmits<{
 }>();
 
 const rootRef = ref<HTMLElement | null>(null);
+const headerScrollRef = ref<HTMLElement | null>(null);
 const bodyScrollRef = ref<HTMLElement | null>(null);
 
+const handleBodyScroll = () => {
+  if (headerScrollRef.value && bodyScrollRef.value) {
+    headerScrollRef.value.scrollLeft = bodyScrollRef.value.scrollLeft;
+  }
+};
+
 const { rows: autoRows } = useAutoSkeletonRows(rootRef, {
   rowHeight: props.rowHeight,
   bottomBuffer: 50,
@@ -126,24 +133,23 @@ const getSkeletonWidth = (rIdx: number, cIdx: number, key: string) => {
     ]"
     :style="height ? { height: formatWidth(height) } : undefined"
   >
-    <!-- Scrollable Single Unified Table Container (100% Column Alignment & Stable Gutter) -->
+    <!-- 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"
-      style="scrollbar-gutter: stable;"
+      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),
             }"
           />
         </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"
@@ -194,6 +200,26 @@ const getSkeletonWidth = (rIdx: number, cIdx: number, key: string) => {
             </th>
           </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">