lizaui 9.0.56 → 9.0.57

package/dist/table/index.es.js

@@ -1,13 +1,13 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
-import React__default, { isValidElement, createContext, useContext, memo, forwardRef, useId, useMemo, useState } from "react";
+import React__default, { isValidElement, createContext, useContext, useState, useRef, useEffect, memo, forwardRef, useId, useMemo } from "react";
 import { twMerge } from "tailwind-merge";
 import { T as Tooltip } from "../chunks/tooltip-BVafMD5T.js";
+import clsx from "clsx";
 import { C as ChevronUp } from "../chunks/chevron-up-BBd-SipB.js";
 import { C as ChevronDown } from "../chunks/chevron-down-D-14pIT_.js";
 import { c as createLucideIcon } from "../chunks/createLucideIcon-C5oU6LEj.js";
 import { L as LoaderCircle } from "../chunks/loader-circle-CeKbzHTN.js";
-import clsx from "clsx";
 import { C as Checkbox } from "../chunks/checkbox-upIIzsyW.js";
 import { AnimatePresence, LazyMotion } from "framer-motion";
 const __iconNode = [
@@ -86,14 +86,221 @@ const initialValues = {
   totalColumn: 0,
   sortDescriptors: [],
   onSortChange: () => {
+  },
+  columnWidths: {},
+  onColumnResize: () => {
+  },
+  onColumnResizeEnd: () => {
   }
 };
 const TableContext = createContext(initialValues);
 const useTableContext = () => {
   return useContext(TableContext);
 };
+function useColumnResize(t0) {
+  const $ = c(28);
+  const {
+    columnId,
+    initialWidth: t1,
+    minWidth: t2,
+    maxWidth: t3,
+    onResize,
+    onResizeEnd
+  } = t0;
+  const initialWidth = t1 === void 0 ? 150 : t1;
+  const minWidth = t2 === void 0 ? 80 : t2;
+  const maxWidth = t3 === void 0 ? 800 : t3;
+  const [width, setWidth] = useState(initialWidth);
+  const [isResizing, setIsResizing] = useState(false);
+  const startXRef = useRef(0);
+  const startWidthRef = useRef(0);
+  const columnRef = useRef(null);
+  let t4;
+  if ($[0] !== initialWidth || $[1] !== width) {
+    t4 = () => {
+      if (initialWidth !== width) {
+        setWidth(initialWidth);
+      }
+    };
+    $[0] = initialWidth;
+    $[1] = width;
+    $[2] = t4;
+  } else {
+    t4 = $[2];
+  }
+  let t5;
+  if ($[3] !== initialWidth) {
+    t5 = [initialWidth];
+    $[3] = initialWidth;
+    $[4] = t5;
+  } else {
+    t5 = $[4];
+  }
+  useEffect(t4, t5);
+  let t6;
+  if ($[5] !== width) {
+    t6 = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      const target = e.currentTarget;
+      target.setPointerCapture(e.pointerId);
+      startXRef.current = e.clientX;
+      startWidthRef.current = width;
+      setIsResizing(true);
+      document.body.style.userSelect = "none";
+      document.body.style.cursor = "col-resize";
+    };
+    $[5] = width;
+    $[6] = t6;
+  } else {
+    t6 = $[6];
+  }
+  const handlePointerDown = t6;
+  let t7;
+  if ($[7] !== columnId || $[8] !== isResizing || $[9] !== maxWidth || $[10] !== minWidth || $[11] !== onResize) {
+    t7 = (e_0) => {
+      if (!isResizing) {
+        return;
+      }
+      const delta = e_0.clientX - startXRef.current;
+      const newWidth = Math.max(minWidth, Math.min(maxWidth, startWidthRef.current + delta));
+      setWidth(newWidth);
+      onResize?.(columnId, newWidth);
+    };
+    $[7] = columnId;
+    $[8] = isResizing;
+    $[9] = maxWidth;
+    $[10] = minWidth;
+    $[11] = onResize;
+    $[12] = t7;
+  } else {
+    t7 = $[12];
+  }
+  const handlePointerMove = t7;
+  let t8;
+  if ($[13] !== columnId || $[14] !== isResizing || $[15] !== maxWidth || $[16] !== minWidth || $[17] !== onResizeEnd) {
+    t8 = (e_1) => {
+      if (!isResizing) {
+        return;
+      }
+      setIsResizing(false);
+      document.body.style.userSelect = "";
+      document.body.style.cursor = "";
+      const delta_0 = e_1.clientX - startXRef.current;
+      const finalWidth = Math.max(minWidth, Math.min(maxWidth, startWidthRef.current + delta_0));
+      onResizeEnd?.(columnId, finalWidth);
+    };
+    $[13] = columnId;
+    $[14] = isResizing;
+    $[15] = maxWidth;
+    $[16] = minWidth;
+    $[17] = onResizeEnd;
+    $[18] = t8;
+  } else {
+    t8 = $[18];
+  }
+  const handlePointerUp = t8;
+  let t10;
+  let t9;
+  if ($[19] !== handlePointerMove || $[20] !== handlePointerUp || $[21] !== isResizing) {
+    t9 = () => {
+      if (isResizing) {
+        document.addEventListener("pointermove", handlePointerMove);
+        document.addEventListener("pointerup", handlePointerUp);
+        return () => {
+          document.removeEventListener("pointermove", handlePointerMove);
+          document.removeEventListener("pointerup", handlePointerUp);
+        };
+      }
+    };
+    t10 = [isResizing, handlePointerMove, handlePointerUp];
+    $[19] = handlePointerMove;
+    $[20] = handlePointerUp;
+    $[21] = isResizing;
+    $[22] = t10;
+    $[23] = t9;
+  } else {
+    t10 = $[22];
+    t9 = $[23];
+  }
+  useEffect(t9, t10);
+  let t11;
+  if ($[24] !== handlePointerDown || $[25] !== isResizing || $[26] !== width) {
+    t11 = {
+      width,
+      isResizing,
+      columnRef,
+      handlePointerDown,
+      setWidth
+    };
+    $[24] = handlePointerDown;
+    $[25] = isResizing;
+    $[26] = width;
+    $[27] = t11;
+  } else {
+    t11 = $[27];
+  }
+  return t11;
+}
+const ResizeHandle = memo((t0) => {
+  const $ = c(12);
+  const {
+    onPointerDown,
+    isResizing,
+    className
+  } = t0;
+  const t1 = isResizing && "bg-primary";
+  let t2;
+  if ($[0] !== className || $[1] !== t1) {
+    t2 = clsx("absolute top-0 right-0 h-full w-1 cursor-col-resize select-none touch-none group/resize z-10", "hover:bg-primary/50 active:bg-primary transition-colors", t1, className);
+    $[0] = className;
+    $[1] = t1;
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  let t3;
+  if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 -left-2 -right-2" });
+    $[3] = t3;
+  } else {
+    t3 = $[3];
+  }
+  const t4 = isResizing && "opacity-100";
+  let t5;
+  if ($[4] !== t4) {
+    t5 = clsx("absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2", "w-1 h-8 rounded-full bg-primary opacity-0 group-hover/resize:opacity-100 transition-opacity", t4);
+    $[4] = t4;
+    $[5] = t5;
+  } else {
+    t5 = $[5];
+  }
+  let t6;
+  if ($[6] !== t5) {
+    t6 = /* @__PURE__ */ jsx("div", { className: t5 });
+    $[6] = t5;
+    $[7] = t6;
+  } else {
+    t6 = $[7];
+  }
+  let t7;
+  if ($[8] !== onPointerDown || $[9] !== t2 || $[10] !== t6) {
+    t7 = /* @__PURE__ */ jsxs("div", { className: t2, onPointerDown, role: "separator", "aria-orientation": "vertical", "aria-label": "Resize column", children: [
+      t3,
+      t6
+    ] });
+    $[8] = onPointerDown;
+    $[9] = t2;
+    $[10] = t6;
+    $[11] = t7;
+  } else {
+    t7 = $[11];
+  }
+  return t7;
+});
+ResizeHandle.displayName = "ResizeHandle";
 const TableHeaderColumn = React__default.memo((t0) => {
-  const $ = c(41);
+  const $ = c(61);
   const {
     children,
     className,
@@ -102,7 +309,12 @@ const TableHeaderColumn = React__default.memo((t0) => {
     text: t3,
     size,
     header,
-    colspan: t4
+    colspan: t4,
+    resizable: resizableProp,
+    minWidth: minWidthProp,
+    maxWidth: maxWidthProp,
+    onResize: onResizeProp,
+    onResizeEnd: onResizeEndProp
   } = t0;
   let t5;
   if ($[0] !== t1) {
@@ -118,90 +330,149 @@ const TableHeaderColumn = React__default.memo((t0) => {
   const colspan = t4 === void 0 ? void 0 : t4;
   const {
     sortDescriptors,
-    onSortChange
+    onSortChange,
+    columnWidths,
+    onColumnResize,
+    onColumnResizeEnd
   } = useTableContext();
+  const isResizable = resizableProp ?? header?.resizable ?? false;
+  const columnId = header?.id || "";
+  const initialWidth = columnWidths?.[columnId] || size || header?.size || 150;
+  const minWidth = minWidthProp ?? header?.minWidth ?? 80;
+  const maxWidth = maxWidthProp ?? header?.maxWidth ?? 800;
   let t6;
-  if ($[2] !== className) {
-    t6 = twMerge("px-2 border-b border-divider", className);
-    $[2] = className;
-    $[3] = t6;
+  if ($[2] !== onColumnResize || $[3] !== onResizeProp) {
+    t6 = (id, width) => {
+      onResizeProp?.(width);
+      onColumnResize?.(id, width);
+    };
+    $[2] = onColumnResize;
+    $[3] = onResizeProp;
+    $[4] = t6;
+  } else {
+    t6 = $[4];
+  }
+  let t7;
+  if ($[5] !== onColumnResizeEnd || $[6] !== onResizeEndProp) {
+    t7 = (id_0, width_0) => {
+      onResizeEndProp?.(width_0);
+      onColumnResizeEnd?.(id_0, width_0);
+    };
+    $[5] = onColumnResizeEnd;
+    $[6] = onResizeEndProp;
+    $[7] = t7;
+  } else {
+    t7 = $[7];
+  }
+  let t8;
+  if ($[8] !== columnId || $[9] !== initialWidth || $[10] !== maxWidth || $[11] !== minWidth || $[12] !== t6 || $[13] !== t7) {
+    t8 = {
+      columnId,
+      initialWidth,
+      minWidth,
+      maxWidth,
+      onResize: t6,
+      onResizeEnd: t7
+    };
+    $[8] = columnId;
+    $[9] = initialWidth;
+    $[10] = maxWidth;
+    $[11] = minWidth;
+    $[12] = t6;
+    $[13] = t7;
+    $[14] = t8;
   } else {
-    t6 = $[3];
+    t8 = $[14];
   }
-  const mergedClass = t6;
-  const t7 = size ? `${size}px` : style.width;
-  const t8 = size ? `${size}px` : style.minWidth;
+  const {
+    width: resizedWidth,
+    isResizing,
+    columnRef,
+    handlePointerDown
+  } = useColumnResize(t8);
   let t9;
-  if ($[4] !== style || $[5] !== t7 || $[6] !== t8) {
-    t9 = {
+  if ($[15] !== className) {
+    t9 = twMerge("px-2 border-b border-divider relative", className);
+    $[15] = className;
+    $[16] = t9;
+  } else {
+    t9 = $[16];
+  }
+  const mergedClass = t9;
+  const effectiveWidth = isResizable ? resizedWidth : size || header?.size;
+  const t10 = effectiveWidth ? `${effectiveWidth}px` : style.width;
+  const t11 = effectiveWidth ? `${effectiveWidth}px` : style.minWidth;
+  let t12;
+  if ($[17] !== style || $[18] !== t10 || $[19] !== t11) {
+    t12 = {
       ...style,
-      width: t7,
-      minWidth: t8
+      width: t10,
+      minWidth: t11
     };
-    $[4] = style;
-    $[5] = t7;
-    $[6] = t8;
-    $[7] = t9;
+    $[17] = style;
+    $[18] = t10;
+    $[19] = t11;
+    $[20] = t12;
   } else {
-    t9 = $[7];
+    t12 = $[20];
   }
-  const mergedStyle = t9;
-  let t10;
-  if ($[8] !== children) {
-    t10 = !children || typeof children === "string" && children.trim() === "";
-    $[8] = children;
-    $[9] = t10;
+  const mergedStyle = t12;
+  let t13;
+  if ($[21] !== children) {
+    t13 = !children || typeof children === "string" && children.trim() === "";
+    $[21] = children;
+    $[22] = t13;
   } else {
-    t10 = $[9];
+    t13 = $[22];
   }
-  const isChildrenEmpty = t10;
+  const isChildrenEmpty = t13;
   const isSortable = header?.sort;
   header?.id;
-  let t11;
-  if ($[10] !== header?.id || $[11] !== sortDescriptors) {
-    t11 = sortDescriptors?.find((d) => d.column === header?.id);
-    $[10] = header?.id;
-    $[11] = sortDescriptors;
-    $[12] = t11;
+  let t14;
+  if ($[23] !== header?.id || $[24] !== sortDescriptors) {
+    t14 = sortDescriptors?.find((d) => d.column === header?.id);
+    $[23] = header?.id;
+    $[24] = sortDescriptors;
+    $[25] = t14;
   } else {
-    t11 = $[12];
+    t14 = $[25];
   }
-  const currentSort = t11;
-  let t12;
-  if ($[13] !== currentSort || $[14] !== header?.id || $[15] !== sortDescriptors) {
-    t12 = () => {
+  const currentSort = t14;
+  let t15;
+  if ($[26] !== currentSort || $[27] !== header?.id || $[28] !== sortDescriptors) {
+    t15 = () => {
       if (!sortDescriptors || sortDescriptors.length <= 1 || !currentSort) {
         return null;
       }
       return sortDescriptors.findIndex((d_0) => d_0.column === header?.id) + 1;
     };
-    $[13] = currentSort;
-    $[14] = header?.id;
-    $[15] = sortDescriptors;
-    $[16] = t12;
+    $[26] = currentSort;
+    $[27] = header?.id;
+    $[28] = sortDescriptors;
+    $[29] = t15;
   } else {
-    t12 = $[16];
+    t15 = $[29];
   }
   header?.id;
-  const sortOrderIndex = t12();
-  let t13;
-  if ($[17] !== header || $[18] !== isSortable || $[19] !== onSortChange) {
-    t13 = () => {
+  const sortOrderIndex = t15();
+  let t16;
+  if ($[30] !== header || $[31] !== isSortable || $[32] !== onSortChange) {
+    t16 = () => {
       if (isSortable && onSortChange && header?.id) {
         onSortChange(header.id);
       }
     };
-    $[17] = header;
-    $[18] = isSortable;
-    $[19] = onSortChange;
-    $[20] = t13;
+    $[30] = header;
+    $[31] = isSortable;
+    $[32] = onSortChange;
+    $[33] = t16;
   } else {
-    t13 = $[20];
+    t16 = $[33];
   }
-  const handleSort = t13;
-  let t14;
-  if ($[21] !== currentSort || $[22] !== icon || $[23] !== isSortable || $[24] !== sortOrderIndex) {
-    t14 = () => {
+  const handleSort = t16;
+  let t17;
+  if ($[34] !== currentSort || $[35] !== icon || $[36] !== isSortable || $[37] !== sortOrderIndex) {
+    t17 = () => {
       if (!isSortable) {
         return icon;
       }
@@ -213,28 +484,31 @@ const TableHeaderColumn = React__default.memo((t0) => {
       }
       return /* @__PURE__ */ jsx(ChevronsUpDown, { className: "h-4 w-4 text-default-300" });
     };
-    $[21] = currentSort;
-    $[22] = icon;
-    $[23] = isSortable;
-    $[24] = sortOrderIndex;
-    $[25] = t14;
+    $[34] = currentSort;
+    $[35] = icon;
+    $[36] = isSortable;
+    $[37] = sortOrderIndex;
+    $[38] = t17;
   } else {
-    t14 = $[25];
-  }
-  const renderSortIcon = t14;
-  const t15 = isSortable ? "cursor-pointer hover:bg-default-100 transition-colors" : "";
-  let t16;
-  if ($[26] !== mergedClass || $[27] !== t15) {
-    t16 = twMerge(mergedClass, t15);
-    $[26] = mergedClass;
-    $[27] = t15;
-    $[28] = t16;
+    t17 = $[38];
+  }
+  const renderSortIcon = t17;
+  const t18 = isResizable ? columnRef : void 0;
+  const t19 = isSortable ? "cursor-pointer hover:bg-default-100 transition-colors" : "";
+  const t20 = isResizing && "select-none";
+  let t21;
+  if ($[39] !== mergedClass || $[40] !== t19 || $[41] !== t20) {
+    t21 = twMerge(mergedClass, t19, t20);
+    $[39] = mergedClass;
+    $[40] = t19;
+    $[41] = t20;
+    $[42] = t21;
   } else {
-    t16 = $[28];
+    t21 = $[42];
   }
-  let t17;
-  if ($[29] !== children || $[30] !== header?.information || $[31] !== isChildrenEmpty || $[32] !== renderSortIcon || $[33] !== text) {
-    t17 = isChildrenEmpty ? /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center gap-x-2 font-medium", children: [
+  let t22;
+  if ($[43] !== children || $[44] !== header?.information || $[45] !== isChildrenEmpty || $[46] !== renderSortIcon || $[47] !== text) {
+    t22 = isChildrenEmpty ? /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center gap-x-2 font-medium", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex  items-center gap-x-2", children: [
         /* @__PURE__ */ jsx("p", { className: "line-clamp-1 text-xs text-foreground-500 dark:text-foreground-500 text-left", children: text }),
         header?.information && /* @__PURE__ */ jsx(Tooltip, { content: header?.information || "", children: /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", role: "img", className: "text-default-300 cursor-pointer dark:text-foreground-500", width: 16, height: 16, viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxs("g", { fill: "none", children: [
@@ -245,28 +519,43 @@ const TableHeaderColumn = React__default.memo((t0) => {
       ] }),
       /* @__PURE__ */ jsx("div", { className: "flex-1 flex justify-end", children: renderSortIcon() })
     ] }) : children;
-    $[29] = children;
-    $[30] = header?.information;
-    $[31] = isChildrenEmpty;
-    $[32] = renderSortIcon;
-    $[33] = text;
-    $[34] = t17;
+    $[43] = children;
+    $[44] = header?.information;
+    $[45] = isChildrenEmpty;
+    $[46] = renderSortIcon;
+    $[47] = text;
+    $[48] = t22;
+  } else {
+    t22 = $[48];
+  }
+  let t23;
+  if ($[49] !== handlePointerDown || $[50] !== isResizable || $[51] !== isResizing) {
+    t23 = isResizable && /* @__PURE__ */ jsx(ResizeHandle, { onPointerDown: handlePointerDown, isResizing });
+    $[49] = handlePointerDown;
+    $[50] = isResizable;
+    $[51] = isResizing;
+    $[52] = t23;
   } else {
-    t17 = $[34];
+    t23 = $[52];
   }
-  let t18;
-  if ($[35] !== colspan || $[36] !== handleSort || $[37] !== mergedStyle || $[38] !== t16 || $[39] !== t17) {
-    t18 = /* @__PURE__ */ jsx("th", { className: t16, style: mergedStyle, colSpan: colspan, onClick: handleSort, children: t17 });
-    $[35] = colspan;
-    $[36] = handleSort;
-    $[37] = mergedStyle;
-    $[38] = t16;
-    $[39] = t17;
-    $[40] = t18;
-  } else {
-    t18 = $[40];
-  }
-  return t18;
+  let t24;
+  if ($[53] !== colspan || $[54] !== handleSort || $[55] !== mergedStyle || $[56] !== t18 || $[57] !== t21 || $[58] !== t22 || $[59] !== t23) {
+    t24 = /* @__PURE__ */ jsxs("th", { ref: t18, className: t21, style: mergedStyle, colSpan: colspan, onClick: handleSort, children: [
+      t22,
+      t23
+    ] });
+    $[53] = colspan;
+    $[54] = handleSort;
+    $[55] = mergedStyle;
+    $[56] = t18;
+    $[57] = t21;
+    $[58] = t22;
+    $[59] = t23;
+    $[60] = t24;
+  } else {
+    t24 = $[60];
+  }
+  return t24;
 });
 TableHeaderColumn.displayName = "TableHeaderColumn";
 const TableEmptyState = memo((t0) => {
@@ -1040,6 +1329,9 @@ const TableHOC = ({
     dataHeader,
     sortDescriptors,
     onSortChange,
+    columnWidths = {},
+    onColumnResize,
+    onColumnResizeEnd,
     ...otherProps
   } = props;
   const tableClass = useMemo(() => twMerge("table-main-container w-full border-collapse table-auto", className), [className]);
@@ -1053,7 +1345,10 @@ const TableHOC = ({
     widthAction,
     totalColumn: dataHeader?.length || 0,
     sortDescriptors,
-    onSortChange
+    onSortChange,
+    columnWidths,
+    onColumnResize,
+    onColumnResizeEnd
   }, children: /* @__PURE__ */ jsx("div", { className: containerClass, children: /* @__PURE__ */ jsx(AnimatePresence, { children: /* @__PURE__ */ jsx(LazyMotion, { features: () => import("framer-motion").then((res) => res.domAnimation), children: /* @__PURE__ */ jsx("table", { className: tableClass, children: React__default.Children.map(children, (child) => isValidElement(child) ? React__default.cloneElement(child, {
     dataHeader,
     ...otherProps
@@ -1070,56 +1365,67 @@ const Table = Object.assign(TableHOC, {
   BodyColumn: TableBodyColumn
 });
 const useTable = (t0) => {
-  const $ = c(19);
+  const $ = c(24);
   const {
     initialDisabledKeys: t1,
     initialSelectKey: t2,
     initialValueSearch: t3,
-    initialSortDescriptors: t4
+    initialSortDescriptors: t4,
+    initialColumnWidths: t5
   } = t0;
-  let t5;
+  let t6;
   if ($[0] !== t1) {
-    t5 = t1 === void 0 ? [] : t1;
+    t6 = t1 === void 0 ? [] : t1;
     $[0] = t1;
-    $[1] = t5;
+    $[1] = t6;
   } else {
-    t5 = $[1];
+    t6 = $[1];
   }
-  const initialDisabledKeys = t5;
-  let t6;
+  const initialDisabledKeys = t6;
+  let t7;
   if ($[2] !== t2) {
-    t6 = t2 === void 0 ? [] : t2;
+    t7 = t2 === void 0 ? [] : t2;
     $[2] = t2;
-    $[3] = t6;
+    $[3] = t7;
   } else {
-    t6 = $[3];
+    t7 = $[3];
   }
-  const initialSelectKey = t6;
-  let t7;
+  const initialSelectKey = t7;
+  let t8;
   if ($[4] !== t3) {
-    t7 = t3 === void 0 ? {} : t3;
+    t8 = t3 === void 0 ? {} : t3;
     $[4] = t3;
-    $[5] = t7;
+    $[5] = t8;
   } else {
-    t7 = $[5];
+    t8 = $[5];
   }
-  const initialValueSearch = t7;
-  let t8;
+  const initialValueSearch = t8;
+  let t9;
   if ($[6] !== t4) {
-    t8 = t4 === void 0 ? [] : t4;
+    t9 = t4 === void 0 ? [] : t4;
     $[6] = t4;
-    $[7] = t8;
+    $[7] = t9;
   } else {
-    t8 = $[7];
+    t9 = $[7];
   }
-  const initialSortDescriptors = t8;
+  const initialSortDescriptors = t9;
+  let t10;
+  if ($[8] !== t5) {
+    t10 = t5 === void 0 ? {} : t5;
+    $[8] = t5;
+    $[9] = t10;
+  } else {
+    t10 = $[9];
+  }
+  const initialColumnWidths = t10;
   const [selectKeys, setSelectKeys] = useState(initialSelectKey);
   const [disabledKeys, setDisabledKeys] = useState(initialDisabledKeys);
   const [valueSearch, setValueSearch] = useState(initialValueSearch);
   const [sortDescriptors, setSortDescriptors] = useState(initialSortDescriptors);
-  let t9;
-  if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
-    t9 = (value) => {
+  const [columnWidths, setColumnWidths] = useState(initialColumnWidths);
+  let t11;
+  if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+    t11 = (value) => {
       setSelectKeys((prev) => {
         const exists = prev.some((el) => el.id === value.id);
         if (exists) {
@@ -1128,44 +1434,44 @@ const useTable = (t0) => {
         return [...prev, value];
       });
     };
-    $[8] = t9;
+    $[10] = t11;
   } else {
-    t9 = $[8];
+    t11 = $[10];
   }
-  const handleSelectKey = t9;
-  let t10;
-  if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
-    t10 = (value_0) => {
+  const handleSelectKey = t11;
+  let t12;
+  if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+    t12 = (value_0) => {
       setSelectKeys(value_0);
     };
-    $[9] = t10;
+    $[11] = t12;
   } else {
-    t10 = $[9];
+    t12 = $[11];
   }
-  const handleSelectKeys = t10;
-  let t11;
-  if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
-    t11 = (value_1) => {
+  const handleSelectKeys = t12;
+  let t13;
+  if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+    t13 = (value_1) => {
       setDisabledKeys(value_1);
     };
-    $[10] = t11;
+    $[12] = t13;
   } else {
-    t11 = $[10];
+    t13 = $[12];
   }
-  const handleDisabledKeys = t11;
-  let t12;
-  if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
-    t12 = () => {
+  const handleDisabledKeys = t13;
+  let t14;
+  if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
+    t14 = () => {
       setSelectKeys([]);
     };
-    $[11] = t12;
+    $[13] = t14;
   } else {
-    t12 = $[11];
+    t14 = $[13];
   }
-  const handleResetSelectKeys = t12;
-  let t13;
-  if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
-    t13 = (key, value_2) => {
+  const handleResetSelectKeys = t14;
+  let t15;
+  if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
+    t15 = (key, value_2) => {
       setValueSearch((prev_0) => {
         if (prev_0[key] === value_2) {
           return prev_0;
@@ -1181,14 +1487,14 @@ const useTable = (t0) => {
         return newState;
       });
     };
-    $[12] = t13;
+    $[14] = t15;
   } else {
-    t13 = $[12];
+    t15 = $[14];
   }
-  const handleSetValueSearch = t13;
-  let t14;
-  if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
-    t14 = (column) => {
+  const handleSetValueSearch = t15;
+  let t16;
+  if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
+    t16 = (column) => {
       setSortDescriptors((prev_1) => {
         const existingIndex = prev_1.findIndex((s) => s.column === column);
         if (existingIndex !== -1) {
@@ -1210,34 +1516,64 @@ const useTable = (t0) => {
         }];
       });
     };
-    $[13] = t14;
+    $[15] = t16;
   } else {
-    t14 = $[13];
+    t16 = $[15];
   }
-  const handleSort = t14;
-  let t15;
-  if ($[14] !== disabledKeys || $[15] !== selectKeys || $[16] !== sortDescriptors || $[17] !== valueSearch) {
-    t15 = {
+  const handleSort = t16;
+  let t17;
+  if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
+    t17 = (columnId, width) => {
+      setColumnWidths((prev_2) => ({
+        ...prev_2,
+        [columnId]: width
+      }));
+    };
+    $[16] = t17;
+  } else {
+    t17 = $[16];
+  }
+  const handleColumnResize = t17;
+  let t18;
+  if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
+    t18 = (columnId_0, width_0) => {
+      setColumnWidths((prev_3) => ({
+        ...prev_3,
+        [columnId_0]: width_0
+      }));
+    };
+    $[17] = t18;
+  } else {
+    t18 = $[17];
+  }
+  const handleColumnResizeEnd = t18;
+  let t19;
+  if ($[18] !== columnWidths || $[19] !== disabledKeys || $[20] !== selectKeys || $[21] !== sortDescriptors || $[22] !== valueSearch) {
+    t19 = {
       selectKeys,
       disabledKeys,
       valueSearch,
       sortDescriptors,
+      columnWidths,
       handleSelectKeys,
       handleSelectKey,
       handleDisabledKeys,
       handleSetValueSearch,
       handleResetSelectKeys,
-      handleSort
+      handleSort,
+      handleColumnResize,
+      handleColumnResizeEnd
     };
-    $[14] = disabledKeys;
-    $[15] = selectKeys;
-    $[16] = sortDescriptors;
-    $[17] = valueSearch;
-    $[18] = t15;
+    $[18] = columnWidths;
+    $[19] = disabledKeys;
+    $[20] = selectKeys;
+    $[21] = sortDescriptors;
+    $[22] = valueSearch;
+    $[23] = t19;
   } else {
-    t15 = $[18];
+    t19 = $[23];
   }
-  return t15;
+  return t19;
 };
 export {
   Table,