@nu-grid/nuxt 0.1.1

package/dist/runtime/composables/_internal/useNuGridColumnDragDrop.d.ts

@@ -0,0 +1,8 @@
+import type { TableData } from '@nuxt/ui';
+import type { Table } from '@tanstack/vue-table';
+import type { Ref } from 'vue';
+import type { NuGridColumnDragDrop } from '../../types/_internal/index.js';
+/**
+ * Column drag and drop functionality
+ */
+export declare function useNuGridColumnDragDrop<T extends TableData>(tableApi: Table<T>, columnOrderState: Ref<string[]>, tableRef: Ref<HTMLDivElement | null>): NuGridColumnDragDrop<T>;

package/dist/runtime/composables/_internal/useNuGridColumnDragDrop.js

@@ -0,0 +1,148 @@
+import { markRaw, ref } from "vue";
+export function useNuGridColumnDragDrop(tableApi, columnOrderState, tableRef) {
+  const draggedColumnId = ref(null);
+  const dropTargetColumnId = ref(null);
+  const dropPosition = ref("right");
+  const isDraggingOutside = ref(false);
+  function handleColumnDragStart(e, columnId) {
+    draggedColumnId.value = columnId;
+    isDraggingOutside.value = false;
+    if (e.dataTransfer) {
+      e.dataTransfer.effectAllowed = "move";
+      e.dataTransfer.setData("text/plain", columnId);
+    }
+    document.body.classList.add("is-dragging-column");
+  }
+  function handleColumnDragOver(e, columnId) {
+    const targetColumn = tableApi.getColumn(columnId);
+    if (targetColumn && targetColumn.columnDef.enableReordering === false) {
+      return;
+    }
+    if (!draggedColumnId.value || draggedColumnId.value === columnId) {
+      return;
+    }
+    e.preventDefault();
+    if (e.dataTransfer) {
+      e.dataTransfer.dropEffect = "move";
+    }
+    const target = e.currentTarget;
+    if (target) {
+      const rect = target.getBoundingClientRect();
+      const mouseX = e.clientX;
+      const columnMidpoint = rect.left + rect.width / 2;
+      dropPosition.value = mouseX < columnMidpoint ? "left" : "right";
+    }
+    dropTargetColumnId.value = columnId;
+    isDraggingOutside.value = false;
+  }
+  function handleColumnDrop(e, columnId) {
+    e.preventDefault();
+    const targetColumn = tableApi.getColumn(columnId);
+    if (targetColumn && targetColumn.columnDef.enableReordering === false) {
+      return;
+    }
+    if (!draggedColumnId.value || draggedColumnId.value === columnId) {
+      return;
+    }
+    const currentPinning = tableApi.getState().columnPinning;
+    const draggedColId = draggedColumnId.value;
+    const isPinnedLeft = currentPinning.left?.includes(draggedColId);
+    const isPinnedRight = currentPinning.right?.includes(draggedColId);
+    if (isPinnedLeft || isPinnedRight) {
+      const newPinning = {
+        left: currentPinning.left?.filter((id) => id !== draggedColId) || [],
+        right: currentPinning.right?.filter((id) => id !== draggedColId) || []
+      };
+      tableApi.setColumnPinning(newPinning);
+    }
+    const allColumns = tableApi.getAllLeafColumns();
+    const draggedIndex = allColumns.findIndex((col) => col.id === draggedColumnId.value);
+    const targetIndex = allColumns.findIndex((col) => col.id === columnId);
+    if (draggedIndex !== -1 && targetIndex !== -1) {
+      const newColumnOrder = allColumns.map((col) => col.id).filter((id) => id !== void 0);
+      const [removed] = newColumnOrder.splice(draggedIndex, 1);
+      if (removed) {
+        let insertIndex = targetIndex;
+        if (dropPosition.value === "right") {
+          insertIndex = targetIndex + 1;
+        }
+        if (draggedIndex < targetIndex) {
+          insertIndex -= 1;
+        }
+        newColumnOrder.splice(insertIndex, 0, removed);
+        columnOrderState.value = newColumnOrder;
+      }
+    }
+    draggedColumnId.value = null;
+    dropTargetColumnId.value = null;
+    isDraggingOutside.value = false;
+  }
+  function handleColumnDragEnd() {
+    draggedColumnId.value = null;
+    dropTargetColumnId.value = null;
+    isDraggingOutside.value = false;
+    document.body.classList.remove("is-dragging-column");
+    document.body.classList.remove("is-dragging-column-outside");
+  }
+  function handleColumnDragLeave(e) {
+    const relatedTarget = e.relatedTarget;
+    if (!relatedTarget || !(relatedTarget instanceof HTMLElement) || !tableRef.value?.contains(relatedTarget)) {
+      isDraggingOutside.value = true;
+      dropTargetColumnId.value = null;
+      document.body.classList.add("is-dragging-column-outside");
+      document.body.classList.remove("is-dragging-column");
+    }
+  }
+  function handleColumnDragEnter() {
+    if (isDraggingOutside.value) {
+      isDraggingOutside.value = false;
+      document.body.classList.remove("is-dragging-column-outside");
+      document.body.classList.add("is-dragging-column");
+    }
+  }
+  function isHeaderDraggable(header) {
+    const columnId = header.column.id;
+    const enableReordering = header.column.columnDef.enableReordering;
+    if (enableReordering === false) {
+      return false;
+    }
+    return !header.isPlaceholder && header.colSpan === 1 && !!columnId;
+  }
+  function headerDragProps(header) {
+    return {
+      "data-dragging": draggedColumnId.value === header.column.id ? "true" : "false",
+      "data-drop-target": dropTargetColumnId.value === header.column.id ? "true" : "false",
+      "data-drop-position": dropTargetColumnId.value === header.column.id ? dropPosition.value : void 0,
+      "onDragover": (e) => isHeaderDraggable(header) && handleColumnDragOver(e, header.column.id),
+      "onDrop": (e) => isHeaderDraggable(header) && handleColumnDrop(e, header.column.id),
+      "onDragend": handleColumnDragEnd,
+      "onDragleave": handleColumnDragLeave,
+      "onDragenter": handleColumnDragEnter
+    };
+  }
+  function headerDragHandleProps(header) {
+    return {
+      draggable: isHeaderDraggable(header),
+      class: isHeaderDraggable(header) ? "cursor-move" : "",
+      onDragstart: (e) => isHeaderDraggable(header) && handleColumnDragStart(e, header.column.id)
+    };
+  }
+  const dragFns = {
+    draggedColumnId,
+    dropTargetColumnId,
+    dropPosition,
+    isDraggingOutside,
+    ...markRaw({
+      handleColumnDragStart,
+      handleColumnDragOver,
+      handleColumnDrop,
+      handleColumnDragEnd,
+      handleColumnDragLeave,
+      handleColumnDragEnter,
+      isHeaderDraggable,
+      headerDragHandleProps,
+      headerDragProps
+    })
+  };
+  return dragFns;
+}

package/dist/runtime/composables/_internal/useNuGridColumnPinning.d.ts

@@ -0,0 +1,15 @@
+import type { Table } from '@tanstack/vue-table';
+import type { Ref } from 'vue';
+export interface ColumnPinningControls {
+    pinColumn: (columnId: string, side: 'left' | 'right') => void;
+    unpinColumn: (columnId: string) => void;
+    isPinned: (columnId: string) => 'left' | 'right' | false;
+    getPinnedColumns: () => {
+        left: string[];
+        right: string[];
+    };
+}
+/**
+ * Composable for managing column pinning state
+ */
+export declare function useNuGridColumnPinning<T>(tableApi: Ref<Table<T>>): ColumnPinningControls;

package/dist/runtime/composables/_internal/useNuGridColumnPinning.js

@@ -0,0 +1,44 @@
+export function useNuGridColumnPinning(tableApi) {
+  const pinColumn = (columnId, side) => {
+    const currentPinning = tableApi.value.getState().columnPinning;
+    const newPinning = { ...currentPinning };
+    const oppositeSide = side === "left" ? "right" : "left";
+    if (newPinning[oppositeSide]) {
+      newPinning[oppositeSide] = newPinning[oppositeSide].filter((id) => id !== columnId);
+    }
+    if (!newPinning[side]) {
+      newPinning[side] = [];
+    }
+    if (!newPinning[side].includes(columnId)) {
+      newPinning[side] = [...newPinning[side], columnId];
+    }
+    tableApi.value.setColumnPinning(newPinning);
+  };
+  const unpinColumn = (columnId) => {
+    const currentPinning = tableApi.value.getState().columnPinning;
+    const newPinning = {
+      left: currentPinning.left?.filter((id) => id !== columnId) || [],
+      right: currentPinning.right?.filter((id) => id !== columnId) || []
+    };
+    tableApi.value.setColumnPinning(newPinning);
+  };
+  const isPinned = (columnId) => {
+    const pinning = tableApi.value.getState().columnPinning;
+    if (pinning.left?.includes(columnId)) return "left";
+    if (pinning.right?.includes(columnId)) return "right";
+    return false;
+  };
+  const getPinnedColumns = () => {
+    const pinning = tableApi.value.getState().columnPinning;
+    return {
+      left: pinning.left || [],
+      right: pinning.right || []
+    };
+  };
+  return {
+    pinColumn,
+    unpinColumn,
+    isPinned,
+    getPinnedColumns
+  };
+}

package/dist/runtime/composables/_internal/useNuGridColumnResize.d.ts

@@ -0,0 +1,22 @@
+import type { TableData } from '@nuxt/ui';
+import type { Header, Table } from '@tanstack/vue-table';
+import type { NuGridProps } from '../../types/index.js';
+/**
+ * Column resize functionality with cursor locking
+ */
+export declare function useNuGridColumnResize<T extends TableData>(props: NuGridProps<T>, tableApi: Table<T>): {
+    handleResizeStart: (event: MouseEvent | TouchEvent, header: Header<T, any>) => void;
+    handleGroupResizeStart: (event: MouseEvent | TouchEvent, header: Header<T, any>) => void;
+    handleResizeEnd: () => void;
+    resizingGroupId: import("vue").Ref<string | null, string | null>;
+    resizingColumnId: import("vue").Ref<string | null, string | null>;
+};
+/**
+ * Custom resize handler that maintains table width by redistributing size changes
+ * to following columns
+ */
+export declare function createMaintainWidthResizeHandler<TData>(header: Header<TData, any>, table: Table<TData>): (event: MouseEvent | TouchEvent) => void;
+/**
+ * Custom resize handler for column groups that resizes all leaf columns proportionately
+ */
+export declare function createGroupResizeHandler<TData>(header: Header<TData, any>, table: Table<TData>): (event: MouseEvent | TouchEvent) => void;

package/dist/runtime/composables/_internal/useNuGridColumnResize.js

@@ -0,0 +1,427 @@
+import { onUnmounted, ref } from "vue";
+function isTouchStartEvent(e) {
+  return e.type === "touchstart";
+}
+export function useNuGridColumnResize(props, tableApi) {
+  const resizingGroupId = ref(null);
+  const resizingColumnId = ref(null);
+  function getResizeHandler(header) {
+    if (props.layout?.maintainWidth) {
+      return createMaintainWidthResizeHandler(header, tableApi);
+    }
+    return header.getResizeHandler();
+  }
+  function handleResizeStart(event, header) {
+    const resizeHandler = getResizeHandler(header);
+    if (resizeHandler) {
+      event.stopPropagation();
+      document.body.classList.add("is-resizing-column");
+      resizingColumnId.value = header.column.id;
+      resizeHandler(event);
+    }
+  }
+  function handleGroupResizeStart(event, header) {
+    if (header.colSpan <= 1) {
+      return handleResizeStart(event, header);
+    }
+    event.stopPropagation();
+    document.body.classList.add("is-resizing-column");
+    resizingColumnId.value = null;
+    resizingGroupId.value = header.id;
+    const resizeHandler = createGroupResizeHandler(header, tableApi);
+    resizeHandler(event);
+  }
+  function handleResizeEnd() {
+    document.body.classList.remove("is-resizing-column");
+    resizingColumnId.value = null;
+    resizingGroupId.value = null;
+  }
+  if (typeof document !== "undefined") {
+    document.addEventListener("mouseup", handleResizeEnd);
+    document.addEventListener("touchend", handleResizeEnd);
+  }
+  onUnmounted(() => {
+    if (typeof document !== "undefined") {
+      document.removeEventListener("mouseup", handleResizeEnd);
+      document.removeEventListener("touchend", handleResizeEnd);
+    }
+  });
+  return {
+    handleResizeStart,
+    handleGroupResizeStart,
+    handleResizeEnd,
+    resizingGroupId,
+    resizingColumnId
+  };
+}
+export function createMaintainWidthResizeHandler(header, table) {
+  return (e) => {
+    const column = table.getColumn(header.column.id);
+    const canResize = column?.getCanResize();
+    if (!column || !canResize) {
+      return;
+    }
+    ;
+    e.persist?.();
+    if (isTouchStartEvent(e)) {
+      if (e.touches && e.touches.length > 1) {
+        return;
+      }
+    }
+    const startSize = header.getSize();
+    const allColumns = table.getVisibleLeafColumns();
+    const currentColumnIndex = allColumns.findIndex((col) => col.id === column.id);
+    const followingColumns = allColumns.slice(currentColumnIndex + 1);
+    const columnSizingStart = [
+      [column.id, column.getSize()],
+      ...followingColumns.map((col) => [col.id, col.getSize()])
+    ];
+    const clientX = isTouchStartEvent(e) ? Math.round(e.touches[0].clientX) : e.clientX;
+    const updateOffset = (eventType, clientXPos) => {
+      if (typeof clientXPos !== "number") {
+        return;
+      }
+      const deltaDirection = table.options.columnResizeDirection === "rtl" ? -1 : 1;
+      const deltaOffset = (clientXPos - clientX) * deltaDirection;
+      const currentSize = column.getSize();
+      const desiredSize = Math.max(
+        column.columnDef.minSize ?? 20,
+        Math.min(startSize + deltaOffset, column.columnDef.maxSize ?? Number.MAX_SAFE_INTEGER)
+      );
+      const deltaFromCurrent = desiredSize - currentSize;
+      let constrainedNewSize = desiredSize;
+      if (followingColumns.length > 0 && deltaFromCurrent !== 0) {
+        const nextColumn = followingColumns[0];
+        if (!nextColumn) {
+          constrainedNewSize = currentSize;
+        } else {
+          const nextColumnResizable = nextColumn.columnDef.enableResizing !== false;
+          if (!nextColumnResizable) {
+            constrainedNewSize = currentSize;
+          } else {
+            const nextColumnSize = nextColumn.getSize();
+            const nextMinSize = nextColumn.columnDef.minSize ?? 20;
+            const nextMaxSize = nextColumn.columnDef.maxSize ?? Number.MAX_SAFE_INTEGER;
+            if (deltaFromCurrent > 0) {
+              const maxNextCanShrink = Math.max(0, nextColumnSize - nextMinSize);
+              if (maxNextCanShrink < 1) {
+                constrainedNewSize = currentSize;
+              } else {
+                constrainedNewSize = Math.min(desiredSize, currentSize + maxNextCanShrink);
+              }
+            } else if (deltaFromCurrent < 0) {
+              const maxNextCanGrow = Math.max(0, nextMaxSize - nextColumnSize);
+              if (maxNextCanGrow < 1) {
+                constrainedNewSize = currentSize;
+              } else {
+                constrainedNewSize = Math.max(desiredSize, currentSize - maxNextCanGrow);
+              }
+            }
+          }
+        }
+      }
+      const actualDelta = constrainedNewSize - currentSize;
+      if (followingColumns.length > 0 && actualDelta !== 0) {
+        const resizeMode = table.options.columnResizeMode ?? "onChange";
+        const newColumnSizing = {};
+        newColumnSizing[column.id] = constrainedNewSize;
+        const nextColumn = followingColumns[0];
+        if (nextColumn) {
+          const nextColumnCurrentSize = nextColumn.getSize();
+          const nextColumnNewSize = nextColumnCurrentSize - actualDelta;
+          newColumnSizing[nextColumn.id] = nextColumnNewSize;
+        }
+        table.setColumnSizingInfo((old) => ({
+          ...old,
+          startOffset: clientX,
+          startSize,
+          deltaOffset: constrainedNewSize - startSize,
+          // Store cumulative delta from start
+          deltaPercentage: (constrainedNewSize - startSize) / startSize,
+          isResizingColumn: column.id,
+          columnSizingStart
+        }));
+        if (resizeMode !== "onEnd" || eventType === "end") {
+          table.setColumnSizing((old) => ({
+            ...old,
+            ...newColumnSizing
+          }));
+        }
+      }
+    };
+    const onMove = (clientXPos) => updateOffset("move", clientXPos);
+    const onEnd = (clientXPos) => {
+      updateOffset("end", clientXPos);
+      table.setColumnSizingInfo((old) => ({
+        ...old,
+        isResizingColumn: false,
+        startOffset: null,
+        startSize: null,
+        deltaOffset: null,
+        deltaPercentage: null,
+        columnSizingStart: []
+      }));
+    };
+    const contextDocument = typeof document !== "undefined" ? document : void 0;
+    const mouseEvents = {
+      moveHandler: (e2) => onMove(e2.clientX),
+      upHandler: (e2) => {
+        contextDocument?.removeEventListener("mousemove", mouseEvents.moveHandler);
+        contextDocument?.removeEventListener("mouseup", mouseEvents.upHandler);
+        onEnd(e2.clientX);
+      }
+    };
+    const touchEvents = {
+      moveHandler: (e2) => {
+        if (e2.cancelable) {
+          e2.preventDefault();
+          e2.stopPropagation();
+        }
+        onMove(e2.touches[0].clientX);
+        return false;
+      },
+      upHandler: (e2) => {
+        contextDocument?.removeEventListener("touchmove", touchEvents.moveHandler);
+        contextDocument?.removeEventListener("touchend", touchEvents.upHandler);
+        if (e2.cancelable) {
+          e2.preventDefault();
+          e2.stopPropagation();
+        }
+        onEnd(e2.touches[0]?.clientX);
+      }
+    };
+    const passiveIfSupported = { passive: false };
+    if (isTouchStartEvent(e)) {
+      contextDocument?.addEventListener("touchmove", touchEvents.moveHandler, passiveIfSupported);
+      contextDocument?.addEventListener("touchend", touchEvents.upHandler, passiveIfSupported);
+    } else {
+      contextDocument?.addEventListener("mousemove", mouseEvents.moveHandler, passiveIfSupported);
+      contextDocument?.addEventListener("mouseup", mouseEvents.upHandler, passiveIfSupported);
+    }
+    table.setColumnSizingInfo((old) => ({
+      ...old,
+      startOffset: clientX,
+      startSize,
+      deltaOffset: 0,
+      deltaPercentage: 0,
+      isResizingColumn: column.id,
+      columnSizingStart
+    }));
+  };
+}
+export function createGroupResizeHandler(header, table) {
+  return (e) => {
+    ;
+    e.persist?.();
+    if (isTouchStartEvent(e)) {
+      if (e.touches && e.touches.length > 1) {
+        return;
+      }
+    }
+    const leafHeaders = header.getLeafHeaders();
+    const resizableLeafColumns = [];
+    let totalInitialSize = 0;
+    for (const leafHeader of leafHeaders) {
+      const column = table.getColumn(leafHeader.column.id);
+      if (!column || column.columnDef.enableResizing === false) {
+        continue;
+      }
+      const size = leafHeader.getSize();
+      totalInitialSize += size;
+      resizableLeafColumns.push({
+        id: column.id,
+        initialSize: size,
+        minSize: column.columnDef.minSize ?? 20,
+        maxSize: column.columnDef.maxSize ?? Number.MAX_SAFE_INTEGER,
+        proportion: 0
+        // Will be calculated after we know the total
+      });
+    }
+    if (resizableLeafColumns.length === 0 || totalInitialSize === 0) {
+      return;
+    }
+    for (const col of resizableLeafColumns) {
+      col.proportion = col.initialSize / totalInitialSize;
+    }
+    const startGroupSize = totalInitialSize;
+    const clientX = isTouchStartEvent(e) ? Math.round(e.touches[0].clientX) : e.clientX;
+    const columnSizingStart = resizableLeafColumns.map((col) => [
+      col.id,
+      col.initialSize
+    ]);
+    const updateOffset = (eventType, clientXPos) => {
+      if (typeof clientXPos !== "number") {
+        return;
+      }
+      const deltaDirection = table.options.columnResizeDirection === "rtl" ? -1 : 1;
+      const deltaOffset = (clientXPos - clientX) * deltaDirection;
+      const desiredGroupSize = startGroupSize + deltaOffset;
+      let minGroupSize = 0;
+      let maxGroupSize = 0;
+      for (const col of resizableLeafColumns) {
+        minGroupSize += col.minSize;
+        maxGroupSize += col.maxSize;
+      }
+      const constrainedGroupSize = Math.max(minGroupSize, Math.min(desiredGroupSize, maxGroupSize));
+      const actualDelta = constrainedGroupSize - startGroupSize;
+      if (actualDelta === 0 && eventType === "move") {
+        return;
+      }
+      const newColumnSizing = {};
+      const idealSizes = [];
+      for (const col of resizableLeafColumns) {
+        const idealSize = col.initialSize + actualDelta * col.proportion;
+        idealSizes.push(idealSize);
+      }
+      let overflow = 0;
+      const constrainedSizes = [];
+      for (let i = 0; i < resizableLeafColumns.length; i++) {
+        const col = resizableLeafColumns[i];
+        const idealSize = idealSizes[i];
+        if (idealSize < col.minSize) {
+          constrainedSizes.push(col.minSize);
+          overflow += idealSize - col.minSize;
+        } else if (idealSize > col.maxSize) {
+          constrainedSizes.push(col.maxSize);
+          overflow += idealSize - col.maxSize;
+        } else {
+          constrainedSizes.push(idealSize);
+        }
+      }
+      if (Math.abs(overflow) > 0.5) {
+        for (let iteration = 0; iteration < 3 && Math.abs(overflow) > 0.5; iteration++) {
+          const adjustableColumns = [];
+          let adjustableTotal = 0;
+          for (let i = 0; i < resizableLeafColumns.length; i++) {
+            const col = resizableLeafColumns[i];
+            const currentSize = constrainedSizes[i];
+            if (overflow < 0) {
+              if (currentSize > col.minSize) {
+                adjustableColumns.push(i);
+                adjustableTotal += col.proportion;
+              }
+            } else {
+              if (currentSize < col.maxSize) {
+                adjustableColumns.push(i);
+                adjustableTotal += col.proportion;
+              }
+            }
+          }
+          if (adjustableColumns.length === 0 || adjustableTotal === 0) {
+            break;
+          }
+          for (const idx of adjustableColumns) {
+            const col = resizableLeafColumns[idx];
+            const share = col.proportion / adjustableTotal * overflow;
+            const newSize = constrainedSizes[idx] + share;
+            if (newSize < col.minSize) {
+              overflow += newSize - col.minSize;
+              constrainedSizes[idx] = col.minSize;
+            } else if (newSize > col.maxSize) {
+              overflow += newSize - col.maxSize;
+              constrainedSizes[idx] = col.maxSize;
+            } else {
+              constrainedSizes[idx] = newSize;
+              overflow -= share;
+            }
+          }
+        }
+      }
+      for (let i = 0; i < resizableLeafColumns.length; i++) {
+        const col = resizableLeafColumns[i];
+        newColumnSizing[col.id] = Math.round(constrainedSizes[i]);
+      }
+      const resizeMode = table.options.columnResizeMode ?? "onChange";
+      table.setColumnSizingInfo((old) => ({
+        ...old,
+        startOffset: clientX,
+        startSize: startGroupSize,
+        deltaOffset: actualDelta,
+        deltaPercentage: actualDelta / startGroupSize,
+        isResizingColumn: header.id,
+        // Use header.id for group identification
+        columnSizingStart
+      }));
+      if (resizeMode !== "onEnd" || eventType === "end") {
+        table.setColumnSizing((old) => ({
+          ...old,
+          ...newColumnSizing
+        }));
+      }
+    };
+    let rafId = null;
+    let pendingClientX = null;
+    const onMove = (clientXPos) => {
+      if (typeof clientXPos !== "number") return;
+      pendingClientX = clientXPos;
+      if (rafId !== null) return;
+      rafId = requestAnimationFrame(() => {
+        rafId = null;
+        if (pendingClientX !== null) {
+          updateOffset("move", pendingClientX);
+        }
+      });
+    };
+    const onEnd = (clientXPos) => {
+      if (rafId !== null) {
+        cancelAnimationFrame(rafId);
+        rafId = null;
+      }
+      updateOffset("end", clientXPos ?? pendingClientX ?? void 0);
+      table.setColumnSizingInfo((old) => ({
+        ...old,
+        isResizingColumn: false,
+        startOffset: null,
+        startSize: null,
+        deltaOffset: null,
+        deltaPercentage: null,
+        columnSizingStart: []
+      }));
+    };
+    const contextDocument = typeof document !== "undefined" ? document : void 0;
+    const mouseEvents = {
+      moveHandler: (e2) => onMove(e2.clientX),
+      upHandler: (e2) => {
+        contextDocument?.removeEventListener("mousemove", mouseEvents.moveHandler);
+        contextDocument?.removeEventListener("mouseup", mouseEvents.upHandler);
+        onEnd(e2.clientX);
+      }
+    };
+    const touchEvents = {
+      moveHandler: (e2) => {
+        if (e2.cancelable) {
+          e2.preventDefault();
+          e2.stopPropagation();
+        }
+        onMove(e2.touches[0].clientX);
+        return false;
+      },
+      upHandler: (e2) => {
+        contextDocument?.removeEventListener("touchmove", touchEvents.moveHandler);
+        contextDocument?.removeEventListener("touchend", touchEvents.upHandler);
+        if (e2.cancelable) {
+          e2.preventDefault();
+          e2.stopPropagation();
+        }
+        onEnd(e2.touches[0]?.clientX);
+      }
+    };
+    const passiveIfSupported = { passive: false };
+    if (isTouchStartEvent(e)) {
+      contextDocument?.addEventListener("touchmove", touchEvents.moveHandler, passiveIfSupported);
+      contextDocument?.addEventListener("touchend", touchEvents.upHandler, passiveIfSupported);
+    } else {
+      contextDocument?.addEventListener("mousemove", mouseEvents.moveHandler, passiveIfSupported);
+      contextDocument?.addEventListener("mouseup", mouseEvents.upHandler, passiveIfSupported);
+    }
+    table.setColumnSizingInfo((old) => ({
+      ...old,
+      startOffset: clientX,
+      startSize: startGroupSize,
+      deltaOffset: 0,
+      deltaPercentage: 0,
+      isResizingColumn: header.id,
+      columnSizingStart
+    }));
+  };
+}