@vc-shell/framework 1.2.4-beta.4 → 1.2.4-beta.5

package/ui/components/organisms/vc-table/components/DataTableBody.vue

@@ -13,12 +13,16 @@
       </slot>
     </template>
 
-    <!-- Loading state -->
+    <!-- Loading state — skeleton rows matching column layout -->
     <template v-else-if="loading && items.length === 0">
       <slot name="loading">
-        <div class="vc-data-table__loading">
-          <span>{{ loadingText }}</span>
-        </div>
+        <TableSkeletonRows
+          :columns="columns"
+          :rows="skeletonRows"
+          :get-column-width="getColumnWidth"
+          :get-cell-style="getCellStyle"
+          :show-selection-cell="showSelectionCell"
+        />
       </slot>
     </template>
 
@@ -119,6 +123,7 @@ import type { VcColumnProps } from "@ui/components/organisms/vc-table/types";
 import type { GroupedData } from "@ui/components/organisms/vc-table/composables/useTableRowGrouping";
 import DataTableRow from "@ui/components/organisms/vc-table/components/DataTableRow.vue";
 import TableEmpty from "@ui/components/organisms/vc-table/components/TableEmpty.vue";
+import TableSkeletonRows from "@ui/components/organisms/vc-table/components/_internal/TableSkeletonRows.vue";
 
 /**
  * Base item type — actual generic enforcement happens in VcDataTable.
@@ -167,8 +172,18 @@ const props = defineProps<{
   emptyTitle?: string;
   /** Empty state description */
   emptyDescription?: string;
-  /** Loading text */
+  /** Loading text (kept for custom loading slot consumers) */
   loadingText?: string;
+  /** Number of skeleton rows to show during loading */
+  skeletonRows?: number;
+  /** Visible columns (for skeleton rendering) */
+  columns: ColumnInstance[];
+  /** Column width resolver (for skeleton rendering) */
+  getColumnWidth: (col: VcColumnProps) => string | undefined;
+  /** Cell style resolver (for skeleton rendering) */
+  getCellStyle: (col: VcColumnProps) => object | undefined;
+  /** Whether selection cell (checkbox) is shown */
+  showSelectionCell?: boolean;
 
   // === Grouping ===
   /** Whether grouping is enabled */
@@ -233,6 +248,12 @@ const emit = defineEmits<{
   "row-drop": [event: DragEvent];
 }>();
 
+// ============================================================================
+// Skeleton helpers
+// ============================================================================
+
+const skeletonRows = computed(() => props.skeletonRows ?? 20);
+
 // ============================================================================
 // Grouping computed helpers
 // ============================================================================
@@ -308,9 +329,6 @@ const handleRowDrop = (e: DragEvent) => emit("row-drop", e);
   @apply tw-flex tw-flex-col tw-overflow-y-auto tw-flex-auto tw-min-h-0;
 }
 
-.vc-data-table__loading {
-  @apply tw-p-4 tw-text-center tw-text-neutrals-500;
-}
 
 .vc-data-table__rows-container {
   @apply tw-flex tw-flex-col;

package/ui/components/organisms/vc-table/components/DataTableCellRenderer.vue

@@ -129,7 +129,7 @@
  * Extracted from VcDataTable.vue to reduce template complexity.
  */
 import { computed } from "vue";
-import * as _ from "lodash-es";
+import { get } from "lodash-es";
 import type { ColumnInstance } from "@ui/components/organisms/vc-table/utils/ColumnCollector";
 import TableCheckbox from "@ui/components/organisms/vc-table/components/TableCheckbox.vue";
 import { VcRadioButton } from "@ui/components/molecules/vc-radio-button";
@@ -263,7 +263,7 @@ const isInlineEditing = computed(() => {
 
 // Get cell value using lodash _.get for nested fields
 const cellValue = computed(() => {
-  return _.get(props.item, fieldName.value || "");
+  return get(props.item, fieldName.value || "");
 });
 
 // Currency for money cells

package/ui/components/organisms/vc-table/components/DataTableHeader.vue

@@ -278,7 +278,7 @@ const handleFilterClear = (col: ColumnInstance) => {
   height: 36px;
   border-radius: 16px 0 0 16px;
 
-  background: var(--neutrals-200, #e5e5e5);
+  background: var(--neutrals-200);
   box-shadow: -4px 0 8px rgba(0, 0, 0, 0.1);
   cursor: pointer;
 
@@ -292,7 +292,7 @@ const handleFilterClear = (col: ColumnInstance) => {
   &:hover,
   &--active {
     transform: translateY(-50%) translateX(0);
-    background: var(--primary-50, #eff6ff);
+    background: var(--primary-50);
 
     .vc-col-switcher-trigger__chevron {
       opacity: 0;
@@ -307,10 +307,10 @@ const handleFilterClear = (col: ColumnInstance) => {
 
   // Active state (panel open): stronger primary accent
   &--active {
-    background: var(--primary-100, #dbeafe);
+    background: var(--primary-100);
 
     .vc-col-switcher-trigger__action {
-      color: var(--primary-700, #1d4ed8);
+      color: var(--primary-700);
     }
   }
 
@@ -323,7 +323,7 @@ const handleFilterClear = (col: ColumnInstance) => {
     align-items: center;
     justify-content: flex-start;
     padding-left: 3px;
-    color: var(--neutrals-500, #737373);
+    color: var(--neutrals-500);
     opacity: 1;
     transition: opacity 0.2s ease;
     pointer-events: none; // chevron is decorative, clicks go to container
@@ -337,8 +337,8 @@ const handleFilterClear = (col: ColumnInstance) => {
     width: 28px;
     height: 28px;
     border-radius: 50%;
-    background: var(--primary-100, #dbeafe);
-    color: var(--primary-600, #2563eb);
+    background: var(--primary-100);
+    color: var(--primary-600);
     opacity: 0;
     transition: opacity 0.2s ease;
     pointer-events: none; // hidden until hover

package/ui/components/organisms/vc-table/components/GlobalFiltersButton.vue

@@ -52,7 +52,7 @@ defineEmits<{
     @apply tw-inline-flex tw-items-center tw-justify-center tw-ml-1;
     @apply tw-min-w-5 tw-h-5 tw-px-1.5 tw-rounded-full;
     @apply tw-text-xs tw-font-semibold tw-text-additional-50;
-    background-color: var(--primary-500, #3b82f6);
+    background-color: var(--primary-500);
   }
 }
 </style>

package/ui/components/organisms/vc-table/components/GlobalFiltersPanel.vue

@@ -1,5 +1,7 @@
 <template>
+  <!-- Desktop: dropdown panel anchored to the button -->
   <VcDropdownPanel
+    v-if="!isMobile"
     :show="show"
     :anchor-ref="anchorRef"
     :title="$t('COMPONENTS.ORGANISMS.VC_TABLE.GLOBAL_FILTERS.TITLE')"
@@ -97,23 +99,128 @@
       </VcButton>
     </template>
   </VcDropdownPanel>
+
+  <!-- Mobile: bottom-sheet sidebar -->
+  <VcSidebar
+    v-else
+    :model-value="show"
+    position="bottom"
+    size="sm"
+    draggable
+    drag-handle
+    :close-button="false"
+    :inset="false"
+    :title="$t('COMPONENTS.ORGANISMS.VC_TABLE.GLOBAL_FILTERS.TITLE')"
+    @update:model-value="emit('update:show', $event)"
+  >
+    <!-- Filters list (same content as desktop) -->
+    <div class="vc-global-filters-panel__content">
+      <div
+        v-for="filter in filters"
+        :key="filter.id"
+        class="vc-global-filters-panel__filter"
+      >
+        <label class="vc-global-filters-panel__label">{{ filter.label }}</label>
+
+        <slot
+          v-if="$slots[`filter-${filter.id}`]"
+          :name="`filter-${filter.id}`"
+          :value="localValues[filter.id]"
+          :update-value="(val: unknown) => updateFilterValue(filter.id, val)"
+        />
+
+        <VcInput
+          v-else-if="getType(filter.id) === 'text'"
+          :model-value="localValues[filter.id] as string"
+          :placeholder="filter.placeholder ?? ''"
+          size="small"
+          @update:model-value="updateFilterValue(filter.id, $event)"
+        />
+
+        <VcSelect
+          v-else-if="getType(filter.id) === 'select'"
+          :model-value="localValues[filter.id]"
+          :options="getFilterOptions(filter.filter)"
+          option-value="value"
+          option-label="label"
+          size="small"
+          :placeholder="filter.placeholder ?? ''"
+          :multiple="isMultipleSelect(filter.filter)"
+          clearable
+          emit-value
+          @update:model-value="updateFilterValue(filter.id, $event)"
+        />
+
+        <div
+          v-else-if="getType(filter.id) === 'dateRange'"
+          class="vc-global-filters-panel__range"
+        >
+          <div class="vc-global-filters-panel__range-field">
+            <span class="vc-global-filters-panel__range-label">
+              {{ $t("COMPONENTS.ORGANISMS.VC_TABLE.COLUMN_FILTER.FROM") }}
+            </span>
+            <VcInput
+              :model-value="getDateRangeStart(filter.id)"
+              type="date"
+              size="small"
+              @update:model-value="updateDateRangeStart(filter, $event)"
+            />
+          </div>
+          <div class="vc-global-filters-panel__range-field">
+            <span class="vc-global-filters-panel__range-label">
+              {{ $t("COMPONENTS.ORGANISMS.VC_TABLE.COLUMN_FILTER.TO") }}
+            </span>
+            <VcInput
+              :model-value="getDateRangeEnd(filter.id)"
+              type="date"
+              size="small"
+              @update:model-value="updateDateRangeEnd(filter, $event)"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Actions -->
+    <template #footer>
+      <div class="vc-global-filters-panel__footer-actions">
+        <VcButton
+          variant="outline"
+          size="sm"
+          @click="clearAll"
+        >
+          {{ $t("COMPONENTS.ORGANISMS.VC_TABLE.COLUMN_FILTER.CLEAR") }}
+        </VcButton>
+        <VcButton
+          variant="primary"
+          size="sm"
+          @click="applyAll"
+        >
+          {{ $t("COMPONENTS.ORGANISMS.VC_TABLE.COLUMN_FILTER.APPLY") }}
+        </VcButton>
+      </div>
+    </template>
+  </VcSidebar>
 </template>
 
 <script setup lang="ts">
 /**
- * GlobalFiltersPanel - Dropdown panel with global filters
+ * GlobalFiltersPanel - Responsive filter panel
+ *
+ * Desktop: floating VcDropdownPanel anchored to the filter button.
+ * Mobile: VcSidebar bottom sheet with drag-to-dismiss.
  *
- * Displays a list of configurable filters with Apply/Clear buttons.
  * Supports text, select (single/multi), and dateRange filter types.
  * Custom filter UI can be provided via named slots.
- * Uses VcDropdownPanel for positioning and backdrop.
  */
-import { ref, computed, watch } from "vue";
+import { ref, computed, watch, inject } from "vue";
 import { VcDropdownPanel } from "@ui/components/molecules";
 import { VcInput, VcSelect } from "@ui/components/molecules";
 import { VcButton } from "@ui/components/atoms";
+import { VcSidebar } from "@ui/components/organisms/vc-sidebar";
 import type { GlobalFilterConfig } from "@ui/components/organisms/vc-table/types";
 import { useColumnFilter } from "@ui/components/organisms/vc-table/composables/useColumnFilter";
+import { IsMobileKey } from "@framework/injection-keys";
 
 interface Props {
   /** List of filter configurations (id, label, type, options) */
@@ -141,6 +248,8 @@ const emit = defineEmits<{
   clear: [];
 }>();
 
+const isMobile = inject(IsMobileKey, ref(false));
+
 // Use the same helpers as ColumnFilter
 const { getFilterType, getFilterOptions, isMultipleSelect, getRangeFields } = useColumnFilter();
 
@@ -324,5 +433,8 @@ const clearAll = () => {
     @apply tw-block tw-text-xs tw-text-neutrals-500;
   }
 
+  &__footer-actions {
+    @apply tw-flex tw-justify-end tw-gap-2 tw-px-4 tw-py-3;
+  }
 }
 </style>

package/ui/components/organisms/vc-table/components/TableActions.vue

@@ -102,7 +102,7 @@ const handleActionClick = (action: TableAction) => {
 
 .vc-table-composition__action-icon {
   @apply tw-flex tw-items-center tw-justify-center tw-w-8 tw-h-8 tw-rounded tw-cursor-pointer tw-transition-colors;
-  color: var(--table-actions-icon-color, #333);
+  color: var(--table-actions-icon-color, var(--neutrals-900));
   font-size: 14px;
 
   &:hover:not(&--disabled) {

package/ui/components/organisms/vc-table/components/TableColumnSwitcher.vue

@@ -139,7 +139,7 @@ const handleReset = () => {
 
   &__checkbox {
     @apply tw-cursor-pointer;
-    accent-color: var(--primary-500, #3b82f6);
+    accent-color: var(--primary-500);
   }
 
   &__label {

package/ui/components/organisms/vc-table/components/TableGroupRow.vue

@@ -73,14 +73,14 @@ const handleClick = (event: MouseEvent) => {
 <style lang="scss">
 .vc-table-composition__group-header {
   @apply tw-relative tw-flex tw-items-center tw-w-full;
-  background-color: var(--vc-table-group-header-bg, #f3f4f6);
-  border-bottom: 1px solid var(--table-border-color, #e5e7eb);
+  background-color: var(--vc-table-group-header-bg, var(--neutrals-50));
+  border-bottom: 1px solid var(--table-border-color, var(--neutrals-200));
 
   &--expandable {
     @apply tw-cursor-pointer;
 
     &:hover {
-      background-color: var(--vc-table-group-header-bg-hover, #e5e7eb);
+      background-color: var(--vc-table-group-header-bg-hover, var(--neutrals-200));
     }
   }
 
@@ -94,12 +94,12 @@ const handleClick = (event: MouseEvent) => {
 
   &-key {
     @apply tw-font-semibold tw-text-sm;
-    color: var(--vc-table-group-header-text, #374151);
+    color: var(--vc-table-group-header-text, var(--neutrals-700));
   }
 
   &-count {
     @apply tw-text-sm;
-    color: var(--vc-table-group-header-count, #6b7280);
+    color: var(--vc-table-group-header-count, var(--neutrals-500));
   }
 }
 
@@ -107,16 +107,16 @@ const handleClick = (event: MouseEvent) => {
   @apply tw-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-rounded tw-border-0 tw-p-0;
   @apply tw-transition-colors tw-duration-150;
   background-color: transparent;
-  color: var(--vc-table-group-toggle-color, #6b7280);
+  color: var(--vc-table-group-toggle-color, var(--neutrals-500));
 
   &:hover {
     background-color: var(--vc-table-group-toggle-bg-hover, rgba(0, 0, 0, 0.05));
-    color: var(--vc-table-group-toggle-color-hover, #374151);
+    color: var(--vc-table-group-toggle-color-hover, var(--neutrals-700));
   }
 
   &:focus {
     @apply tw-outline-none;
-    box-shadow: 0 0 0 2px var(--primary-200, #bfdbfe);
+    box-shadow: 0 0 0 2px var(--primary-200);
   }
 
   &-icon {

package/ui/components/organisms/vc-table/components/TableHead.vue

@@ -298,10 +298,10 @@ const handleDrop = (event: DragEvent) => {
   &--dragging {
     @apply tw-relative;
     z-index: 10 !important;
-    background-color: var(--primary-50, #eff6ff) !important;
+    background-color: var(--primary-50) !important;
     box-shadow:
       0 4px 12px -2px rgba(0, 0, 0, 0.12),
-      0 0 0 1px var(--primary-200, #bfdbfe) !important;
+      0 0 0 1px var(--primary-200) !important;
     border-radius: 6px !important;
     transform: scale(1.01) !important;
     cursor: grabbing !important;

package/ui/components/organisms/vc-table/components/TableRow.vue

@@ -30,7 +30,7 @@
         <rect x="2" y="10.5" width="12" height="1.5" rx="0.75"/>
       </svg>
     </div>
-    <TransitionGroup tag="div" name="vc-table-col-swap" class="vc-table-composition__row-transition-wrapper" :class="{ 'vc-table-composition__row-transition-wrapper--no-filler': hasFlexColumns }">
+    <TransitionGroup tag="div" :name="isColumnReordering ? 'vc-table-col-swap' : ''" class="vc-table-composition__row-transition-wrapper" :class="{ 'vc-table-composition__row-transition-wrapper--no-filler': hasFlexColumns }">
       <slot />
     </TransitionGroup>
     <!-- Row actions slot - rendered outside TransitionGroup for proper positioning -->
@@ -40,7 +40,7 @@
 
 <script setup lang="ts">
 import { computed, inject, ref, TransitionGroup, type Ref } from "vue";
-import { TableContextKey, HasFlexColumnsKey } from "@ui/components/organisms/vc-table/keys";
+import { TableContextKey, HasFlexColumnsKey, IsColumnReorderingKey } from "@ui/components/organisms/vc-table/keys";
 
 const props = withDefaults(
   defineProps<{
@@ -98,6 +98,7 @@ const emit = defineEmits<{
 
 const tableContext = inject(TableContextKey, null);
 const hasFlexColumns = inject(HasFlexColumnsKey, ref(false));
+const isColumnReordering = inject(IsColumnReorderingKey, ref(false));
 const isDragging = ref(false);
 
 const isClickable = computed(() => {
@@ -213,10 +214,10 @@ const handleDrop = (event: DragEvent) => {
   &--dragging {
     @apply tw-relative;
     z-index: 10 !important;
-    background-color: var(--primary-50, #eff6ff) !important;
+    background-color: var(--primary-50) !important;
     box-shadow:
       0 4px 12px -2px rgba(0, 0, 0, 0.12),
-      0 0 0 1px var(--primary-200, #bfdbfe) !important;
+      0 0 0 1px var(--primary-200) !important;
     border-radius: 6px !important;
     transform: scale(1.01) !important;
     cursor: grabbing !important;
@@ -231,7 +232,7 @@ const handleDrop = (event: DragEvent) => {
 
     &:hover {
       color: var(--table-drag-handle-color-hover, var(--neutrals-600));
-      background-color: var(--neutrals-100, #f5f5f5);
+      background-color: var(--neutrals-100);
     }
   }
 

package/ui/components/organisms/vc-table/components/TableRowActions.vue

@@ -105,10 +105,11 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch, onMounted, onBeforeUnmount, inject, nextTick } from "vue";
+import { ref, computed, watch, onBeforeUnmount, inject, nextTick } from "vue";
 import { offset, flip, shift } from "@floating-ui/vue";
 import { VcIcon, VcButton } from "@ui/components/atoms";
 import type { TableAction } from "@ui/components/organisms/vc-table/types";
+import { TableContextKey } from "@ui/components/organisms/vc-table/keys";
 import { useFloatingPosition, useTeleportTarget } from "@ui/composables";
 
 const props = withDefaults(
@@ -155,9 +156,7 @@ const emit = defineEmits<{
 }>();
 
 // Inject table context for auto-detecting hover state
-const tableContext = inject<{
-  selectedRowIndex: { value: number | undefined };
-} | null>("tableContext", null);
+const tableContext = inject(TableContextKey, null);
 
 const isOpen = ref(false);
 const isBackdropVisible = ref(false);
@@ -304,12 +303,30 @@ const handleEscape = (event: KeyboardEvent) => {
   }
 };
 
-onMounted(() => {
+let escapeListenerAttached = false;
+
+const attachEscapeListener = () => {
+  if (escapeListenerAttached || typeof document === "undefined") return;
   document.addEventListener("keydown", handleEscape);
+  escapeListenerAttached = true;
+};
+
+const detachEscapeListener = () => {
+  if (!escapeListenerAttached || typeof document === "undefined") return;
+  document.removeEventListener("keydown", handleEscape);
+  escapeListenerAttached = false;
+};
+
+watch(isOpen, (opened) => {
+  if (opened) {
+    attachEscapeListener();
+  } else {
+    detachEscapeListener();
+  }
 });
 
 onBeforeUnmount(() => {
-  document.removeEventListener("keydown", handleEscape);
+  detachEscapeListener();
 });
 </script>
 
@@ -377,7 +394,7 @@ onBeforeUnmount(() => {
     }
 
     &--more {
-      color: var(--neutrals-500, #888);
+      color: var(--neutrals-500);
     }
   }
 
@@ -401,15 +418,15 @@ onBeforeUnmount(() => {
   &__dropdown-item {
     @apply tw-flex tw-items-center tw-gap-3 tw-px-3 tw-py-2 tw-cursor-pointer tw-transition-colors;
     @apply tw-text-sm;
-    color: var(--neutrals-900, #333);
+    color: var(--neutrals-900);
 
     &:hover:not(&--disabled) {
-      background-color: var(--neutrals-100, #f5f5f5);
+      background-color: var(--neutrals-100);
     }
 
     &:focus-visible {
       @apply tw-outline-none;
-      background-color: var(--neutrals-100, #f5f5f5);
+      background-color: var(--neutrals-100);
     }
 
     &--disabled {

package/ui/components/organisms/vc-table/components/TableSelectAllBar.vue

@@ -99,21 +99,21 @@ const cancelText = computed(() => {
 <style lang="scss">
 .vc-table-select-all-bar {
   @apply tw-flex tw-items-center tw-justify-between tw-flex-wrap tw-gap-2 tw-px-4 tw-py-2.5;
-  background-color: var(--table-select-bar-bg, var(--warning-50, #fef3c7));
-  border-bottom: 1px solid var(--table-select-bar-border, var(--warning-300, #fcd34d));
+  background-color: var(--table-select-bar-bg, var(--warning-50));
+  border-bottom: 1px solid var(--table-select-bar-border, var(--warning-300));
 
   &__text {
     @apply tw-text-sm;
-    color: var(--table-select-bar-text, var(--warning-800, #92400e));
+    color: var(--table-select-bar-text, var(--warning-800));
   }
 
   &__select-all-link {
     @apply tw-underline;
-    color: var(--table-select-bar-link, var(--primary-700, #0369a1));
+    color: var(--table-select-bar-link, var(--primary-700));
   }
 
   &__clear {
-    color: var(--table-select-bar-clear, var(--danger-600, #dc2626));
+    color: var(--table-select-bar-clear, var(--danger-600));
   }
 }
 

package/ui/components/organisms/vc-table/components/_internal/TableSkeletonRows.vue

@@ -0,0 +1,110 @@
+<template>
+  <div class="vc-data-table__skeleton">
+    <!-- Column-aware skeleton when columns are available -->
+    <template v-if="columns.length > 0">
+      <TableRow
+        v-for="rowIndex in rows"
+        :key="rowIndex"
+      >
+        <TableCell
+          v-if="showSelectionCell"
+          :style="{ textAlign: 'center', justifyContent: 'center', minWidth: '40px', maxWidth: '40px' }"
+          width="40px"
+          :line-clamp="0"
+        >
+          <VcSkeleton variant="circle" width="18px" height="18px" />
+        </TableCell>
+        <TableCell
+          v-for="col in columns"
+          :key="col.props.id"
+          :width="getColumnWidth(col.props)"
+          :style="getCellStyle(col.props)"
+          :line-clamp="0"
+        >
+          <VcSkeleton
+            v-bind="getSkeletonProps(col.props, rowIndex)"
+          />
+        </TableCell>
+      </TableRow>
+    </template>
+
+    <!-- Fallback: simple full-width skeleton rows when columns aren't parsed yet -->
+    <div
+      v-else
+      v-for="rowIndex in rows"
+      :key="`fallback-${rowIndex}`"
+      class="vc-data-table__skeleton-fallback-row"
+    >
+      <VcSkeleton
+        variant="block"
+        :width="ROW_WIDTHS[(rowIndex - 1) % ROW_WIDTHS.length]"
+        height="16px"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+/**
+ * TableSkeletonRows — renders skeleton placeholder rows matching
+ * the real column layout. Each cell gets a VcSkeleton shaped by
+ * column type (image → square, status → badge, text → line, etc.).
+ */
+import type { ColumnInstance } from "@ui/components/organisms/vc-table/utils/ColumnCollector";
+import type { VcColumnProps } from "@ui/components/organisms/vc-table/types";
+import TableRow from "@ui/components/organisms/vc-table/components/TableRow.vue";
+import TableCell from "@ui/components/organisms/vc-table/components/TableCell.vue";
+import VcSkeleton from "@ui/components/atoms/vc-skeleton/vc-skeleton.vue";
+
+defineProps<{
+  /** Visible columns to render skeleton cells for */
+  columns: ColumnInstance[];
+  /** Number of skeleton rows */
+  rows: number;
+  /** Column width resolver (same as used by real rows) */
+  getColumnWidth: (col: VcColumnProps) => string | undefined;
+  /** Cell style resolver (handles special columns: selection, expander, etc.) */
+  getCellStyle: (col: VcColumnProps) => object | undefined;
+  /** Whether to show a selection cell (checkbox/radio) before data cells */
+  showSelectionCell?: boolean;
+}>();
+
+// Pseudo-random width per row index to avoid uniform look
+const ROW_WIDTHS = ["95%", "80%", "88%", "72%", "90%"];
+
+function getSkeletonProps(
+  col: VcColumnProps,
+  rowIndex: number,
+): { variant: "block" | "circle"; width?: string; height?: string } {
+  const type = col.type || "text";
+
+  // Special columns: selection checkbox, expander, row reorder
+  if (col.selectionMode) {
+    return { variant: "circle", width: "18px", height: "18px" };
+  }
+  if (col.expander || col.rowReorder || col.rowEditor) {
+    return { variant: "block", width: "20px", height: "20px" };
+  }
+
+  // Cell handles column width via getColumnWidth — skeleton fills the cell
+  switch (type) {
+    case "image":
+      return { variant: "block", width: "36px", height: "36px" };
+    case "status":
+    case "status-icon":
+      return { variant: "block", width: "100%", height: "22px" };
+    default:
+      return { variant: "block", width: "100%", height: "16px" };
+  }
+}
+</script>
+
+<style lang="scss">
+.vc-data-table__skeleton {
+  @apply tw-flex tw-flex-col tw-flex-auto tw-overflow-hidden;
+}
+
+.vc-data-table__skeleton-fallback-row {
+  @apply tw-px-4 tw-py-[10px];
+}
+</style>