lizaui 9.0.52 → 9.0.54

package/dist/table/index.cjs.js

@@ -27,10 +27,18 @@ const compilerRuntime = require("react/compiler-runtime");
 const React = require("react");
 const tailwindMerge = require("tailwind-merge");
 const tooltip = require("../chunks/tooltip-hhxclHkr.js");
+const chevronUp = require("../chunks/chevron-up-egHdliKz.js");
+const chevronDown = require("../chunks/chevron-down-BTrLI_vJ.js");
+const createLucideIcon = require("../chunks/createLucideIcon-Bxsl-Fn_.js");
 const loaderCircle = require("../chunks/loader-circle-DVLrRYRP.js");
 const clsx = require("clsx");
 const checkbox = require("../chunks/checkbox-tCMzL33G.js");
 const framerMotion = require("framer-motion");
+const __iconNode = [
+  ["path", { d: "m7 15 5 5 5-5", key: "1hf1tw" }],
+  ["path", { d: "m7 9 5-5 5 5", key: "sgt6xg" }]
+];
+const ChevronsUpDown = createLucideIcon.createLucideIcon("chevrons-up-down", __iconNode);
 const TableHeader = React.memo((t0) => {
   const $ = compilerRuntime.c(14);
   let children;
@@ -92,8 +100,24 @@ const TableHeader = React.memo((t0) => {
   return t3;
 });
 TableHeader.displayName = "TableHeader";
+const initialValues = {
+  color: "primary",
+  disabledKeys: [],
+  isChecks: true,
+  selectKeys: [],
+  isActions: true,
+  widthAction: 100,
+  totalColumn: 0,
+  sortDescriptors: [],
+  onSortChange: () => {
+  }
+};
+const TableContext = React.createContext(initialValues);
+const useTableContext = () => {
+  return React.useContext(TableContext);
+};
 const TableHeaderColumn = React.memo((t0) => {
-  const $ = compilerRuntime.c(21);
+  const $ = compilerRuntime.c(41);
   const {
     children,
     className,
@@ -116,6 +140,10 @@ const TableHeaderColumn = React.memo((t0) => {
   const icon = t2 === void 0 ? null : t2;
   const text = t3 === void 0 ? "" : t3;
   const colspan = t4 === void 0 ? void 0 : t4;
+  const {
+    sortDescriptors,
+    onSortChange
+  } = useTableContext();
   let t6;
   if ($[2] !== className) {
     t6 = tailwindMerge.twMerge("px-2 border-b border-divider", className);
@@ -151,9 +179,86 @@ const TableHeaderColumn = React.memo((t0) => {
     t10 = $[9];
   }
   const isChildrenEmpty = t10;
+  const isSortable = header?.sort;
+  header?.id;
   let t11;
-  if ($[10] !== children || $[11] !== header?.information || $[12] !== icon || $[13] !== isChildrenEmpty || $[14] !== text) {
-    t11 = isChildrenEmpty ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-center gap-x-2 font-medium", children: [
+  if ($[10] !== header?.id || $[11] !== sortDescriptors) {
+    t11 = sortDescriptors?.find((d) => d.column === header?.id);
+    $[10] = header?.id;
+    $[11] = sortDescriptors;
+    $[12] = t11;
+  } else {
+    t11 = $[12];
+  }
+  const currentSort = t11;
+  let t12;
+  if ($[13] !== currentSort || $[14] !== header?.id || $[15] !== sortDescriptors) {
+    t12 = () => {
+      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;
+  } else {
+    t12 = $[16];
+  }
+  header?.id;
+  const sortOrderIndex = t12();
+  let t13;
+  if ($[17] !== header || $[18] !== isSortable || $[19] !== onSortChange) {
+    t13 = () => {
+      if (isSortable && onSortChange && header?.id) {
+        onSortChange(header.id);
+      }
+    };
+    $[17] = header;
+    $[18] = isSortable;
+    $[19] = onSortChange;
+    $[20] = t13;
+  } else {
+    t13 = $[20];
+  }
+  const handleSort = t13;
+  let t14;
+  if ($[21] !== currentSort || $[22] !== icon || $[23] !== isSortable || $[24] !== sortOrderIndex) {
+    t14 = () => {
+      if (!isSortable) {
+        return icon;
+      }
+      if (currentSort) {
+        return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-0.5", children: [
+          sortOrderIndex && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-medium text-default-400", children: sortOrderIndex }),
+          currentSort.direction === "asc" ? /* @__PURE__ */ jsxRuntime.jsx(chevronUp.ChevronUp, { className: "h-4 w-4 text-primary" }) : /* @__PURE__ */ jsxRuntime.jsx(chevronDown.ChevronDown, { className: "h-4 w-4 text-primary" })
+        ] });
+      }
+      return /* @__PURE__ */ jsxRuntime.jsx(ChevronsUpDown, { className: "h-4 w-4 text-default-300" });
+    };
+    $[21] = currentSort;
+    $[22] = icon;
+    $[23] = isSortable;
+    $[24] = sortOrderIndex;
+    $[25] = t14;
+  } 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 = tailwindMerge.twMerge(mergedClass, t15);
+    $[26] = mergedClass;
+    $[27] = t15;
+    $[28] = t16;
+  } else {
+    t16 = $[28];
+  }
+  let t17;
+  if ($[29] !== children || $[30] !== header?.information || $[31] !== isChildrenEmpty || $[32] !== renderSortIcon || $[33] !== text) {
+    t17 = isChildrenEmpty ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-center gap-x-2 font-medium", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex  items-center gap-x-2", children: [
         /* @__PURE__ */ jsxRuntime.jsx("p", { className: "line-clamp-1 text-xs text-foreground-500 dark:text-foreground-500 text-left", children: text }),
         header?.information && /* @__PURE__ */ jsxRuntime.jsx(tooltip.Tooltip, { content: header?.information || "", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("g", { fill: "none", children: [
@@ -162,44 +267,32 @@ const TableHeaderColumn = React.memo((t0) => {
           /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: 1, cy: 1, r: 1, fill: "currentColor", transform: "matrix(1 0 0 -1 11 9)" })
         ] }) }) })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 flex", children: icon })
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 flex justify-end", children: renderSortIcon() })
     ] }) : children;
-    $[10] = children;
-    $[11] = header?.information;
-    $[12] = icon;
-    $[13] = isChildrenEmpty;
-    $[14] = text;
-    $[15] = t11;
+    $[29] = children;
+    $[30] = header?.information;
+    $[31] = isChildrenEmpty;
+    $[32] = renderSortIcon;
+    $[33] = text;
+    $[34] = t17;
   } else {
-    t11 = $[15];
+    t17 = $[34];
   }
-  let t12;
-  if ($[16] !== colspan || $[17] !== mergedClass || $[18] !== mergedStyle || $[19] !== t11) {
-    t12 = /* @__PURE__ */ jsxRuntime.jsx("th", { className: mergedClass, style: mergedStyle, colSpan: colspan, children: t11 });
-    $[16] = colspan;
-    $[17] = mergedClass;
-    $[18] = mergedStyle;
-    $[19] = t11;
-    $[20] = t12;
+  let t18;
+  if ($[35] !== colspan || $[36] !== handleSort || $[37] !== mergedStyle || $[38] !== t16 || $[39] !== t17) {
+    t18 = /* @__PURE__ */ jsxRuntime.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 {
-    t12 = $[20];
+    t18 = $[40];
   }
-  return t12;
+  return t18;
 });
 TableHeaderColumn.displayName = "TableHeaderColumn";
-const initialValues = {
-  color: "primary",
-  disabledKeys: [],
-  isChecks: true,
-  selectKeys: [],
-  isActions: true,
-  widthAction: 100,
-  totalColumn: 0
-};
-const TableContext = React.createContext(initialValues);
-const useTableContext = () => {
-  return React.useContext(TableContext);
-};
 const TableEmptyState = React.memo((t0) => {
   const $ = compilerRuntime.c(3);
   const {
@@ -228,7 +321,7 @@ const TableEmptyState = React.memo((t0) => {
 });
 TableEmptyState.displayName = "TableEmptyState";
 function TableBodyComponent(t0) {
-  const $ = compilerRuntime.c(43);
+  const $ = compilerRuntime.c(45);
   let children;
   let className;
   let props;
@@ -285,27 +378,39 @@ function TableBodyComponent(t0) {
     isChecks
   } = useTableContext();
   const total = Number(totalColumn) + Number(isActions) + Number(isChecks);
-  let t6;
-  if ($[11] !== className) {
-    t6 = tailwindMerge.twMerge(className);
-    $[11] = className;
-    $[12] = t6;
+  const t6 = props;
+  let domProps;
+  if ($[11] !== t6) {
+    domProps = {
+      ...t6
+    };
+    delete domProps.dataHeader;
+    $[11] = t6;
+    $[12] = domProps;
   } else {
-    t6 = $[12];
+    domProps = $[12];
   }
-  const mergedClass = t6;
   let t7;
+  if ($[13] !== className) {
+    t7 = tailwindMerge.twMerge(className);
+    $[13] = className;
+    $[14] = t7;
+  } else {
+    t7 = $[14];
+  }
+  const mergedClass = t7;
+  let t8;
   bb0: {
     if (!data || data.length === 0) {
-      t7 = null;
+      t8 = null;
       break bb0;
     }
     if (typeof children === "function") {
-      let t82;
-      if ($[13] !== children || $[14] !== data || $[15] !== rowKey) {
-        let t9;
-        if ($[17] !== children || $[18] !== rowKey) {
-          t9 = (el, index) => {
+      let t92;
+      if ($[15] !== children || $[16] !== data || $[17] !== rowKey) {
+        let t10;
+        if ($[19] !== children || $[20] !== rowKey) {
+          t10 = (el, index) => {
             const child = children({
               item: el,
               index
@@ -315,114 +420,114 @@ function TableBodyComponent(t0) {
               key: keyValue
             }) : null;
           };
-          $[17] = children;
-          $[18] = rowKey;
-          $[19] = t9;
+          $[19] = children;
+          $[20] = rowKey;
+          $[21] = t10;
         } else {
-          t9 = $[19];
+          t10 = $[21];
         }
-        t82 = data.map(t9);
-        $[13] = children;
-        $[14] = data;
-        $[15] = rowKey;
-        $[16] = t82;
+        t92 = data.map(t10);
+        $[15] = children;
+        $[16] = data;
+        $[17] = rowKey;
+        $[18] = t92;
       } else {
-        t82 = $[16];
+        t92 = $[18];
       }
-      t7 = t82;
+      t8 = t92;
     } else {
-      let t82;
-      if ($[20] !== children || $[21] !== data || $[22] !== rowKey) {
-        let t9;
-        if ($[24] !== data || $[25] !== rowKey) {
-          t9 = (child_0, index_0) => React.isValidElement(child_0) ? React.cloneElement(child_0, {
+      let t92;
+      if ($[22] !== children || $[23] !== data || $[24] !== rowKey) {
+        let t10;
+        if ($[26] !== data || $[27] !== rowKey) {
+          t10 = (child_0, index_0) => React.isValidElement(child_0) ? React.cloneElement(child_0, {
             key: rowKey ? rowKey(data[index_0], index_0) : index_0
           }) : child_0;
-          $[24] = data;
-          $[25] = rowKey;
-          $[26] = t9;
+          $[26] = data;
+          $[27] = rowKey;
+          $[28] = t10;
         } else {
-          t9 = $[26];
+          t10 = $[28];
         }
-        t82 = React.Children.map(children, t9);
-        $[20] = children;
-        $[21] = data;
-        $[22] = rowKey;
-        $[23] = t82;
+        t92 = React.Children.map(children, t10);
+        $[22] = children;
+        $[23] = data;
+        $[24] = rowKey;
+        $[25] = t92;
       } else {
-        t82 = $[23];
+        t92 = $[25];
       }
-      t7 = t82;
+      t8 = t92;
     }
   }
-  const renderedRows = t7;
+  const renderedRows = t8;
   let fallbackContent = null;
   if (isLoading) {
-    let t82;
-    if ($[27] === Symbol.for("react.memo_cache_sentinel")) {
-      t82 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3.5", children: /* @__PURE__ */ jsxRuntime.jsx(loaderCircle.LoaderCircle, { size: 45 }) });
-      $[27] = t82;
+    let t92;
+    if ($[29] === Symbol.for("react.memo_cache_sentinel")) {
+      t92 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3.5", children: /* @__PURE__ */ jsxRuntime.jsx(loaderCircle.LoaderCircle, { size: 45 }) });
+      $[29] = t92;
     } else {
-      t82 = $[27];
+      t92 = $[29];
     }
-    let t9;
-    if ($[28] !== loadingLabel) {
-      t9 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center relative", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col justify-center items-center gap-2", children: [
-        t82,
+    let t10;
+    if ($[30] !== loadingLabel) {
+      t10 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center relative", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col justify-center items-center gap-2", children: [
+        t92,
         /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "line-clamp-1 text-sm text-default-800", children: loadingLabel }) })
       ] }) });
-      $[28] = loadingLabel;
-      $[29] = t9;
+      $[30] = loadingLabel;
+      $[31] = t10;
     } else {
-      t9 = $[29];
+      t10 = $[31];
     }
-    let t10;
-    if ($[30] !== t9 || $[31] !== total) {
-      t10 = /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "border-b border-divider", children: /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-2 py-2.5 w-full", colSpan: total, children: t9 }) });
-      $[30] = t9;
-      $[31] = total;
+    let t11;
+    if ($[32] !== t10 || $[33] !== total) {
+      t11 = /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "border-b border-divider", children: /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-2 py-2.5 w-full", colSpan: total, children: t10 }) });
       $[32] = t10;
+      $[33] = total;
+      $[34] = t11;
     } else {
-      t10 = $[32];
+      t11 = $[34];
     }
-    fallbackContent = t10;
+    fallbackContent = t11;
   } else {
     if (data.length === 0) {
-      let t82;
-      if ($[33] !== emptyText) {
-        t82 = /* @__PURE__ */ jsxRuntime.jsx(TableEmptyState, { text: emptyText });
-        $[33] = emptyText;
-        $[34] = t82;
+      let t92;
+      if ($[35] !== emptyText) {
+        t92 = /* @__PURE__ */ jsxRuntime.jsx(TableEmptyState, { text: emptyText });
+        $[35] = emptyText;
+        $[36] = t92;
       } else {
-        t82 = $[34];
+        t92 = $[36];
       }
-      let t9;
-      if ($[35] !== t82 || $[36] !== total) {
-        t9 = /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "border-b border-divider", children: /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-2 py-10 w-full", colSpan: total, children: t82 }) });
-        $[35] = t82;
-        $[36] = total;
-        $[37] = t9;
+      let t10;
+      if ($[37] !== t92 || $[38] !== total) {
+        t10 = /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "border-b border-divider", children: /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-2 py-10 w-full", colSpan: total, children: t92 }) });
+        $[37] = t92;
+        $[38] = total;
+        $[39] = t10;
       } else {
-        t9 = $[37];
+        t10 = $[39];
       }
-      fallbackContent = t9;
+      fallbackContent = t10;
     }
   }
-  let t8;
-  if ($[38] !== fallbackContent || $[39] !== mergedClass || $[40] !== props || $[41] !== renderedRows) {
-    t8 = /* @__PURE__ */ jsxRuntime.jsxs("tbody", { className: mergedClass, ...props, children: [
+  let t9;
+  if ($[40] !== domProps || $[41] !== fallbackContent || $[42] !== mergedClass || $[43] !== renderedRows) {
+    t9 = /* @__PURE__ */ jsxRuntime.jsxs("tbody", { className: mergedClass, ...domProps, children: [
       renderedRows,
       fallbackContent
     ] });
-    $[38] = fallbackContent;
-    $[39] = mergedClass;
-    $[40] = props;
-    $[41] = renderedRows;
-    $[42] = t8;
+    $[40] = domProps;
+    $[41] = fallbackContent;
+    $[42] = mergedClass;
+    $[43] = renderedRows;
+    $[44] = t9;
   } else {
-    t8 = $[42];
+    t9 = $[44];
   }
-  return t8;
+  return t9;
 }
 const TableBody = React.memo((props) => {
   const $ = compilerRuntime.c(2);
@@ -956,7 +1061,10 @@ const TableHOC = ({
     selectKeys = [],
     isActions = true,
     widthAction = 100,
-    dataHeader
+    dataHeader,
+    sortDescriptors,
+    onSortChange,
+    ...otherProps
   } = props;
   const tableClass = React.useMemo(() => tailwindMerge.twMerge("table-main-container w-full border-collapse table-auto", className), [className]);
   const containerClass = React.useMemo(() => tailwindMerge.twMerge("max-w-full overflow-x-auto overflow-y-auto bg-content1", classNameContainer), [classNameContainer]);
@@ -967,9 +1075,12 @@ const TableHOC = ({
     selectKeys,
     isActions,
     widthAction,
-    totalColumn: dataHeader?.length || 0
+    totalColumn: dataHeader?.length || 0,
+    sortDescriptors,
+    onSortChange
   }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: containerClass, children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.LazyMotion, { features: () => import("framer-motion").then((res) => res.domAnimation), children: /* @__PURE__ */ jsxRuntime.jsx("table", { className: tableClass, children: React.Children.map(children, (child) => React.isValidElement(child) ? React.cloneElement(child, {
-    ...props
+    dataHeader,
+    ...otherProps
   }) : child) }) }) }) }) });
 };
 const Table = Object.assign(TableHOC, {
@@ -983,45 +1094,56 @@ const Table = Object.assign(TableHOC, {
   BodyColumn: TableBodyColumn
 });
 const useTable = (t0) => {
-  const $ = compilerRuntime.c(15);
+  const $ = compilerRuntime.c(19);
   const {
     initialDisabledKeys: t1,
     initialSelectKey: t2,
-    initialValueSearch: t3
+    initialValueSearch: t3,
+    initialSortDescriptors: t4
   } = t0;
-  let t4;
+  let t5;
   if ($[0] !== t1) {
-    t4 = t1 === void 0 ? [] : t1;
+    t5 = t1 === void 0 ? [] : t1;
     $[0] = t1;
-    $[1] = t4;
+    $[1] = t5;
   } else {
-    t4 = $[1];
+    t5 = $[1];
   }
-  const initialDisabledKeys = t4;
-  let t5;
+  const initialDisabledKeys = t5;
+  let t6;
   if ($[2] !== t2) {
-    t5 = t2 === void 0 ? [] : t2;
+    t6 = t2 === void 0 ? [] : t2;
     $[2] = t2;
-    $[3] = t5;
+    $[3] = t6;
   } else {
-    t5 = $[3];
+    t6 = $[3];
   }
-  const initialSelectKey = t5;
-  let t6;
+  const initialSelectKey = t6;
+  let t7;
   if ($[4] !== t3) {
-    t6 = t3 === void 0 ? {} : t3;
+    t7 = t3 === void 0 ? {} : t3;
     $[4] = t3;
-    $[5] = t6;
+    $[5] = t7;
   } else {
-    t6 = $[5];
+    t7 = $[5];
+  }
+  const initialValueSearch = t7;
+  let t8;
+  if ($[6] !== t4) {
+    t8 = t4 === void 0 ? [] : t4;
+    $[6] = t4;
+    $[7] = t8;
+  } else {
+    t8 = $[7];
   }
-  const initialValueSearch = t6;
+  const initialSortDescriptors = t8;
   const [selectKeys, setSelectKeys] = React.useState(initialSelectKey);
   const [disabledKeys, setDisabledKeys] = React.useState(initialDisabledKeys);
   const [valueSearch, setValueSearch] = React.useState(initialValueSearch);
-  let t7;
-  if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
-    t7 = (value) => {
+  const [sortDescriptors, setSortDescriptors] = React.useState(initialSortDescriptors);
+  let t9;
+  if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+    t9 = (value) => {
       setSelectKeys((prev) => {
         const exists = prev.some((el) => el.id === value.id);
         if (exists) {
@@ -1030,44 +1152,44 @@ const useTable = (t0) => {
         return [...prev, value];
       });
     };
-    $[6] = t7;
+    $[8] = t9;
   } else {
-    t7 = $[6];
+    t9 = $[8];
   }
-  const handleSelectKey = t7;
-  let t8;
-  if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
-    t8 = (value_0) => {
+  const handleSelectKey = t9;
+  let t10;
+  if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+    t10 = (value_0) => {
       setSelectKeys(value_0);
     };
-    $[7] = t8;
+    $[9] = t10;
   } else {
-    t8 = $[7];
+    t10 = $[9];
   }
-  const handleSelectKeys = t8;
-  let t9;
-  if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
-    t9 = (value_1) => {
+  const handleSelectKeys = t10;
+  let t11;
+  if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+    t11 = (value_1) => {
       setDisabledKeys(value_1);
     };
-    $[8] = t9;
+    $[10] = t11;
   } else {
-    t9 = $[8];
+    t11 = $[10];
   }
-  const handleDisabledKeys = t9;
-  let t10;
-  if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
-    t10 = () => {
+  const handleDisabledKeys = t11;
+  let t12;
+  if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+    t12 = () => {
       setSelectKeys([]);
     };
-    $[9] = t10;
+    $[11] = t12;
   } else {
-    t10 = $[9];
+    t12 = $[11];
   }
-  const handleResetSelectKeys = t10;
-  let t11;
-  if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
-    t11 = (key, value_2) => {
+  const handleResetSelectKeys = t12;
+  let t13;
+  if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+    t13 = (key, value_2) => {
       setValueSearch((prev_0) => {
         if (prev_0[key] === value_2) {
           return prev_0;
@@ -1083,31 +1205,63 @@ const useTable = (t0) => {
         return newState;
       });
     };
-    $[10] = t11;
+    $[12] = t13;
   } else {
-    t11 = $[10];
+    t13 = $[12];
   }
-  const handleSetValueSearch = t11;
-  let t12;
-  if ($[11] !== disabledKeys || $[12] !== selectKeys || $[13] !== valueSearch) {
-    t12 = {
+  const handleSetValueSearch = t13;
+  let t14;
+  if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
+    t14 = (column) => {
+      setSortDescriptors((prev_1) => {
+        const existingIndex = prev_1.findIndex((s) => s.column === column);
+        if (existingIndex !== -1) {
+          const existing = prev_1[existingIndex];
+          if (existing.direction === "asc") {
+            const newSorts = [...prev_1];
+            newSorts[existingIndex] = {
+              ...existing,
+              direction: "desc"
+            };
+            return newSorts;
+          } else {
+            return prev_1.filter((s_0) => s_0.column !== column);
+          }
+        }
+        return [...prev_1, {
+          column,
+          direction: "asc"
+        }];
+      });
+    };
+    $[13] = t14;
+  } else {
+    t14 = $[13];
+  }
+  const handleSort = t14;
+  let t15;
+  if ($[14] !== disabledKeys || $[15] !== selectKeys || $[16] !== sortDescriptors || $[17] !== valueSearch) {
+    t15 = {
       selectKeys,
       disabledKeys,
       valueSearch,
+      sortDescriptors,
       handleSelectKeys,
       handleSelectKey,
       handleDisabledKeys,
       handleSetValueSearch,
-      handleResetSelectKeys
+      handleResetSelectKeys,
+      handleSort
     };
-    $[11] = disabledKeys;
-    $[12] = selectKeys;
-    $[13] = valueSearch;
-    $[14] = t12;
+    $[14] = disabledKeys;
+    $[15] = selectKeys;
+    $[16] = sortDescriptors;
+    $[17] = valueSearch;
+    $[18] = t15;
   } else {
-    t12 = $[14];
+    t15 = $[18];
   }
-  return t12;
+  return t15;
 };
 exports.Table = Table;
 exports.TableHOC = TableHOC;