vueless 1.3.2 → 1.3.3

package/icons/storybook/keep.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="m640.22-454.22 86 77v68.37H514.07v240.28L480-34.5l-34.07-34.07v-240.28H234.02v-68.37l80-77v-327.45h-50v-68.13h426.2v68.13h-50v327.45Zm-313.96 77h301.48l-55.89-51.89v-352.56h-189.7v352.56l-55.89 51.89Zm150.74 0Z"/></svg>

package/icons/storybook/keyboard_arrow_down.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M480-338.26 234.26-584 283-632.74l197 197 197-197L725.74-584 480-338.26Z"/></svg>

package/icons/storybook/keyboard_arrow_up.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="m480-548.26-197 197L234.26-400 480-645.74 725.74-400 677-351.26l-197-197Z"/></svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.3.2",
+  "version": "1.3.3",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "homepage": "https://vueless.com",

package/ui.data-table/UTable.vue

@@ -40,7 +40,9 @@ import type {
   Config,
   DateDivider,
   FlatRow,
+  ColumnObject,
 } from "./types";
+import { StickySide } from "./types";
 
 defineOptions({ inheritAttrs: false });
 
@@ -166,13 +168,20 @@ const visibleColumns = computed(() => {
   return normalizedColumns.value.filter((column) => column.isShown !== false);
 });
 
+const columnPositions = ref<Map<string, number>>(new Map());
+
 const colsCount = computed(() => {
   return normalizedColumns.value.length + 1;
 });
 
-const isShownActionsHeader = computed(
-  () => hasSlotContent(slots["header-actions"]) && Boolean(localSelectedRows.value.length),
-);
+const isShownActionsHeader = computed(() => {
+  const hasSelectedRows = Boolean(localSelectedRows.value.length);
+  const hasHeaderActions = hasSlotContent(slots["header-actions"], {
+    "selected-rows": localSelectedRows.value,
+  });
+
+  return hasSelectedRows && hasHeaderActions;
+});
 
 const isHeaderSticky = computed(() => {
   const positionForFixHeader =
@@ -212,6 +221,8 @@ const tableRowAttrs = computed(() => ({
   bodyCellNestedIconWrapperAttrs,
   bodyRowCheckedAttrs,
   bodyRowAttrs,
+  bodyCellStickyLeftAttrs,
+  bodyCellStickyRightAttrs,
 }));
 
 watch(localSelectedRows, onChangeLocalSelectedRows, { deep: true });
@@ -223,15 +234,19 @@ watch(isFooterSticky, (newValue) =>
   newValue ? nextTick(setFooterCellWidth) : setFooterCellWidth(null),
 );
 
-onMounted(() => {
+onMounted(async () => {
   document.addEventListener("keyup", onKeyupEsc);
   document.addEventListener("scroll", onScroll, { passive: true });
   window.addEventListener("resize", onWindowResize);
+
+  await nextTick();
+  calculateStickyColumnPositions();
 });
 
 onUpdated(() => {
   tableHeight.value = Number(tableWrapperRef.value?.offsetHeight);
   tableWidth.value = Number(tableWrapperRef.value?.offsetWidth);
+  calculateStickyColumnPositions();
 });
 
 onBeforeUnmount(() => {
@@ -257,6 +272,106 @@ function onWindowResize() {
 
   setHeaderCellWidth();
   setFooterCellWidth();
+  calculateStickyColumnPositions();
+}
+
+function calculateStickyColumnPositions() {
+  if (!headerRowRef.value) return;
+
+  const headerCells = [...headerRowRef.value.children] as HTMLElement[];
+  const positions = new Map<string, number>();
+  let leftOffset = 0;
+
+  if (props.selectable) {
+    leftOffset = headerCells[0]?.offsetWidth || 0;
+  }
+
+  visibleColumns.value.forEach((column, index) => {
+    const cellIndex = props.selectable ? index + 1 : index;
+    const cell = headerCells[cellIndex];
+
+    if (!cell) return;
+
+    if (column.sticky === StickySide.Left) {
+      positions.set(column.key, leftOffset);
+      leftOffset += cell.offsetWidth;
+    }
+  });
+
+  let rightOffset = 0;
+
+  for (let i = visibleColumns.value.length - 1; i >= 0; i--) {
+    const column = visibleColumns.value[i];
+    const cellIndex = props.selectable ? i + 1 : i;
+    const cell = headerCells[cellIndex];
+
+    if (!cell) continue;
+
+    if (column.sticky === StickySide.Right) {
+      positions.set(column.key, rightOffset);
+      rightOffset += cell.offsetWidth;
+    }
+  }
+
+  let hasChanged = positions.size !== columnPositions.value.size;
+
+  if (!hasChanged) {
+    for (const [key, value] of positions) {
+      if (columnPositions.value.get(key) !== value) {
+        hasChanged = true;
+        break;
+      }
+    }
+  }
+
+  if (hasChanged) {
+    columnPositions.value = positions;
+  }
+}
+
+function getStickyColumnStyle(column: ColumnObject) {
+  const position = columnPositions.value.get(column.key);
+
+  if (position === undefined) return {};
+
+  if (column.sticky === StickySide.Left) {
+    return { left: `${position / PX_IN_REM}rem` };
+  }
+
+  if (column.sticky === StickySide.Right) {
+    return { right: `${position / PX_IN_REM}rem` };
+  }
+
+  return {};
+}
+
+function getStickyColumnClass(column: ColumnObject) {
+  if (column.sticky === StickySide.Left) {
+    return headerCellStickyLeftAttrs.value.class as string;
+  }
+
+  if (column.sticky === StickySide.Right) {
+    return headerCellStickyRightAttrs.value.class as string;
+  }
+
+  return "";
+}
+
+function getHeaderCheckboxCellClass() {
+  return cx([
+    headerCellCheckboxAttrs.value.class as string,
+    visibleColumns.value[0]?.sticky === StickySide.Left
+      ? (headerCellStickyLeftAttrs.value.class as string)
+      : "",
+  ]);
+}
+
+function getHeaderCellClass(column: ColumnObject) {
+  return cx([
+    headerCellBaseAttrs.value.class as string,
+    column.thClass,
+    getStickyColumnClass(column),
+  ]);
 }
 
 function getDateDividerData(rowDate: string | Date | undefined) {
@@ -510,6 +625,10 @@ const {
   bodyCellNestedIconWrapperAttrs,
   bodyRowCheckedAttrs,
   bodyRowAttrs,
+  headerCellStickyLeftAttrs,
+  headerCellStickyRightAttrs,
+  bodyCellStickyLeftAttrs,
+  bodyCellStickyRightAttrs,
 } = useUI<Config>(defaultConfig, mutatedProps);
 </script>
 
@@ -652,7 +771,12 @@ const {
           </tr>
 
           <tr ref="header-row" v-bind="headerRowAttrs">
-            <th v-if="selectable" v-bind="headerCellCheckboxAttrs">
+            <th
+              v-if="selectable"
+              v-bind="headerCellCheckboxAttrs"
+              :class="getHeaderCheckboxCellClass()"
+              :style="visibleColumns[0]?.sticky === StickySide.Left ? { left: '0' } : {}"
+            >
               <UCheckbox
                 v-model="selectAll"
                 size="md"
@@ -676,7 +800,8 @@ const {
               v-for="(column, index) in visibleColumns"
               :key="index"
               v-bind="headerCellBaseAttrs"
-              :class="cx([(headerCellBaseAttrs as any).class, column.thClass])"
+              :class="getHeaderCellClass(column)"
+              :style="getStickyColumnStyle(column)"
             >
               <!--
                 @slot Use it to customize needed header cell.
@@ -684,7 +809,7 @@ const {
                 @binding {number} index
               -->
               <slot
-                v-if="hasSlotContent($slots[`header-${column.key}`])"
+                v-if="hasSlotContent($slots[`header-${column.key}`], { column, index })"
                 :name="`header-${column.key}`"
                 :column="column"
                 :index="index"
@@ -754,6 +879,7 @@ const {
               :data-test="getDataTest('row')"
               :is-expanded="localExpandedRows.includes(row.id)"
               :is-checked="isRowSelected(row)"
+              :column-positions="columnPositions"
               @click="onClickRow"
               @dblclick="onDoubleClickRow"
               @click-cell="onClickCell"

package/ui.data-table/UTableRow.vue

@@ -14,7 +14,8 @@ import UCheckbox from "../ui.form-checkbox/UCheckbox.vue";
 
 import defaultConfig from "./config";
 
-import type { Cell, CellObject, Row, UTableRowProps, Config } from "./types";
+import { StickySide } from "./types";
+import type { Cell, CellObject, Row, UTableRowProps, Config, ColumnObject } from "./types";
 
 const NESTED_ROW_SHIFT_REM = 1.5;
 const LAST_NESTED_ROW_SHIFT_REM = 1;
@@ -166,6 +167,34 @@ function onInputCheckbox(row: Row) {
   emit("toggleCheckbox", row);
 }
 
+function getStickyColumnStyle(column: ColumnObject) {
+  const position = props.columnPositions.get(column.key);
+
+  if (position === undefined) return {};
+
+  if (column.sticky === StickySide.Left) {
+    return { left: `${position / PX_IN_REM}rem` };
+  }
+
+  if (column.sticky === StickySide.Right) {
+    return { right: `${position / PX_IN_REM}rem` };
+  }
+
+  return {};
+}
+
+function getStickyColumnClass(column: ColumnObject) {
+  if (column.sticky === StickySide.Left) {
+    return props.attrs.bodyCellStickyLeftAttrs.value.class as string;
+  }
+
+  if (column.sticky === StickySide.Right) {
+    return props.attrs.bodyCellStickyRightAttrs.value.class as string;
+  }
+
+  return "";
+}
+
 const { getDataTest } = useUI<Config>(defaultConfig);
 </script>
 
@@ -179,8 +208,17 @@ const { getDataTest } = useUI<Config>(defaultConfig);
   >
     <td
       v-if="selectable"
-      :style="getNestedCheckboxShift()"
+      :style="{
+        ...getNestedCheckboxShift(),
+        ...(columns[0]?.sticky === StickySide.Left ? { left: '0' } : {}),
+      }"
       v-bind="attrs.bodyCellCheckboxAttrs.value"
+      :class="
+        cx([
+          attrs.bodyCellCheckboxAttrs.value.class,
+          columns[0]?.sticky === StickySide.Left ? attrs.bodyCellStickyLeftAttrs.value.class : '',
+        ])
+      "
       @click.stop
       @dblclick.stop
     >
@@ -198,7 +236,14 @@ const { getDataTest } = useUI<Config>(defaultConfig);
       v-for="(value, key, index) in mapRowColumns(row, columns)"
       :key="index"
       v-bind="attrs.bodyCellBaseAttrs.value"
-      :class="cx([columns[index].tdClass, getCellClasses(row, String(key))])"
+      :class="
+        cx([
+          columns[index].tdClass,
+          getCellClasses(row, String(key)),
+          getStickyColumnClass(columns[index]),
+        ])
+      "
+      :style="getStickyColumnStyle(columns[index])"
       @click="onClickCell(value, row, key)"
     >
       <div

package/ui.data-table/config.ts

@@ -30,7 +30,7 @@ export default /*tw*/ {
   headerActionsCheckbox: "{UCheckbox}",
   headerActionsCounter: "{>headerCounterBase} -ml-1.5",
   tableWrapper: "border border-solid border-muted rounded-medium bg-default overflow-x-auto",
-  table: "min-w-full border-none text-medium w-full table-auto",
+  table: "min-w-full border-none text-medium w-auto table-auto",
   header:
     "border-b border-muted [&>tr:first-child>*]:first:rounded-tl-medium [&>tr:last-child>*]:last:rounded-tr-medium relative",
   headerRow: "",
@@ -44,12 +44,15 @@ export default /*tw*/ {
       },
     },
   },
+  headerCellSticky: "sticky z-20 bg-default",
+  headerCellStickyLeft: "{>headerCellSticky}",
+  headerCellStickyRight: "{>headerCellSticky}",
   headerCellCheckbox: "{>headerCellBase} w-10 pr-2",
   headerCheckbox: "{UCheckbox}",
   headerCounter: "{>stickyHeaderCounter} ml-px",
   headerLoader: "{ULoaderProgress} absolute top-auto bottom-0",
   body: "group/body divide-none",
-  bodyRow: "hover:bg-muted",
+  bodyRow: "bg-default hover:bg-muted",
   bodyRowChecked: "bg-lifted transition",
   beforeBodyRow: "!p-0",
   beforeBodyRowChecked: "{>bodyRowChecked} !p-0",
@@ -65,6 +68,9 @@ export default /*tw*/ {
       },
     },
   },
+  bodyCellSticky: "sticky z-10 bg-inherit",
+  bodyCellStickyLeft: "{>bodyCellSticky}",
+  bodyCellStickyRight: "{>bodyCellSticky}",
   bodyCellContent: "text-ellipsis overflow-hidden",
   bodyCellCheckbox: "{>bodyCellBase} pr-2",
   bodyCellDateDivider: "",
@@ -100,7 +106,7 @@ export default /*tw*/ {
     },
   },
   stickyFooterRow: `
-    fixed bottom-0 -ml-px border-b border-solid border-muted bg-default
+    fixed bottom-0 -ml-px border border-solid border-muted bg-default
     collapse group-[*]/footer-fixed:[visibility:inherit]
   `,
   i18n: {

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

@@ -1,4 +1,5 @@
 import type { Meta, StoryFn } from "@storybook/vue3-vite";
+
 import {
   getArgTypes,
   getSlotNames,
@@ -18,7 +19,9 @@ import URow from "../../ui.container-row/URow.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
 import ULoader from "../../ui.loader/ULoader.vue";
 
-import type { Row, Props } from "../types";
+import tooltip from "../../v.tooltip/vTooltip";
+import type { Row, Props, ColumnObject } from "../types";
+import { StickySide } from "../types";
 
 interface UTableArgs extends Props {
   slotTemplate?: string;
@@ -476,6 +479,220 @@ DateDividerCustomLabel.parameters = {
   },
 };
 
+export const StickyColumns: StoryFn<UTableArgs> = (args: UTableArgs) => ({
+  components: { UTable, URow, UBadge, UButton, UIcon },
+  directives: { tooltip },
+  setup() {
+    function toggleLeft(key: string) {
+      const column = args.columns.find((item) => (item as ColumnObject).key === key);
+
+      if (!column || typeof column === "string") return;
+
+      column.sticky = column.sticky === StickySide.Left ? undefined : StickySide.Left;
+      args.columns = args.columns.slice();
+    }
+
+    function toggleRight(key: string) {
+      const column = args.columns.find((item) => (item as ColumnObject).key === key);
+
+      if (!column || typeof column === "string") return;
+
+      column.sticky = column.sticky === StickySide.Right ? undefined : StickySide.Right;
+      args.columns = args.columns.slice();
+    }
+
+    function isPinned(key: string, side: string) {
+      const column = args.columns.find((item) => (item as ColumnObject).key === key);
+
+      if (!column || typeof column === "string") return;
+
+      return column?.sticky === side;
+    }
+
+    return { args, toggleLeft, toggleRight, isPinned };
+  },
+  template: `
+    <UTable v-bind="args">
+      <template #header-orderId="{ column }">
+        <URow gap="2xs" align="center">
+          <div>{{ column.label }}</div>
+          <UIcon
+            name="keep"
+            size="xs"
+            interactive
+            v-tooltip="isPinned('orderId', 'left') ? 'Unpin left' : 'Pin left'"
+            :color="isPinned('orderId', 'left') ? 'primary' : 'inherit'"
+            @click.stop="toggleLeft('orderId')"
+          />
+        </URow>
+      </template>
+
+      <template #header-customerName="{ column }">
+        <URow gap="2xs" align="center">
+          <div>{{ column.label }}</div>
+          <UIcon
+            name="keep"
+            size="xs"
+            interactive
+            v-tooltip="isPinned('customerName', 'left') ? 'Unpin left' : 'Pin left'"
+            :color="isPinned('customerName', 'left') ? 'primary' : 'inherit'"
+            @click.stop="toggleLeft('customerName')"
+          />
+        </URow>
+      </template>
+
+      <template #header-email="{ column }">
+        <URow gap="2xs" align="center">
+          <div>{{ column.label }}</div>
+          <UIcon
+            name="keep"
+            size="xs"
+            interactive
+            v-tooltip="isPinned('email', 'left') ? 'Unpin left' : 'Pin left'"
+            :color="isPinned('email', 'left') ? 'primary' : 'inherit'"
+            @click.stop="toggleLeft('email')"
+          />
+        </URow>
+      </template>
+
+      <template #header-totalPrice="{ column }">
+        <URow gap="2xs" align="center">
+          <div>{{ column.label }}</div>
+          <UIcon
+            name="keep"
+            size="xs"
+            interactive
+            v-tooltip="isPinned('totalPrice', 'right') ? 'Unpin right' : 'Pin right'"
+            :color="isPinned('totalPrice', 'right') ? 'primary' : 'inherit'"
+            @click.stop="toggleRight('totalPrice')"
+          />
+        </URow>
+      </template>
+
+      <template #header-action="{ column }">
+        <URow gap="2xs" align="center">
+          <div>{{ column.label }}</div>
+          <UIcon
+            name="keep"
+            size="xs"
+            interactive
+            v-tooltip="isPinned('action', 'right') ? 'Unpin right' : 'Pin right'"
+            :color="isPinned('action', 'right') ? 'primary' : 'inherit'"
+            @click.stop="toggleRight('action')"
+          />
+        </URow>
+      </template>
+
+      <template #cell-status="{ value }">
+        <UBadge
+          :label="value"
+          variant="soft"
+          :color="
+            value === 'Delivered' ? 'success' :
+            value === 'Cancelled' ? 'error' :
+            value === 'Pending' ? 'notice' :
+            value === 'Shipped' ? 'info' : ''
+          "
+        />
+      </template>
+
+      <template #cell-action>
+        <UButton label="View" size="xs" variant="soft" />
+      </template>
+    </UTable>
+  `,
+});
+StickyColumns.args = {
+  columns: [
+    { key: "orderId", label: "Order ID", sticky: "left" },
+    { key: "customerName", label: "Customer Name", thClass: "min-w-[200px]" },
+    { key: "email", label: "Email", thClass: "min-w-[250px]", sticky: "left" },
+    { key: "phone", label: "Phone", thClass: "min-w-[150px]" },
+    { key: "address", label: "Address", thClass: "min-w-[300px]" },
+    { key: "city", label: "City", thClass: "min-w-[150px]" },
+    { key: "country", label: "Country", thClass: "min-w-[150px]" },
+    { key: "status", label: "Status", thClass: "min-w-[120px]" },
+    { key: "totalPrice", label: "Total Price", thClass: "min-w-[120px]" },
+    { key: "action", label: "Actions", sticky: "right", thClass: "min-w-[100px]" },
+  ],
+  rows: [
+    {
+      id: "row-1",
+      orderId: "ORD-1001",
+      customerName: "Alice Johnson",
+      email: "alice.johnson@example.com",
+      phone: "+1 (555) 123-4567",
+      address: "123 Main Street, Apt 4B",
+      city: "New York",
+      country: "USA",
+      status: "Delivered",
+      totalPrice: "$245.99",
+      action: "View",
+    },
+    {
+      id: "row-2",
+      orderId: "ORD-1002",
+      customerName: "Michael Smith",
+      email: "michael.smith@example.com",
+      phone: "+1 (555) 234-5678",
+      address: "456 Oak Avenue, Suite 200",
+      city: "Los Angeles",
+      country: "USA",
+      status: "Pending",
+      totalPrice: "$189.50",
+      action: "View",
+    },
+    {
+      id: "row-3",
+      orderId: "ORD-1003",
+      customerName: "Emma Brown",
+      email: "emma.brown@example.com",
+      phone: "+1 (555) 345-6789",
+      address: "789 Pine Road, Building C",
+      city: "Chicago",
+      country: "USA",
+      status: "Shipped",
+      totalPrice: "$312.75",
+      action: "View",
+    },
+    {
+      id: "row-4",
+      orderId: "ORD-1004",
+      customerName: "James Wilson",
+      email: "james.wilson@example.com",
+      phone: "+1 (555) 456-7890",
+      address: "321 Elm Street, Floor 3",
+      city: "Houston",
+      country: "USA",
+      status: "Cancelled",
+      totalPrice: "$156.20",
+      action: "View",
+    },
+    {
+      id: "row-5",
+      orderId: "ORD-1005",
+      customerName: "Sophia Davis",
+      email: "sophia.davis@example.com",
+      phone: "+1 (555) 567-8901",
+      address: "654 Maple Drive, Unit 12",
+      city: "Phoenix",
+      country: "USA",
+      status: "Delivered",
+      totalPrice: "$428.90",
+      action: "View",
+    },
+  ],
+};
+StickyColumns.parameters = {
+  docs: {
+    description: {
+      story:
+        "Pin columns to the left or right edge of the table when scrolling horizontally. " +
+        "Use the header pin icons to toggle pinning for each column.",
+    },
+  },
+};
+
 export const HeaderCounterSlot = DefaultTemplate.bind({});
 HeaderCounterSlot.args = {
   selectable: true,
@@ -491,7 +708,7 @@ export const HeaderKeySlot = DefaultTemplate.bind({});
 HeaderKeySlot.args = {
   slotTemplate: `
     <template #header-status="{ column }">
-      <UBadge :label="column?.label" />
+      <UBadge :label="column.label" />
     </template>
   `,
 };
@@ -620,9 +837,9 @@ ExpandSlot.args = {
   slotTemplate: `
     <template #expand="{ expanded }">
       <UButton
-        :icon="expanded ? 'remove' : 'add'"
-        variant="ghost"
-        size="xs"
+        :icon="expanded ? 'keyboard_arrow_up' : 'keyboard_arrow_down'"
+        variant="soft"
+        size="2xs"
         square
       />
     </template>
@@ -738,7 +955,7 @@ EmptyStateSlot.args = {
   },
   slotTemplate: `
     <template #empty-state>
-      <ULoader loading size="lg" :config="{ loader: 'mx-auto mb-4' }" />
+      <ULoader loading :config="{ loader: 'mx-auto mb-4' }" />
       <p class="text-center">Fetching latest data, please wait...</p>
     </template>
   `,

package/ui.data-table/tests/UTableRow.test.ts

@@ -34,6 +34,8 @@ describe("UTableRow.vue", () => {
     bodyCellNestedIconWrapperAttrs: ref({ class: "icon-wrapper" }),
     bodyRowCheckedAttrs: ref({ class: "row-checked" }),
     bodyRowAttrs: ref({ class: "row-base" }),
+    bodyCellStickyLeftAttrs: ref({ class: "sticky-left" }),
+    bodyCellStickyRightAttrs: ref({ class: "sticky-right" }),
   };
 
   const defaultConfig = {
@@ -44,6 +46,12 @@ describe("UTableRow.vue", () => {
   } as Config;
 
   function getDefaultProps(overrides = {}) {
+    const columnPositions = new Map<string, number>();
+
+    columnPositions.set("name", 0);
+    columnPositions.set("email", 100);
+    columnPositions.set("role", 200);
+
     return {
       row: defaultRow,
       columns: defaultColumns,
@@ -56,6 +64,7 @@ describe("UTableRow.vue", () => {
       config: defaultConfig,
       isChecked: false,
       isExpanded: false,
+      columnPositions,
       ...overrides,
     };
   }

package/ui.data-table/types.ts

@@ -39,11 +39,16 @@ export interface FlatRow extends Row {
   parentRowId?: RowId;
   nestedLevel: number;
 }
+export enum StickySide {
+  Left = "left",
+  Right = "right",
+}
 
 export interface ColumnObject {
   key: string;
   label?: string;
   isShown?: boolean;
+  sticky?: "left" | "right";
   class?: string | ((value: unknown | string, row: Row) => string);
   tdClass?: string;
   thClass?: string;
@@ -129,6 +134,8 @@ export interface UTableRowAttrs {
   bodyCellNestedIconWrapperAttrs: Ref<UnknownObject>;
   bodyRowCheckedAttrs: Ref<UnknownObject>;
   bodyRowAttrs: Ref<UnknownObject>;
+  bodyCellStickyLeftAttrs: Ref<UnknownObject>;
+  bodyCellStickyRightAttrs: Ref<UnknownObject>;
 }
 
 export interface UTableRowProps {
@@ -143,4 +150,5 @@ export interface UTableRowProps {
   config: Config;
   isChecked: boolean;
   isExpanded: boolean;
+  columnPositions: Map<string, number>;
 }