cynx-lib 1.3.84 → 1.3.85

package/vue/components/Table.vue

@@ -1,388 +1,388 @@
-<script setup lang="ts">
-import { computed, ref, onMounted, onUnmounted, watch, nextTick } from "vue";
-import {
-  ChevronUp,
-  ChevronDown,
-  ArrowUpDown,
-  FileText,
-} from "lucide-vue-next";
-import Skeleton from "./Skeleton.vue";
-import { useAutoSkeletonRows } from "../composables/useAutoSkeletonRows";
-
-export interface TableColumn {
-  key: string;
-  title?: string;
-  label?: string;
-  width?: string | number;
-  minWidth?: string | number;
-  align?: "left" | "center" | "right";
-  sortable?: boolean;
-  fixed?: "left" | "right" | boolean;
-  headerClass?: string;
-  cellClass?: string;
-}
-
-const props = withDefaults(
-  defineProps<{
-    columns?: TableColumn[];
-    data?: any[];
-    loading?: boolean;
-    rowKey?: string | ((row: any) => string | number);
-    sortBy?: string;
-    sortOrder?: "asc" | "desc" | string;
-    emptyText?: string;
-    height?: string | number;
-    hoverable?: boolean;
-    striped?: boolean;
-    bordered?: boolean;
-    skeletonRows?: number;
-    autoSkeleton?: boolean;
-    rowHeight?: number;
-  }>(),
-  {
-    columns: () => [],
-    data: () => [],
-    loading: false,
-    rowKey: "id",
-    sortBy: "",
-    sortOrder: "",
-    emptyText: "No data available",
-    hoverable: true,
-    striped: false,
-    bordered: true,
-    skeletonRows: undefined,
-    autoSkeleton: true,
-    rowHeight: 40,
-  }
-);
-
-const emit = defineEmits<{
-  (e: "row-click", row: any, event: MouseEvent): void;
-  (e: "sort-change", payload: { key: string; order: "asc" | "desc" | null }): void;
-}>();
-
-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,
-  bottomBuffer: 50,
-});
-
-const skeletonCount = computed(() => {
-  if (props.skeletonRows && props.skeletonRows > 0) return props.skeletonRows;
-  if (props.autoSkeleton) return autoRows.value;
-  return 10;
-});
-
-const getRowKey = (row: any, index: number) => {
-  if (typeof props.rowKey === "function") return props.rowKey(row);
-  if (typeof props.rowKey === "string" && row[props.rowKey] !== undefined) return row[props.rowKey];
-  return index;
-};
-
-const handleSort = (col: TableColumn) => {
-  if (!col.sortable) return;
-  const isCurrent = props.sortBy === col.key;
-  let nextOrder: "asc" | "desc" | null = "asc";
-
-  if (isCurrent) {
-    if (props.sortOrder === "asc") nextOrder = "desc";
-    else if (props.sortOrder === "desc") nextOrder = null;
-    else nextOrder = "asc";
-  }
-
-  emit("sort-change", { key: col.key, order: nextOrder });
-};
-
-const formatWidth = (val?: string | number) => {
-  if (val === undefined || val === null) return undefined;
-  if (typeof val === "number") return `${val}px`;
-  return val;
-};
-
-const titleWidths = ["68%", "82%", "55%", "75%", "62%", "88%", "70%", "64%"];
-const textWidths = ["80%", "65%", "88%", "72%", "58%", "84%", "62%", "76%"];
-const codeWidths = ["50%", "62%", "45%", "58%", "52%", "60%"];
-
-const getSkeletonWidth = (rIdx: number, cIdx: number, key: string) => {
-  if (key === "title" || cIdx === 0) {
-    return titleWidths[(rIdx + cIdx) % titleWidths.length];
-  }
-  if (key === "usdot" || key === "phone" || key === "id") {
-    return codeWidths[(rIdx + cIdx) % codeWidths.length];
-  }
-  return textWidths[(rIdx + cIdx) % textWidths.length];
-};
-</script>
-
-<template>
-  <div
-    ref="rootRef"
-    class="w-full flex flex-col overflow-hidden transition-colors"
-    :class="[
-      bordered ? 'border border-slate-200 dark:border-slate-800' : '',
-      'bg-white dark:bg-[#141629]'
-    ]"
-    :style="height ? { height: formatWidth(height) } : undefined"
-  >
-    <!-- Dedicated Fixed Header Container (Never moves on row scroll) -->
-    <div
-      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="`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>
-          <tr>
-            <th
-              v-for="col in columns"
-              :key="col.key"
-              :style="{
-                width: formatWidth(col.width),
-                minWidth: formatWidth(col.minWidth || col.width || 100),
-                textAlign: col.align || 'left',
-              }"
-              :class="[
-                'px-3.5 py-2.5 font-semibold text-[11px] uppercase tracking-wider text-slate-500 dark:text-slate-400 select-none transition-colors bg-[#f8fafc] dark:bg-[#16192e]',
-                col.sortable ? 'cursor-pointer hover:text-slate-900 dark:hover:text-white' : '',
-                col.headerClass || ''
-              ]"
-              @click="handleSort(col)"
-            >
-              <div
-                class="flex items-center gap-1.5"
-                :class="{
-                  'justify-start': !col.align || col.align === 'left',
-                  'justify-center': col.align === 'center',
-                  'justify-end': col.align === 'right',
-                }"
-              >
-                <slot :name="`header-${col.key}`" :column="col">
-                  <span>{{ col.title || col.label || col.key }}</span>
-                </slot>
-
-                <!-- Sort indicator icon -->
-                <span v-if="col.sortable" class="inline-flex items-center text-slate-400">
-                  <ChevronUp
-                    v-if="sortBy === col.key && sortOrder === 'asc'"
-                    :size="13"
-                    class="text-[#12675D] dark:text-teal-400"
-                  />
-                  <ChevronDown
-                    v-else-if="sortBy === col.key && sortOrder === 'desc'"
-                    :size="13"
-                    class="text-[#12675D] dark:text-teal-400"
-                  />
-                  <ArrowUpDown
-                    v-else
-                    :size="11"
-                    class="opacity-40 hover:opacity-100 transition-opacity"
-                  />
-                </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">
-            <tr
-              v-for="i in skeletonCount"
-              :key="`sk-${i}`"
-              :style="{ height: `${rowHeight}px` }"
-            >
-              <td
-                v-for="(col, cIdx) in columns"
-                :key="`sk-c-${col.key}`"
-                :style="{
-                  textAlign: col.align || 'left',
-                  height: `${rowHeight}px`,
-                }"
-                class="px-3.5 py-2 align-middle"
-              >
-                <!-- Action button skeleton -->
-                <div v-if="col.key === 'actions'" class="flex items-center justify-center">
-                  <Skeleton :width="28" :height="28" :radius="6" />
-                </div>
-
-                <!-- Centered badge skeleton -->
-                <div v-else-if="col.align === 'center'" class="flex items-center justify-center">
-                  <Skeleton :width="44" :height="20" :radius="10" />
-                </div>
-
-                <!-- Text / Column skeleton -->
-                <Skeleton
-                  v-else
-                  :width="getSkeletonWidth(i, cIdx, col.key)"
-                  :height="14"
-                  :radius="4"
-                />
-              </td>
-            </tr>
-          </template>
-
-          <!-- Empty State -->
-          <tr v-else-if="!data || data.length === 0">
-            <td :colspan="columns.length || 1" class="py-16 text-center text-slate-400 dark:text-slate-500">
-              <slot name="empty">
-                <div class="flex flex-col items-center justify-center gap-2">
-                  <FileText :size="32" class="opacity-30" />
-                  <span class="text-xs">{{ emptyText }}</span>
-                </div>
-              </slot>
-            </td>
-          </tr>
-
-          <!-- Data Rows -->
-          <template v-else>
-            <tr
-              v-for="(row, rIdx) in data"
-              :key="getRowKey(row, rIdx)"
-              :style="{ height: `${rowHeight}px` }"
-              :class="[
-                'transition-colors duration-100',
-                hoverable ? 'hover:bg-slate-50/80 dark:hover:bg-slate-800/50 cursor-pointer' : '',
-                striped && rIdx % 2 === 1 ? 'bg-slate-50/40 dark:bg-slate-900/30' : '',
-              ]"
-              @click="emit('row-click', row, $event)"
-            >
-              <td
-                v-for="col in columns"
-                :key="col.key"
-                :style="{
-                  textAlign: col.align || 'left',
-                  height: `${rowHeight}px`,
-                }"
-                :class="[
-                  'px-3.5 py-2 text-slate-700 dark:text-slate-200 text-xs font-normal align-middle',
-                  col.cellClass || ''
-                ]"
-              >
-                <!-- Dedicated Column Cell Slot (e.g. #cell-title, #cell-actions) or default slot -->
-                <slot
-                  :name="`cell-${col.key}`"
-                  :row="row"
-                  :column="col"
-                  :index="rIdx"
-                  :value="row[col.key]"
-                >
-                  <slot
-                    :name="col.key"
-                    :row="row"
-                    :column="col"
-                    :index="rIdx"
-                    :value="row[col.key]"
-                  >
-                    <span>{{ row[col.key] != null && row[col.key] !== '' ? row[col.key] : '-' }}</span>
-                  </slot>
-                </slot>
-              </td>
-            </tr>
-          </template>
-        </tbody>
-      </table>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.custom-scrollbar {
-  scrollbar-width: thin;
-}
-.custom-scrollbar::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-.custom-scrollbar::-webkit-scrollbar-track {
-  background: transparent;
-}
-.custom-scrollbar::-webkit-scrollbar-thumb {
-  background-color: rgba(148, 163, 184, 0.3);
-  border-radius: 6px;
-}
-.custom-scrollbar::-webkit-scrollbar-thumb:hover {
-  background-color: rgba(148, 163, 184, 0.5);
-}
-</style>
+<script setup lang="ts">
+import { computed, ref, onMounted, onUnmounted, watch, nextTick } from "vue";
+import {
+  ChevronUp,
+  ChevronDown,
+  ArrowUpDown,
+  FileText,
+} from "lucide-vue-next";
+import Skeleton from "./Skeleton.vue";
+import { useAutoSkeletonRows } from "../composables/useAutoSkeletonRows";
+
+export interface TableColumn {
+  key: string;
+  title?: string;
+  label?: string;
+  width?: string | number;
+  minWidth?: string | number;
+  align?: "left" | "center" | "right";
+  sortable?: boolean;
+  fixed?: "left" | "right" | boolean;
+  headerClass?: string;
+  cellClass?: string;
+}
+
+const props = withDefaults(
+  defineProps<{
+    columns?: TableColumn[];
+    data?: any[];
+    loading?: boolean;
+    rowKey?: string | ((row: any) => string | number);
+    sortBy?: string;
+    sortOrder?: "asc" | "desc" | string;
+    emptyText?: string;
+    height?: string | number;
+    hoverable?: boolean;
+    striped?: boolean;
+    bordered?: boolean;
+    skeletonRows?: number;
+    autoSkeleton?: boolean;
+    rowHeight?: number;
+  }>(),
+  {
+    columns: () => [],
+    data: () => [],
+    loading: false,
+    rowKey: "id",
+    sortBy: "",
+    sortOrder: "",
+    emptyText: "No data available",
+    hoverable: true,
+    striped: false,
+    bordered: true,
+    skeletonRows: undefined,
+    autoSkeleton: true,
+    rowHeight: 40,
+  }
+);
+
+const emit = defineEmits<{
+  (e: "row-click", row: any, event: MouseEvent): void;
+  (e: "sort-change", payload: { key: string; order: "asc" | "desc" | null }): void;
+}>();
+
+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,
+  bottomBuffer: 50,
+});
+
+const skeletonCount = computed(() => {
+  if (props.skeletonRows && props.skeletonRows > 0) return props.skeletonRows;
+  if (props.autoSkeleton) return autoRows.value;
+  return 10;
+});
+
+const getRowKey = (row: any, index: number) => {
+  if (typeof props.rowKey === "function") return props.rowKey(row);
+  if (typeof props.rowKey === "string" && row[props.rowKey] !== undefined) return row[props.rowKey];
+  return index;
+};
+
+const handleSort = (col: TableColumn) => {
+  if (!col.sortable) return;
+  const isCurrent = props.sortBy === col.key;
+  let nextOrder: "asc" | "desc" | null = "asc";
+
+  if (isCurrent) {
+    if (props.sortOrder === "asc") nextOrder = "desc";
+    else if (props.sortOrder === "desc") nextOrder = null;
+    else nextOrder = "asc";
+  }
+
+  emit("sort-change", { key: col.key, order: nextOrder });
+};
+
+const formatWidth = (val?: string | number) => {
+  if (val === undefined || val === null) return undefined;
+  if (typeof val === "number") return `${val}px`;
+  return val;
+};
+
+const titleWidths = ["68%", "82%", "55%", "75%", "62%", "88%", "70%", "64%"];
+const textWidths = ["80%", "65%", "88%", "72%", "58%", "84%", "62%", "76%"];
+const codeWidths = ["50%", "62%", "45%", "58%", "52%", "60%"];
+
+const getSkeletonWidth = (rIdx: number, cIdx: number, key: string) => {
+  if (key === "title" || cIdx === 0) {
+    return titleWidths[(rIdx + cIdx) % titleWidths.length];
+  }
+  if (key === "usdot" || key === "phone" || key === "id") {
+    return codeWidths[(rIdx + cIdx) % codeWidths.length];
+  }
+  return textWidths[(rIdx + cIdx) % textWidths.length];
+};
+</script>
+
+<template>
+  <div
+    ref="rootRef"
+    class="w-full flex flex-col overflow-hidden transition-colors"
+    :class="[
+      bordered ? 'border border-slate-200 dark:border-slate-800' : '',
+      'bg-white dark:bg-[#141629]'
+    ]"
+    :style="height ? { height: formatWidth(height) } : undefined"
+  >
+    <!-- Dedicated Fixed Header Container (Never moves on row scroll) -->
+    <div
+      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="`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>
+          <tr>
+            <th
+              v-for="col in columns"
+              :key="col.key"
+              :style="{
+                width: formatWidth(col.width),
+                minWidth: formatWidth(col.minWidth || col.width || 100),
+                textAlign: col.align || 'left',
+              }"
+              :class="[
+                'px-3.5 py-2.5 font-semibold text-[11px] uppercase tracking-wider text-slate-500 dark:text-slate-400 select-none transition-colors bg-[#f8fafc] dark:bg-[#16192e]',
+                col.sortable ? 'cursor-pointer hover:text-slate-900 dark:hover:text-white' : '',
+                col.headerClass || ''
+              ]"
+              @click="handleSort(col)"
+            >
+              <div
+                class="flex items-center gap-1.5"
+                :class="{
+                  'justify-start': !col.align || col.align === 'left',
+                  'justify-center': col.align === 'center',
+                  'justify-end': col.align === 'right',
+                }"
+              >
+                <slot :name="`header-${col.key}`" :column="col">
+                  <span>{{ col.title || col.label || col.key }}</span>
+                </slot>
+
+                <!-- Sort indicator icon -->
+                <span v-if="col.sortable" class="inline-flex items-center text-slate-400">
+                  <ChevronUp
+                    v-if="sortBy === col.key && sortOrder === 'asc'"
+                    :size="13"
+                    class="text-[#12675D] dark:text-teal-400"
+                  />
+                  <ChevronDown
+                    v-else-if="sortBy === col.key && sortOrder === 'desc'"
+                    :size="13"
+                    class="text-[#12675D] dark:text-teal-400"
+                  />
+                  <ArrowUpDown
+                    v-else
+                    :size="11"
+                    class="opacity-40 hover:opacity-100 transition-opacity"
+                  />
+                </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">
+            <tr
+              v-for="i in skeletonCount"
+              :key="`sk-${i}`"
+              :style="{ height: `${rowHeight}px` }"
+            >
+              <td
+                v-for="(col, cIdx) in columns"
+                :key="`sk-c-${col.key}`"
+                :style="{
+                  textAlign: col.align || 'left',
+                  height: `${rowHeight}px`,
+                }"
+                class="px-3.5 py-2 align-middle"
+              >
+                <!-- Action button skeleton -->
+                <div v-if="col.key === 'actions'" class="flex items-center justify-center">
+                  <Skeleton :width="28" :height="28" :radius="6" />
+                </div>
+
+                <!-- Centered badge skeleton -->
+                <div v-else-if="col.align === 'center'" class="flex items-center justify-center">
+                  <Skeleton :width="44" :height="20" :radius="10" />
+                </div>
+
+                <!-- Text / Column skeleton -->
+                <Skeleton
+                  v-else
+                  :width="getSkeletonWidth(i, cIdx, col.key)"
+                  :height="14"
+                  :radius="4"
+                />
+              </td>
+            </tr>
+          </template>
+
+          <!-- Empty State -->
+          <tr v-else-if="!data || data.length === 0">
+            <td :colspan="columns.length || 1" class="py-16 text-center text-slate-400 dark:text-slate-500">
+              <slot name="empty">
+                <div class="flex flex-col items-center justify-center gap-2">
+                  <FileText :size="32" class="opacity-30" />
+                  <span class="text-xs">{{ emptyText }}</span>
+                </div>
+              </slot>
+            </td>
+          </tr>
+
+          <!-- Data Rows -->
+          <template v-else>
+            <tr
+              v-for="(row, rIdx) in data"
+              :key="getRowKey(row, rIdx)"
+              :style="{ height: `${rowHeight}px` }"
+              :class="[
+                'transition-colors duration-100',
+                hoverable ? 'hover:bg-slate-50/80 dark:hover:bg-slate-800/50 cursor-pointer' : '',
+                striped && rIdx % 2 === 1 ? 'bg-slate-50/40 dark:bg-slate-900/30' : '',
+              ]"
+              @click="emit('row-click', row, $event)"
+            >
+              <td
+                v-for="col in columns"
+                :key="col.key"
+                :style="{
+                  textAlign: col.align || 'left',
+                  height: `${rowHeight}px`,
+                }"
+                :class="[
+                  'px-3.5 py-2 text-slate-700 dark:text-slate-200 text-xs font-normal align-middle',
+                  col.cellClass || ''
+                ]"
+              >
+                <!-- Dedicated Column Cell Slot (e.g. #cell-title, #cell-actions) or default slot -->
+                <slot
+                  :name="`cell-${col.key}`"
+                  :row="row"
+                  :column="col"
+                  :index="rIdx"
+                  :value="row[col.key]"
+                >
+                  <slot
+                    :name="col.key"
+                    :row="row"
+                    :column="col"
+                    :index="rIdx"
+                    :value="row[col.key]"
+                  >
+                    <span>{{ row[col.key] != null && row[col.key] !== '' ? row[col.key] : '-' }}</span>
+                  </slot>
+                </slot>
+              </td>
+            </tr>
+          </template>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.custom-scrollbar {
+  scrollbar-width: thin;
+}
+.custom-scrollbar::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+.custom-scrollbar::-webkit-scrollbar-track {
+  background: transparent;
+}
+.custom-scrollbar::-webkit-scrollbar-thumb {
+  background-color: rgba(148, 163, 184, 0.3);
+  border-radius: 6px;
+}
+.custom-scrollbar::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(148, 163, 184, 0.5);
+}
+</style>