vueless 1.4.12-beta.8 → 1.5.0

package/ui.data-list/UDataList.vue

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts" generic="TItem extends DataListItem">
 import { useTemplateRef } from "vue";
 import draggable from "vuedraggable/src/vuedraggable";
 
@@ -13,15 +13,18 @@ import { COMPONENT_NAME } from "./constants";
 import defaultConfig from "./config";
 import { useComponentLocaleMessages } from "../composables/useComponentLocaleMassages";
 
-import type { Props, DataListItem, Config } from "./types";
+import type { UnknownObject } from "../types";
+import type { Props, DataListItem, SlotItem, UDataListSlots, Config } from "./types";
 
 defineOptions({ inheritAttrs: false });
 
-const props = withDefaults(defineProps<Props>(), {
-  ...getDefaults<Props, Config>(defaultConfig, COMPONENT_NAME),
+const props = withDefaults(defineProps<Props<TItem>>(), {
+  ...getDefaults<Props<TItem>, Config>(defaultConfig, COMPONENT_NAME),
   list: () => [],
 });
 
+defineSlots<UDataListSlots<TItem>>();
+
 const emit = defineEmits([
   /**
    * Triggers when item is sorted (after drag).
@@ -42,6 +45,12 @@ function isCrossed(element: DataListItem) {
   return Boolean(element.crossed);
 }
 
+function hasNestedList(element: DataListItem) {
+  return Boolean(
+    element.children?.length || (props.nestedKey && (element as UnknownObject)[props.nestedKey]),
+  );
+}
+
 function onDragEnd() {
   const sortData = prepareSortData(props.list);
 
@@ -57,7 +66,7 @@ function prepareSortData(list: DataListItem[] = [], parentValue: string | number
     if (hasItemChildren) {
       const childrenItem = prepareSortData(
         item.children,
-        item[props.valueKey] as string | number | null,
+        (item as UnknownObject)[props.valueKey] as string | number | null,
       );
 
       childrenItem.forEach((item) => sortData.push(item));
@@ -181,36 +190,58 @@ const {
           </div>
 
           <UDataList
-            v-if="element.children?.length"
+            v-if="hasNestedList(element)"
             hide-empty-state-for-nesting
             :list="element.children"
             :group="group"
+            :size="size"
+            :label-key="labelKey"
+            :value-key="valueKey"
+            :nested-key="nestedKey"
+            :animation-duration="animationDuration"
+            :force-fallback="forceFallback"
+            :fallback-on-body="fallbackOnBody"
+            :fallback-class="fallbackClass"
             v-bind="nestedAttrs"
+            :class="!element.children?.length && 'min-h-4'"
             :data-test="getDataTest('table')"
             @drag-sort="onDragEnd"
           >
-            <!-- @vue-ignore -->
-            <template #label="slotProps: { item: DataListItem; crossed: boolean }">
+            <!-- The nested list is built from `element.children` (`DataListItem[]`, not `TItem[]`),
+                 so it yields `SlotItem<DataListItem>`. `SlotItem` is all-optional, so forwarding it
+                 as `SlotItem<TItem>` promises nothing a deep child may lack. -->
+            <template #drag="slotProps">
+              <!--
+                @slot Use it to add something instead of the drag icon.
+                @binding {object} item
+                @binding {string} icon-name
+              -->
+              <slot
+                name="drag"
+                :item="slotProps.item as SlotItem<TItem>"
+                :icon-name="slotProps.iconName"
+              />
+            </template>
+
+            <template #label="slotProps">
               <!--
                 @slot Use it to modify label.
                 @binding {object} item
                 @binding {boolean} crossed
               -->
-              <slot name="label" :item="slotProps.item" :crossed="slotProps.crossed">
-                <div
-                  v-bind="slotProps.crossed ? labelCrossedAttrs : labelAttrs"
-                  v-text="slotProps.item[labelKey]"
-                />
-              </slot>
+              <slot
+                name="label"
+                :item="slotProps.item as SlotItem<TItem>"
+                :crossed="slotProps.crossed"
+              />
             </template>
 
-            <!-- @vue-ignore -->
-            <template #actions="slotProps: { item: DataListItem }">
+            <template #actions="slotProps">
               <!--
                 @slot Use it to add custom actions.
                 @binding {object} item
               -->
-              <slot name="actions" :item="slotProps.item" />
+              <slot name="actions" :item="slotProps.item as SlotItem<TItem>" />
             </template>
           </UDataList>
         </div>

package/ui.data-list/storybook/stories.ts

@@ -6,7 +6,7 @@ import {
   getDocsDescription,
 } from "../../utils/storybook";
 
-import UDataList from "../../ui.data-list/UDataList.vue";
+import UDataListComponent from "../../ui.data-list/UDataList.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
 import UButton from "../../ui.button/UButton.vue";
 import URow from "../../ui.container-row/URow.vue";
@@ -19,6 +19,9 @@ import tooltip from "../../v.tooltip/vTooltip";
 import type { Meta, StoryFn } from "@storybook/vue3-vite";
 import type { Props, DataListItem } from "../types";
 
+/* Generic SFCs are typed as a function, which drops the compiler-generated `__name`. */
+const UDataList = UDataListComponent as typeof UDataListComponent & { __name: string };
+
 interface UDataListArgs extends Props {
   slotTemplate?: string;
   enum: "size";

package/ui.data-list/tests/UDataList.test-d.ts

@@ -0,0 +1,76 @@
+import { describe, it, expectTypeOf } from "vitest";
+
+import type { Props, DataListItem, SlotItem, UDataListSlots } from "../types";
+
+interface UserItem {
+  value: number;
+  label: string;
+  owner: string;
+}
+
+type LabelSlot = NonNullable<UDataListSlots<UserItem>["label"]>;
+type LabelProps = Parameters<LabelSlot>[0];
+
+describe("UDataList types", () => {
+  it("infers the caller's item shape in the label slot", () => {
+    expectTypeOf<LabelProps["item"]["label"]>().toEqualTypeOf<string | undefined>();
+    expectTypeOf<LabelProps["item"]["owner"]>().toEqualTypeOf<string | undefined>();
+    expectTypeOf<LabelProps["crossed"]>().toEqualTypeOf<boolean>();
+  });
+
+  it("does not expose undeclared item properties to a slot", () => {
+    /* An index signature would make any key legal, so `item.nonExistent` must not resolve. */
+    type HasIndexSignature = string extends keyof LabelProps["item"] ? true : false;
+
+    expectTypeOf<HasIndexSignature>().toEqualTypeOf<false>();
+    expectTypeOf<keyof LabelProps["item"]>().not.toEqualTypeOf<string>();
+  });
+
+  it("keeps the reserved item keys available", () => {
+    expectTypeOf<SlotItem<UserItem>["crossed"]>().toEqualTypeOf<boolean | undefined>();
+    expectTypeOf<SlotItem<UserItem>["actions"]>().toEqualTypeOf<boolean | undefined>();
+    expectTypeOf<SlotItem<UserItem>["children"]>().toEqualTypeOf<DataListItem[] | undefined>();
+  });
+
+  it("types the drag and actions slots", () => {
+    type DragProps = Parameters<NonNullable<UDataListSlots<UserItem>["drag"]>>[0];
+    type ActionsProps = Parameters<NonNullable<UDataListSlots<UserItem>["actions"]>>[0];
+
+    expectTypeOf<DragProps["iconName"]>().toEqualTypeOf<string>();
+    expectTypeOf<DragProps["item"]["label"]>().toEqualTypeOf<string | undefined>();
+    expectTypeOf<ActionsProps["item"]["owner"]>().toEqualTypeOf<string | undefined>();
+  });
+
+  it("types the empty slot", () => {
+    type EmptyProps = Parameters<NonNullable<UDataListSlots<UserItem>["empty"]>>[0];
+
+    expectTypeOf<EmptyProps["emptyTitle"]>().toEqualTypeOf<string>();
+    expectTypeOf<EmptyProps["emptyDescription"]>().toEqualTypeOf<string>();
+  });
+
+  it("does not promise the caller's members at depth >= 1", () => {
+    /* The component renders itself with `:list="element.children"`, and `children` is
+     * `DataListItem[]`, not `TItem[]` — so a nested child need not carry the parent's members.
+     * A runtime probe over 3 levels confirmed the grandchild arrives without `owner`. */
+    expectTypeOf<SlotItem<UserItem>["owner"]>().toEqualTypeOf<string | undefined>();
+
+    /* The grandchild shape the probe actually observed must be assignable to every item slot. */
+    type Grandchild = { value: number; label: string; extraOnly: boolean };
+
+    type DragProps = Parameters<NonNullable<UDataListSlots<UserItem>["drag"]>>[0];
+    type ActionsProps = Parameters<NonNullable<UDataListSlots<UserItem>["actions"]>>[0];
+
+    expectTypeOf<Grandchild>().toExtend<LabelProps["item"]>();
+    expectTypeOf<Grandchild>().toExtend<DragProps["item"]>();
+    expectTypeOf<Grandchild>().toExtend<ActionsProps["item"]>();
+
+    /* `nestedKey` can open a nested list from a source `children` does not constrain, so even
+     * an item carrying none of the caller's members must be admitted. */
+    expectTypeOf<{ value: number }>().toExtend<LabelProps["item"]>();
+  });
+
+  it("resolves Props with no type argument", () => {
+    expectTypeOf<Props>().toEqualTypeOf<Props<DataListItem>>();
+    expectTypeOf<Props<UserItem>["list"]>().toEqualTypeOf<UserItem[] | undefined>();
+  });
+});

package/ui.data-list/tests/UDataList.test.ts

@@ -9,7 +9,7 @@ import draggable from "vuedraggable";
 import type { Props, DataListItem } from "../types";
 
 describe("UDataList.vue", () => {
-  const defaultList: DataListItem[] = [
+  const defaultList = [
     { value: 1, label: "Item 1" },
     { value: 2, label: "Item 2", crossed: true },
     { value: 3, label: "Item 3", actions: false },
@@ -253,6 +253,55 @@ describe("UDataList.vue", () => {
       expect(nestedComponent.props("list")).toEqual(nestedList[0].children);
     });
 
+    it("Nesting – renders empty nested drop-zone for childless items when nestedKey is truthy", () => {
+      const component = mount(UDataList, {
+        props: {
+          list: [{ value: 1, label: "Leaf", canNest: true }],
+          nestedKey: "canNest",
+        },
+      });
+
+      const nestedComponent = component.findComponent("[vl-key='nested']");
+
+      expect(nestedComponent.exists()).toBe(true);
+    });
+
+    it("Nesting – does not render drop-zone for childless items when nestedKey value is falsy", () => {
+      const component = mount(UDataList, {
+        props: {
+          list: [{ value: 1, label: "Leaf", canNest: false }],
+          nestedKey: "canNest",
+        },
+      });
+
+      const nestedComponent = component.findComponent("[vl-key='nested']");
+
+      expect(nestedComponent.exists()).toBe(false);
+    });
+
+    it("Nesting – emits dragged item with parentValue of the leaf after drop into empty drop-zone", async () => {
+      const leaf = { value: 1, label: "Leaf", canNest: true, children: [] as DataListItem[] };
+      const list: DataListItem[] = [leaf, { value: 2, label: "Dragged", canNest: true }];
+
+      const component = mount(UDataList, {
+        props: { list, nestedKey: "canNest" },
+      });
+
+      // Simulate vuedraggable moving item 2 into the leaf's (previously empty) nested list.
+      list.splice(1, 1);
+      leaf.children!.push({ value: 2, label: "Dragged", canNest: true });
+
+      await component.findComponent(draggable).vm.$emit("end");
+
+      const sortData = component.emitted("dragSort")?.[0]?.[0] as {
+        value: number;
+        parentValue: unknown;
+      }[];
+      const dragged = sortData.find((item) => item.value === 2);
+
+      expect(dragged?.parentValue).toBe(leaf.value);
+    });
+
     it("Data Test – applies correct data-test attribute", () => {
       const dataTest = "test-data-list";
 

package/ui.data-list/tests/UDataListTypes.vue

@@ -0,0 +1,110 @@
+<!-- Type-level fixture: checked by `npm run ts:check`, never mounted.
+     Proves slot props infer from the `list` prop at a real call site. -->
+<template>
+  <UDataList :list="list">
+    <!-- A nested child may lack the parent's members, so they are optional;
+         the reserved keys (`crossed`, `actions`, `children`) are optional already. -->
+    <template #label="{ item, crossed }">
+      {{ expectOptionalString(item.label) }}
+      {{ expectOptionalString(item.owner) }}
+      {{ expectOptionalNumber(item.value) }}
+      {{ expectBoolean(crossed) }}
+    </template>
+
+    <template #drag="{ item, iconName }">
+      {{ expectOptionalString(item.label) }}
+      {{ expectString(iconName) }}
+    </template>
+
+    <template #actions="{ item }">
+      {{ expectOptionalString(item.owner) }}
+    </template>
+
+    <template #empty="{ emptyTitle, emptyDescription }">
+      {{ expectString(emptyTitle) }}
+      {{ expectString(emptyDescription) }}
+    </template>
+  </UDataList>
+
+  <!-- A list from a non-literal source still exposes the declared item shape. -->
+  <UDataList :list="typedList">
+    <template #label="{ item }">{{ expectOptionalString(item.label) }}</template>
+  </UDataList>
+
+  <UDataList :list="list">
+    <template #label="{ item }">
+      <!-- @vue-expect-error `nonExistent` is not a key of the inferred item. -->
+      {{ item.nonExistent }}
+    </template>
+  </UDataList>
+
+  <!-- Regression guard: an item slot must never promise the caller's members as present.
+       The component renders ITSELF with `:list="element.children"`, and `children` is
+       `DataListItem[]`, not `TItem[]` — a runtime probe over 3 levels observed the
+       grandchild arriving with `{ value, label, extraOnly }` and NO `owner`. -->
+  <UDataList :list="deepList">
+    <template #label="{ item }">
+      <!-- @vue-expect-error a grandchild at depth 2 need not carry `owner`. -->
+      {{ expectString(item.owner) }}
+    </template>
+    <template #drag="{ item }">
+      <!-- @vue-expect-error a nested child need not carry `label`. -->
+      {{ expectString(item.label) }}
+    </template>
+    <template #actions="{ item }">
+      <!-- @vue-expect-error a nested child need not carry `value`. -->
+      {{ expectNumber(item.value) }}
+    </template>
+  </UDataList>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+
+import UDataList from "../UDataList.vue";
+
+interface UserItem {
+  value: number;
+  label: string;
+  owner: string;
+}
+
+const list = [{ value: 1, label: "a", owner: "alice" }];
+const typedList = ref<UserItem[]>([]);
+
+/* A parent whose grandchild lacks the parent's members — exactly what the probe observed. */
+const deepList = [
+  {
+    value: 1,
+    label: "Parent",
+    owner: "alice",
+    children: [
+      {
+        value: 11,
+        label: "Child",
+        children: [{ value: 111, label: "Grandchild", extraOnly: true }],
+      },
+    ],
+  },
+];
+
+function expectString(value: string) {
+  return value;
+}
+
+function expectNumber(value: number) {
+  return value;
+}
+
+function expectBoolean(value: boolean) {
+  return value;
+}
+
+function expectOptionalString(value: string | undefined) {
+  return value;
+}
+
+function expectOptionalNumber(value: number | undefined) {
+  return value;
+}
+</script>

package/ui.data-list/types.ts

@@ -2,7 +2,7 @@ import defaultConfig from "./config";
 
 import DraggableContext from "vuedraggable";
 
-import type { ComponentConfig, UnknownType } from "../types";
+import type { ComponentConfig, UnknownObject } from "../types";
 
 export type Config = typeof defaultConfig;
 
@@ -11,18 +11,44 @@ export interface DragMoveEvent extends DragEvent {
   relatedContext: typeof DraggableContext | null;
 }
 
-export interface DataListItem {
+export interface BaseDataListItem {
   crossed?: boolean;
   actions?: boolean;
   children?: DataListItem[];
-  [key: string]: UnknownType | DataListItem[];
 }
 
-export interface Props {
+/* Any object shape is a valid item, only reserved item keys are type checked. */
+export type DataListItem = BaseDataListItem & (object | UnknownObject);
+
+/* Drops `DataListItem`'s index signature so slot items only expose statically known keys. */
+type KnownKeys<T> = {
+  [K in keyof T as string extends K ? never : number extends K ? never : K]: T[K];
+};
+
+/**
+ * Item shape exposed to slots: the caller's item plus the reserved item keys.
+ *
+ * `TItem`'s own keys are optional. The component renders itself for nested children
+ * (`:list="element.children"`), and `BaseDataListItem.children` is `DataListItem[]`, not `TItem[]`
+ * — so a child need not carry the parent's members. `nestedKey` can open a nested list from a
+ * different source entirely. `BaseDataListItem`'s keys are optional already, so nothing is
+ * promised that can be absent.
+ */
+export type SlotItem<TItem extends DataListItem = DataListItem> = Partial<KnownKeys<TItem>> &
+  BaseDataListItem;
+
+export interface UDataListSlots<TItem extends DataListItem = DataListItem> {
+  empty?: (props: { emptyTitle: string; emptyDescription: string }) => unknown;
+  drag?: (props: { item: SlotItem<TItem>; iconName: string }) => unknown;
+  label?: (props: { item: SlotItem<TItem>; crossed: boolean }) => unknown;
+  actions?: (props: { item: SlotItem<TItem> }) => unknown;
+}
+
+export interface Props<TItem extends DataListItem = DataListItem> {
   /**
    * Data item options.
    */
-  list?: DataListItem[];
+  list?: TItem[];
 
   /**
    * Group name.
@@ -70,6 +96,12 @@ export interface Props {
    */
   hideEmptyStateForNesting?: boolean;
 
+  /**
+   * Item key whose truthy value renders an empty nested drop-zone,
+   * so a deeper level can be created by drag even without children.
+   */
+  nestedKey?: string;
+
   /**
    * Component config object.
    */

package/ui.data-table/UTable.vue

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts" generic="TRow extends TableRow, TCol extends string = string">
 import {
   shallowRef,
   ref,
@@ -47,13 +47,16 @@ import type {
   FlatRow,
   ColumnObject,
   SearchMatch,
+  TableRow,
   UTableRowProps,
+  UTableSlots,
+  SelectedSlotRow,
 } from "./types";
 
 defineOptions({ inheritAttrs: false });
 
-const props = withDefaults(defineProps<Props>(), {
-  ...getDefaults<Props, Config>(defaultConfig, COMPONENT_NAME),
+const props = withDefaults(defineProps<Props<TRow, TCol>>(), {
+  ...getDefaults<Props<TRow, TCol>, Config>(defaultConfig, COMPONENT_NAME),
   columns: () => [],
   rows: () => [],
   dateDivider: () => [],
@@ -112,6 +115,8 @@ const emit = defineEmits([
   "search",
 ]);
 
+defineSlots<UTableSlots<TRow, TCol>>();
+
 const slots = useSlots();
 
 const selectAll = ref(false);
@@ -145,7 +150,7 @@ const sortedRows: ComputedRef<FlatRow[]> = computed(() => {
     typeof column === "object" ? column.key : column,
   );
 
-  const keyOrder = new Map(headerKeys.map((key, i) => [key, i]));
+  const keyOrder = new Map<string, number>(headerKeys.map((key, i) => [key, i]));
 
   return flatTableRows.value.map((row) => {
     const entries = Object.entries(row);
@@ -171,6 +176,11 @@ const isFooterSticky = computed(() => {
 
 const normalizedColumns = computed(() => normalizeColumns(props.columns));
 
+/* Slot keys are narrowed to `TCol` for callers; internal dispatch is driven by runtime strings. */
+function headerSlotName(key: string) {
+  return `header-${key}` as `header-${TCol}`;
+}
+
 const visibleColumns = computed(() => {
   return normalizedColumns.value.filter((column) => column.isShown !== false);
 });
@@ -208,11 +218,14 @@ const isCheckedMoreOneTableItems = computed(() => {
   return Boolean(localSelectedRows.value.length);
 });
 
+/* Select-all includes nested children, which need not carry `TRow`'s members. */
+const selectedRowsSlotValue = computed(() => localSelectedRows.value as SelectedSlotRow<TRow>[]);
+
 const tableRowWidthStyle = computed(() => ({
   width: `${tableWidth.value / PX_IN_REM}rem`,
 }));
 
-const flatTableRows = computed(() => getFlatRows(props.rows));
+const flatTableRows = computed(() => getFlatRows(props.rows as Row[]));
 
 const visibleFlatRows = computed(() => {
   const expanded = expandedRowsSet.value;
@@ -532,7 +545,7 @@ onBeforeUnmount(() => {
 
 function onChangeSelectedRows() {
   if (!isEqual(props.selectedRows, localSelectedRows.value)) {
-    localSelectedRows.value = props.selectedRows;
+    localSelectedRows.value = props.selectedRows as Row[];
   }
 }
 
@@ -838,6 +851,50 @@ function onBodyDoubleClick(event: MouseEvent) {
   onDoubleClickRow(rowData);
 }
 
+// Detect double-tap on touch devices and dispatch a native `dblclick`,
+// which bubbles to the tbody and triggers onBodyDoubleClick.
+const DOUBLE_TAP_DELAY = 300;
+const DOUBLE_TAP_MAX_MOVE = 24;
+
+let lastTapTime = 0;
+let lastTapRow: Element | null = null;
+let lastTapX = 0;
+let lastTapY = 0;
+
+function onBodyTouchEnd(event: TouchEvent) {
+  if (event.changedTouches.length !== 1) return;
+
+  const [touch] = event.changedTouches;
+  const target = touch.target as HTMLElement | null;
+  const row = target?.closest("tr[data-row-id]") ?? null;
+
+  if (!row) {
+    lastTapRow = null;
+
+    return;
+  }
+
+  const now = event.timeStamp;
+  const isSameRow = row === lastTapRow;
+  const isQuick = now - lastTapTime < DOUBLE_TAP_DELAY;
+  const isNear =
+    Math.abs(touch.clientX - lastTapX) < DOUBLE_TAP_MAX_MOVE &&
+    Math.abs(touch.clientY - lastTapY) < DOUBLE_TAP_MAX_MOVE;
+
+  if (isSameRow && isQuick && isNear) {
+    lastTapTime = 0;
+    lastTapRow = null;
+    row.dispatchEvent(new MouseEvent("dblclick", { bubbles: true, cancelable: true }));
+
+    return;
+  }
+
+  lastTapTime = now;
+  lastTapRow = row;
+  lastTapX = touch.clientX;
+  lastTapY = touch.clientY;
+}
+
 function onChangeSelectAll(selectAll: boolean) {
   if (selectAll && canSelectAll.value) {
     localSelectedRows.value = [...flatTableRows.value];
@@ -1256,7 +1313,7 @@ const BodyRows = () =>
             @binding {object} column
             @binding {number} index
           -->
-          <slot :name="`header-${column.key}`" :column="column" :index="index" />
+          <slot :name="headerSlotName(column.key)" :column="column" :index="index" />
         </template>
 
         <template v-else>
@@ -1294,7 +1351,7 @@ const BodyRows = () =>
         @slot Use it to add action buttons within the actions header, which appear when rows are selected.
         @binding {array} selected-rows
       -->
-      <slot name="header-actions" :selected-rows="localSelectedRows" />
+      <slot name="header-actions" :selected-rows="selectedRowsSlotValue" />
 
       <ULoaderProgress :loading="progressLoading" v-bind="stickyHeaderLoaderAttrs" />
     </div>
@@ -1326,7 +1383,7 @@ const BodyRows = () =>
         @slot Use it to add action buttons within the actions header, which appear when rows are selected.
         @binding {array} selected-rows
       -->
-      <slot name="header-actions" :selected-rows="localSelectedRows" />
+      <slot name="header-actions" :selected-rows="selectedRowsSlotValue" />
 
       <ULoaderProgress :loading="progressLoading" v-bind="stickyHeaderLoaderAttrs" />
     </div>
@@ -1392,7 +1449,7 @@ const BodyRows = () =>
                     index,
                   })
                 "
-                :name="`header-${column.key}`"
+                :name="headerSlotName(column.key)"
                 :column="column"
                 :index="index"
               />
@@ -1411,6 +1468,7 @@ const BodyRows = () =>
           v-bind="bodyAttrs"
           @click="onBodyClick"
           @dblclick="onBodyDoubleClick"
+          @touchend="onBodyTouchEnd"
         >
           <tr
             v-if="hasBeforeFirstRowSlot"

package/ui.data-table/UTableRow.vue

@@ -400,6 +400,7 @@ function renderNestedFirstCell(value: Cell, key: string, cellIndex: number): VNo
 
 function renderTableCell(value: Cell, key: string, index: number): VNode {
   const keyStr = String(key);
+  const column = props.columns.find((col) => col.key === key) ?? props.columns[index];
 
   const nestedCellNode = isNestedFirstCell(index)
     ? renderNestedFirstCell(value, key, index)
@@ -414,12 +415,12 @@ function renderTableCell(value: Cell, key: string, index: number): VNode {
       ...props.attrs.bodyCellBaseAttrs.value,
       class: cx([
         props.attrs.bodyCellBaseAttrs.value.class,
-        props.columns[index].tdClass,
+        column.tdClass,
         getCellClasses(props.row, keyStr),
-        getStickyColumnClass(props.columns[index]),
+        getStickyColumnClass(column),
         getSearchMatchCellClass(keyStr),
       ]),
-      style: getStickyColumnStyle(props.columns[index]),
+      style: getStickyColumnStyle(column),
       "data-cell-key": key,
       "data-test": getDataTest(`${key}-cell`),
     },

package/ui.data-table/config.ts

@@ -45,7 +45,7 @@ export default /*tw*/ {
     base: "min-w-full border-none text-medium w-auto table-auto border-separate border-spacing-0",
     variants: {
       virtualScroll: {
-        true: "table-layout-fixed w-full",
+        true: "table-fixed w-full",
       },
     },
   },