@axzydev/axzy_ui_system 1.3.4 → 1.3.5

package/README.md

@@ -225,7 +225,7 @@ estas variables en cualquier contenedor estila solo ese subárbol.
 - **ITSlideToggle** – Switch toggle
 - **ITDropfile** – Área de arrastrar y soltar archivos
 - **ITFormBuilder** – Generador dinámico de formularios desde JSON
-- **ITTable** / **ITDataTable** – Tablas con filtros, ordenamiento y paginación
+- **ITTable** / **ITDataTable** – Tablas con filtros, ordenamiento, paginación y columnas fijas (`pinned`)
 - **ITCard** / **ITStatCard** – Tarjetas de contenido y métricas
 - **ITLayout** / **ITNavbar** – Sistema de layout con sidebar colapsable
 - **ITFlex** / **ITStack** / **ITGrid** – Layout helpers

package/dist/index.cjs

@@ -3688,7 +3688,7 @@ function useVirtualRows({
 
 // src/components/organisms/data-table/dataTable.tsx
 var import_clsx23 = __toESM(require("clsx"), 1);
-var import_react21 = require("react");
+var import_react21 = __toESM(require("react"), 1);
 var import_fa13 = require("react-icons/fa");
 var import_md = require("react-icons/md");
 
@@ -4483,6 +4483,32 @@ function isInteractiveTarget(target, boundary = null) {
   if (boundary instanceof Node && interactive === boundary) return false;
   return true;
 }
+function pinnedColumnWidth(col) {
+  if (typeof col.width === "number") return col.width;
+  if (typeof col.width === "string" && /^\d+(\.\d+)?px$/.test(col.width.trim())) {
+    return parseFloat(col.width);
+  }
+  return col.minWidth ?? 0;
+}
+function getPinnedColumnMeta(columns) {
+  const meta = {};
+  let leftOffset = 0;
+  for (const col of columns) {
+    if (col.pinned === "left") {
+      meta[col.key] = { side: "left", offset: leftOffset };
+      leftOffset += pinnedColumnWidth(col);
+    }
+  }
+  let rightOffset = 0;
+  for (let i = columns.length - 1; i >= 0; i--) {
+    const col = columns[i];
+    if (col.pinned === "right") {
+      meta[col.key] = { side: "right", offset: rightOffset };
+      rightOffset += pinnedColumnWidth(col);
+    }
+  }
+  return meta;
+}
 
 // src/components/organisms/data-table/dataTable.tsx
 var import_jsx_runtime23 = require("react/jsx-runtime");
@@ -4533,6 +4559,7 @@ function ITDataTable({
   const isStickyHeader = stickyHeader && isTableVirtual;
   const resolvedRowHeight = rowHeight ?? getRowHeight(size, density);
   const columnCount = columns.length;
+  const pinnedMeta = import_react21.default.useMemo(() => getPinnedColumnMeta(columns), [columns]);
   const scrollOuterClass = isTableVirtual ? "relative min-h-[200px]" : "overflow-x-auto relative min-h-[200px]";
   const {
     currentPage,
@@ -4812,38 +4839,46 @@ function ITDataTable({
           {
             className: (0, import_clsx23.default)(tableHeaderRow, "dark:text-slate-200"),
             "aria-rowindex": isTableVirtual ? 1 : void 0,
-            children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-              "th",
-              {
-                scope: "col",
-                className: (0, import_clsx23.default)(
-                  tableHeaderCell(col.className, density),
-                  col.align && tableAlignClasses[col.align],
-                  isStickyHeader && "sticky top-0 z-10 bg-secondary-50"
-                ),
-                style: col.minWidth != null || isStickyHeader ? {
-                  ...col.minWidth != null ? { minWidth: `${col.minWidth}px` } : {},
-                  ...isStickyHeader ? { backgroundColor: "var(--color-table-headerBg, #f8fafc)" } : {}
-                } : void 0,
-                children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: isFixed ? "flex flex-col gap-3" : "flex flex-col gap-3 min-w-[150px]", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex items-center justify-between gap-2", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ITText, { as: "span", className: "text-slate-900 dark:text-white font-bold", children: col.label }),
-                    col.sortable && col.type !== "actions" && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-                      "button",
-                      {
-                        onClick: () => handleSort(col.key),
-                        disabled: isLoading,
-                        className: `p-1 rounded-md transition-colors ${sortConfig?.key === col.key ? "bg-secondary-200 text-secondary-900" : "hover:bg-secondary-200 text-secondary-400 hover:text-secondary-700"} disabled:opacity-50`,
-                        title: `Ordenar por ${col.label}`,
-                        children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_md.MdOutlineSwapVert, { className: "w-4 h-4", "aria-hidden": "true" })
-                      }
-                    )
-                  ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "w-full", children: col.filter ? renderFilterInput(col) : null })
-                ] })
-              },
-              col.key
-            ))
+            children: columns.map((col) => {
+              const pin = pinnedMeta[col.key];
+              const isPinned = pin != null;
+              return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                "th",
+                {
+                  scope: "col",
+                  className: (0, import_clsx23.default)(
+                    tableHeaderCell(col.className, density),
+                    col.align && tableAlignClasses[col.align],
+                    isPinned && "sticky",
+                    isStickyHeader && "sticky top-0 bg-secondary-50",
+                    isPinned ? "z-[15]" : isStickyHeader && "z-10",
+                    isPinned && (col.pinned === "left" ? "it-table-pinned-left" : "it-table-pinned-right")
+                  ),
+                  style: col.minWidth != null || isStickyHeader || isPinned ? {
+                    ...col.minWidth != null ? { minWidth: `${col.minWidth}px` } : {},
+                    ...isStickyHeader || isPinned ? { backgroundColor: "var(--color-table-headerBg, #f8fafc)" } : {},
+                    ...isPinned ? pin.side === "left" ? { left: pin.offset } : { right: pin.offset } : {}
+                  } : void 0,
+                  children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: isFixed ? "flex flex-col gap-3" : "flex flex-col gap-3 min-w-[150px]", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex items-center justify-between gap-2", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ITText, { as: "span", className: "text-slate-900 dark:text-white font-bold", children: col.label }),
+                      col.sortable && col.type !== "actions" && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                        "button",
+                        {
+                          onClick: () => handleSort(col.key),
+                          disabled: isLoading,
+                          className: `p-1 rounded-md transition-colors ${sortConfig?.key === col.key ? "bg-secondary-200 text-secondary-900" : "hover:bg-secondary-200 text-secondary-400 hover:text-secondary-700"} disabled:opacity-50`,
+                          title: `Ordenar por ${col.label}`,
+                          children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_md.MdOutlineSwapVert, { className: "w-4 h-4", "aria-hidden": "true" })
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "w-full", children: col.filter ? renderFilterInput(col) : null })
+                  ] })
+                },
+                col.key
+              );
+            })
           }
         ) }),
         /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("tbody", { className: (0, import_clsx23.default)(tableBody, "dark:divide-slate-700/30"), children: data.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
@@ -4865,14 +4900,22 @@ function ITDataTable({
                 children: columns.map((col) => {
                   const rawValue = getNestedValue2(row, col.key);
                   const truncateTitle = col.truncate && (typeof rawValue === "string" || typeof rawValue === "number") ? String(rawValue) : void 0;
+                  const pin = pinnedMeta[col.key];
+                  const isPinned = pin != null;
                   return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                     "td",
                     {
                       className: (0, import_clsx23.default)(
                         tableCell(col.className, density),
-                        col.align && tableAlignClasses[col.align]
+                        col.align && tableAlignClasses[col.align],
+                        isPinned && "sticky bg-[var(--color-table-rowBg,white)] group-hover:bg-[var(--color-table-rowHover,var(--color-secondary-50))]",
+                        isPinned && (col.pinned === "left" ? "it-table-pinned-left" : "it-table-pinned-right"),
+                        isPinned && "z-[1]"
                       ),
-                      style: col.minWidth != null ? { minWidth: `${col.minWidth}px` } : void 0,
+                      style: col.minWidth != null || isPinned ? {
+                        ...col.minWidth != null ? { minWidth: `${col.minWidth}px` } : {},
+                        ...isPinned ? pin.side === "left" ? { left: pin.offset } : { right: pin.offset } : {}
+                      } : void 0,
                       title: truncateTitle,
                       children: col.type === "actions" ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: tableActionsCell, children: renderCellContent(col, row) }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: (0, import_clsx23.default)(tableCellText, col.truncate && "truncate"), children: renderCellContent(col, row) })
                     },
@@ -7567,6 +7610,14 @@ function ITSegmentedControl({
 var import_react35 = require("react");
 var import_fa26 = require("react-icons/fa");
 var import_jsx_runtime56 = require("react/jsx-runtime");
+function isSubItemGroup(entry) {
+  return "items" in entry;
+}
+function flattenSubItems(entries) {
+  return entries.flatMap(
+    (entry) => isSubItemGroup(entry) ? entry.items : [entry]
+  );
+}
 function ITSidebar({
   navigationItems = [],
   isCollapsed = false,
@@ -7612,7 +7663,7 @@ function ITSidebar({
   (0, import_react35.useEffect)(() => {
     const activeParents = /* @__PURE__ */ new Set();
     navigationItems.forEach((item) => {
-      if (item.subitems && item.subitems.some((sub) => sub.isActive)) {
+      if (item.subitems && flattenSubItems(item.subitems).some((sub) => sub.isActive)) {
         activeParents.add(item.id);
       }
     });
@@ -7646,6 +7697,80 @@ function ITSidebar({
   };
   const isSidebarCollapsed = visibleOnMobile ? false : !isHovering && isCollapsed;
   const sidebarWidth = isSidebarCollapsed ? "w-[88px]" : "w-[280px]";
+  const renderSubItem = (subitem) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("li", { className: "relative", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
+    "button",
+    {
+      "aria-current": subitem.isActive ? "page" : void 0,
+      onClick: () => {
+        if (subitem.action) subitem.action();
+        if (onSubItemClick) onSubItemClick(subitem);
+      },
+      className: `flex items-center gap-2 w-full text-left px-3 py-1.5 rounded-xl transition-all duration-300`,
+      style: {
+        color: subitem.isActive ? "var(--it-sidebar-active-color, var(--color-secondary-900))" : "var(--it-sidebar-label-color, var(--color-secondary-600))",
+        backgroundColor: subitem.isActive ? "var(--it-sidebar-active-bg, var(--color-secondary-50))" : "transparent",
+        fontSize: "0.78rem",
+        fontWeight: subitem.isActive ? 600 : 500,
+        letterSpacing: "0.01em",
+        marginLeft: subitemConnector === "|" ? "-1px" : "0"
+      },
+      onMouseEnter: (e) => {
+        if (!subitem.isActive) {
+          e.currentTarget.style.backgroundColor = "var(--it-sidebar-hover-bg, var(--color-secondary-100))";
+          e.currentTarget.style.transform = "translateX(3px)";
+        }
+      },
+      onMouseLeave: (e) => {
+        if (!subitem.isActive) {
+          e.currentTarget.style.backgroundColor = "transparent";
+          e.currentTarget.style.transform = "translateX(0)";
+        }
+      },
+      children: [
+        subitem.isActive && subitemConnector === "|" && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+          "div",
+          {
+            className: "absolute left-0 top-1/3 bottom-1/3 w-[2.5px] rounded-r-full transition-all",
+            style: {
+              backgroundColor: "var(--it-sidebar-active-icon, var(--color-primary-500))",
+              boxShadow: "0 0 6px color-mix(in srgb, var(--it-sidebar-active-icon, var(--color-primary-500)) 25%, transparent)"
+            }
+          }
+        ),
+        subitemConnector === "dot" && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+          "span",
+          {
+            className: `w-1.5 h-1.5 rounded-full flex-shrink-0 transition-all duration-300 ${subitem.isActive ? "scale-125" : ""}`,
+            style: {
+              backgroundColor: subitem.isActive ? "var(--it-sidebar-active-icon, var(--color-primary-500))" : "var(--it-sidebar-icon-color, var(--color-secondary-400))"
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(ITText, { as: "span", className: "truncate", children: subitem.label })
+      ]
+    }
+  ) }, subitem.id);
+  const renderSubItemGroup = (group, itemId) => {
+    const headingId = `it-sidebar-subgroup-${itemId}-${group.id}`;
+    return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("li", { className: "relative", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { id: headingId, className: "px-3 pt-2.5 pb-1 mt-1", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+        ITText,
+        {
+          as: "span",
+          className: "block",
+          style: {
+            color: "var(--it-sidebar-icon-color, var(--color-secondary-400))",
+            fontSize: "0.68rem",
+            fontWeight: 700,
+            letterSpacing: "0.08em",
+            textTransform: "uppercase"
+          },
+          children: group.label
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("ul", { "aria-labelledby": headingId, className: "flex flex-col gap-0", children: group.items.map(renderSubItem) })
+    ] }, group.id);
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
     "aside",
     {
@@ -7779,7 +7904,7 @@ function ITSidebar({
                     item.icon && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { style: { color: "var(--it-sidebar-active-icon, var(--color-primary-500))" }, className: "text-xl drop-shadow-sm", children: item.icon }),
                     /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(ITText, { as: "span", className: "tracking-wide text-[15px]", children: item.label })
                   ] }),
-                  item.subitems && item.subitems.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "py-2", children: item.subitems.map((subitem) => /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
+                  item.subitems && item.subitems.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "py-2", children: flattenSubItems(item.subitems).map((subitem) => /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
                     "div",
                     {
                       className: `px-5 py-2.5 text-sm flex items-center gap-3 transition-colors relative`,
@@ -7803,66 +7928,16 @@ function ITSidebar({
                 ]
               }
             ),
-            !isSidebarCollapsed && item.subitems && item.subitems.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { id: submenuId, role: "group", "aria-label": item.label, className: `overflow-hidden transition-all duration-400 ease-[cubic-bezier(0.2,0,0,1)] ${expandedItems.has(item.id) ? "max-h-[500px] opacity-100 mt-1" : "max-h-0 opacity-0"}`, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+            !isSidebarCollapsed && item.subitems && item.subitems.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { id: submenuId, role: "group", "aria-label": item.label, className: `overflow-hidden transition-all duration-400 ease-[cubic-bezier(0.2,0,0,1)] ${expandedItems.has(item.id) ? "max-h-[1000px] opacity-100 mt-1" : "max-h-0 opacity-0"}`, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
               "ul",
               {
                 className: "ml-4 flex flex-col gap-0 py-0.5",
                 style: {
                   borderLeft: subitemConnector === "|" ? "1px solid var(--it-sidebar-border, var(--color-secondary-200))" : "none"
                 },
-                children: item.subitems.map((subitem) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("li", { className: "relative", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
-                  "button",
-                  {
-                    "aria-current": subitem.isActive ? "page" : void 0,
-                    onClick: () => {
-                      if (subitem.action) subitem.action();
-                      if (onSubItemClick) onSubItemClick(subitem);
-                    },
-                    className: `flex items-center gap-2 w-full text-left px-3 py-1.5 rounded-xl transition-all duration-300`,
-                    style: {
-                      color: subitem.isActive ? "var(--it-sidebar-active-color, var(--color-secondary-900))" : "var(--it-sidebar-label-color, var(--color-secondary-600))",
-                      backgroundColor: subitem.isActive ? "var(--it-sidebar-active-bg, var(--color-secondary-50))" : "transparent",
-                      fontSize: "0.78rem",
-                      fontWeight: subitem.isActive ? 600 : 500,
-                      letterSpacing: "0.01em",
-                      marginLeft: subitemConnector === "|" ? "-1px" : "0"
-                    },
-                    onMouseEnter: (e) => {
-                      if (!subitem.isActive) {
-                        e.currentTarget.style.backgroundColor = "var(--it-sidebar-hover-bg, var(--color-secondary-100))";
-                        e.currentTarget.style.transform = "translateX(3px)";
-                      }
-                    },
-                    onMouseLeave: (e) => {
-                      if (!subitem.isActive) {
-                        e.currentTarget.style.backgroundColor = "transparent";
-                        e.currentTarget.style.transform = "translateX(0)";
-                      }
-                    },
-                    children: [
-                      subitem.isActive && subitemConnector === "|" && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
-                        "div",
-                        {
-                          className: "absolute left-0 top-1/3 bottom-1/3 w-[2.5px] rounded-r-full transition-all",
-                          style: {
-                            backgroundColor: "var(--it-sidebar-active-icon, var(--color-primary-500))",
-                            boxShadow: "0 0 6px color-mix(in srgb, var(--it-sidebar-active-icon, var(--color-primary-500)) 25%, transparent)"
-                          }
-                        }
-                      ),
-                      subitemConnector === "dot" && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
-                        "span",
-                        {
-                          className: `w-1.5 h-1.5 rounded-full flex-shrink-0 transition-all duration-300 ${subitem.isActive ? "scale-125" : ""}`,
-                          style: {
-                            backgroundColor: subitem.isActive ? "var(--it-sidebar-active-icon, var(--color-primary-500))" : "var(--it-sidebar-icon-color, var(--color-secondary-400))"
-                          }
-                        }
-                      ),
-                      /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(ITText, { as: "span", className: "truncate", children: subitem.label })
-                    ]
-                  }
-                ) }, subitem.id))
+                children: item.subitems.map(
+                  (entry) => isSubItemGroup(entry) ? renderSubItemGroup(entry, item.id) : renderSubItem(entry)
+                )
               }
             ) })
           ] }, item.id);
@@ -8188,6 +8263,7 @@ function ITTable({
   const isStickyHeader = stickyHeader && isTableVirtual;
   const resolvedRowHeight = rowHeight ?? getRowHeight(size, density);
   const columnCount = columns.length;
+  const pinnedMeta = import_react37.default.useMemo(() => getPinnedColumnMeta(columns), [columns]);
   const {
     scrollRef,
     startIndex,
@@ -8512,37 +8588,45 @@ function ITTable({
                 {
                   className: (0, import_clsx43.default)(tableHeaderRow, "dark:text-slate-200"),
                   "aria-rowindex": isTableVirtual ? 1 : void 0,
-                  children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
-                    "th",
-                    {
-                      scope: "col",
-                      className: (0, import_clsx43.default)(
-                        tableHeaderCell(col.className, density),
-                        col.align && tableAlignClasses[col.align],
-                        isStickyHeader && "sticky top-0 z-10 bg-secondary-50"
-                      ),
-                      style: col.minWidth != null || isStickyHeader ? {
-                        ...col.minWidth != null ? { minWidth: `${col.minWidth}px` } : {},
-                        ...isStickyHeader ? { backgroundColor: "var(--color-table-headerBg, #f8fafc)" } : {}
-                      } : void 0,
-                      children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: isFixed ? "flex flex-col gap-3" : "flex flex-col gap-3 min-w-[150px]", children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "flex items-center justify-between gap-2", children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(ITText, { as: "span", className: "text-slate-900 dark:text-white font-bold", children: col.label }),
-                          col.sortable && col.type !== "actions" && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
-                            "button",
-                            {
-                              onClick: () => handleSort(col.key),
-                              className: `p-1 rounded-md transition-colors ${sortConfig?.key === col.key ? "bg-secondary-200 text-secondary-900" : "hover:bg-secondary-200 text-secondary-400 hover:text-secondary-700"}`,
-                              title: `Ordenar por ${col.label}`,
-                              children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_md2.MdOutlineSwapVert, { className: "w-4 h-4", "aria-hidden": "true" })
-                            }
-                          )
-                        ] }),
-                        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "w-full", children: col.filter ? renderFilterInput(col) : null })
-                      ] })
-                    },
-                    col.key
-                  ))
+                  children: columns.map((col) => {
+                    const pin = pinnedMeta[col.key];
+                    const isPinned = pin != null;
+                    return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+                      "th",
+                      {
+                        scope: "col",
+                        className: (0, import_clsx43.default)(
+                          tableHeaderCell(col.className, density),
+                          col.align && tableAlignClasses[col.align],
+                          isPinned && "sticky",
+                          isStickyHeader && "sticky top-0 bg-secondary-50",
+                          isPinned ? "z-[15]" : isStickyHeader && "z-10",
+                          isPinned && (col.pinned === "left" ? "it-table-pinned-left" : "it-table-pinned-right")
+                        ),
+                        style: col.minWidth != null || isStickyHeader || isPinned ? {
+                          ...col.minWidth != null ? { minWidth: `${col.minWidth}px` } : {},
+                          ...isStickyHeader || isPinned ? { backgroundColor: "var(--color-table-headerBg, #f8fafc)" } : {},
+                          ...isPinned ? pin.side === "left" ? { left: pin.offset } : { right: pin.offset } : {}
+                        } : void 0,
+                        children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: isFixed ? "flex flex-col gap-3" : "flex flex-col gap-3 min-w-[150px]", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "flex items-center justify-between gap-2", children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(ITText, { as: "span", className: "text-slate-900 dark:text-white font-bold", children: col.label }),
+                            col.sortable && col.type !== "actions" && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+                              "button",
+                              {
+                                onClick: () => handleSort(col.key),
+                                className: `p-1 rounded-md transition-colors ${sortConfig?.key === col.key ? "bg-secondary-200 text-secondary-900" : "hover:bg-secondary-200 text-secondary-400 hover:text-secondary-700"}`,
+                                title: `Ordenar por ${col.label}`,
+                                children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_md2.MdOutlineSwapVert, { className: "w-4 h-4", "aria-hidden": "true" })
+                              }
+                            )
+                          ] }),
+                          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "w-full", children: col.filter ? renderFilterInput(col) : null })
+                        ] })
+                      },
+                      col.key
+                    );
+                  })
                 }
               ) }),
               /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("tbody", { className: (0, import_clsx43.default)(tableBody, "dark:divide-slate-700/30"), children: currentData.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_jsx_runtime60.Fragment, { children: [
@@ -8564,14 +8648,22 @@ function ITTable({
                       children: columns.map((col) => {
                         const rawValue = getNestedValue(row, col.key);
                         const truncateTitle = col.truncate && (typeof rawValue === "string" || typeof rawValue === "number") ? String(rawValue) : void 0;
+                        const pin = pinnedMeta[col.key];
+                        const isPinned = pin != null;
                         return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
                           "td",
                           {
                             className: (0, import_clsx43.default)(
                               tableCell(col.className, density),
-                              col.align && tableAlignClasses[col.align]
+                              col.align && tableAlignClasses[col.align],
+                              isPinned && "sticky bg-[var(--color-table-rowBg,white)] group-hover:bg-[var(--color-table-rowHover,var(--color-secondary-50))]",
+                              isPinned && (col.pinned === "left" ? "it-table-pinned-left" : "it-table-pinned-right"),
+                              isPinned && "z-[1]"
                             ),
-                            style: col.minWidth != null ? { minWidth: `${col.minWidth}px` } : void 0,
+                            style: col.minWidth != null || isPinned ? {
+                              ...col.minWidth != null ? { minWidth: `${col.minWidth}px` } : {},
+                              ...isPinned ? pin.side === "left" ? { left: pin.offset } : { right: pin.offset } : {}
+                            } : void 0,
                             title: truncateTitle,
                             children: col.type === "actions" ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: tableActionsCell, children: renderCellContent(col, row) }) : /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: (0, import_clsx43.default)(tableCellText, col.truncate && "truncate"), children: renderCellContent(col, row) })
                           },