@underverse-ui/underverse 0.2.75 → 0.2.76

package/dist/index.cjs

@@ -13143,6 +13143,103 @@ function DataTablePagination({
   ] });
 }
 
+// ../../components/ui/DataTable/utils/headers.ts
+function isLeafColumn(col) {
+  return !col.children || col.children.length === 0;
+}
+function getLeafColumns(columns) {
+  const leaves = [];
+  function traverse(cols) {
+    for (const col of cols) {
+      if (isLeafColumn(col)) {
+        leaves.push(col);
+      } else if (col.children) {
+        traverse(col.children);
+      }
+    }
+  }
+  traverse(columns);
+  return leaves;
+}
+function getHeaderDepth(columns) {
+  function getDepth(cols) {
+    if (!cols || cols.length === 0) return 0;
+    let maxDepth = 1;
+    for (const col of cols) {
+      if (col.children && col.children.length > 0) {
+        maxDepth = Math.max(maxDepth, 1 + getDepth(col.children));
+      }
+    }
+    return maxDepth;
+  }
+  return getDepth(columns);
+}
+function getColSpan(col) {
+  if (col.colSpan !== void 0) return col.colSpan;
+  if (isLeafColumn(col)) return 1;
+  return col.children.reduce((sum, child) => sum + getColSpan(child), 0);
+}
+function getRowSpan(col, maxDepth, currentDepth) {
+  if (col.rowSpan !== void 0) return col.rowSpan;
+  if (isLeafColumn(col)) {
+    return maxDepth - currentDepth + 1;
+  }
+  return 1;
+}
+function buildHeaderRows(columns) {
+  const maxDepth = getHeaderDepth(columns);
+  const rows = Array.from({ length: maxDepth }, () => []);
+  function buildCell(col, rowIndex, colIndex) {
+    const colSpan = getColSpan(col);
+    const rowSpan = getRowSpan(col, maxDepth, rowIndex + 1);
+    const isLeaf = isLeafColumn(col);
+    rows[rowIndex].push({
+      column: col,
+      colSpan,
+      rowSpan,
+      isLeaf,
+      rowIndex,
+      colIndex
+    });
+    if (col.children && col.children.length > 0) {
+      let childColIndex = colIndex;
+      for (const child of col.children) {
+        childColIndex = buildCell(child, rowIndex + 1, childColIndex);
+      }
+    }
+    return colIndex + colSpan;
+  }
+  let currentColIndex = 0;
+  for (const col of columns) {
+    currentColIndex = buildCell(col, 0, currentColIndex);
+  }
+  return rows;
+}
+function filterVisibleColumns(columns, visibleKeys) {
+  return columns.map((col) => {
+    if (col.children) {
+      const visibleChildren = filterVisibleColumns(col.children, visibleKeys);
+      if (visibleChildren.length > 0) {
+        return { ...col, children: visibleChildren };
+      }
+      return null;
+    }
+    return visibleKeys.has(col.key) ? col : null;
+  }).filter((col) => col !== null);
+}
+function getLeafColumnsWithFixedInheritance(columns, inheritedFixed) {
+  const leaves = [];
+  for (const col of columns) {
+    const effectiveFixed = col.fixed ?? inheritedFixed;
+    if (isLeafColumn(col)) {
+      leaves.push({ ...col, fixed: effectiveFixed });
+    } else if (col.children) {
+      leaves.push(...getLeafColumnsWithFixedInheritance(col.children, effectiveFixed));
+    }
+  }
+  return leaves;
+}
+
 // ../../components/ui/DataTable/components/Toolbar.tsx
 var import_jsx_runtime58 = require("react/jsx-runtime");
 function DataTableToolbar({
@@ -13177,36 +13274,39 @@ function DataTableToolbar({
           ]
         }
       ),
-      enableColumnVisibilityToggle && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
-        DropdownMenu_default,
-        {
-          trigger: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(Button_default, { variant: "ghost", size: "sm", className: "h-8 px-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("svg", { className: "w-4 h-4 mr-1", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
-              "path",
+      enableColumnVisibilityToggle && (() => {
+        const leafCols = getLeafColumns(columns);
+        return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+          DropdownMenu_default,
+          {
+            trigger: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(Button_default, { variant: "ghost", size: "sm", className: "h-8 px-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("svg", { className: "w-4 h-4 mr-1", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+                "path",
+                {
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth: 2,
+                  d: "M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2"
+                }
+              ) }),
+              labels?.columns || t("columns")
+            ] }),
+            children: leafCols.map((c) => /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
+              DropdownMenuItem,
               {
-                strokeLinecap: "round",
-                strokeLinejoin: "round",
-                strokeWidth: 2,
-                d: "M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2"
-              }
-            ) }),
-            labels?.columns || t("columns")
-          ] }),
-          children: columns.map((c) => /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
-            DropdownMenuItem,
-            {
-              onClick: () => {
-                setVisibleCols((prev) => prev.includes(c.key) ? prev.filter((k) => k !== c.key) : [...prev, c.key]);
+                onClick: () => {
+                  setVisibleCols((prev) => prev.includes(c.key) ? prev.filter((k) => k !== c.key) : [...prev, c.key]);
+                },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("input", { type: "checkbox", className: "mr-2 rounded-md border-border", readOnly: true, checked: visibleCols.includes(c.key) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "truncate", children: c.title })
+                ]
               },
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("input", { type: "checkbox", className: "mr-2 rounded-md border-border", readOnly: true, checked: visibleCols.includes(c.key) }),
-                /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "truncate", children: c.title })
-              ]
-            },
-            c.key
-          ))
-        }
-      ),
+              c.key
+            ))
+          }
+        );
+      })(),
       enableHeaderAlignToggle && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
         DropdownMenu_default,
         {
@@ -13281,32 +13381,40 @@ var import_react34 = __toESM(require("react"), 1);
 // ../../components/ui/DataTable/utils/columns.ts
 function getColumnWidth(col, fallback = 150) {
   if (typeof col.width === "number") return col.width;
-  const raw = col.width ? String(col.width) : String(fallback);
-  const parsed = parseInt(raw, 10);
-  return Number.isFinite(parsed) && parsed > 0 ? parsed : fallback;
+  if (col.width) {
+    const raw = String(col.width);
+    const parsed = parseInt(raw, 10);
+    if (Number.isFinite(parsed) && parsed > 0) return parsed;
+  }
+  if (col.children && col.children.length > 0) {
+    return col.children.reduce((sum, child) => sum + getColumnWidth(child, fallback), 0);
+  }
+  return fallback;
 }
 
 // ../../components/ui/DataTable/hooks/useStickyColumns.ts
-function useStickyColumns(visibleColumns) {
+function useStickyColumns(columns, visibleKeys) {
+  const visibleColumns = import_react34.default.useMemo(() => filterVisibleColumns(columns, visibleKeys), [columns, visibleKeys]);
+  const leafColumns = import_react34.default.useMemo(() => getLeafColumnsWithFixedInheritance(visibleColumns), [visibleColumns]);
   const stickyPositions = import_react34.default.useMemo(() => {
     const positions = {};
     let leftOffset = 0;
-    for (const col of visibleColumns) {
+    for (const col of leafColumns) {
       if (col.fixed === "left") {
         positions[col.key] = { left: leftOffset };
         leftOffset += getColumnWidth(col);
       }
     }
     let rightOffset = 0;
-    for (let i = visibleColumns.length - 1; i >= 0; i--) {
-      const col = visibleColumns[i];
+    for (let i = leafColumns.length - 1; i >= 0; i--) {
+      const col = leafColumns[i];
       if (col.fixed === "right") {
         positions[col.key] = { right: rightOffset };
         rightOffset += getColumnWidth(col);
       }
     }
     return positions;
-  }, [visibleColumns]);
+  }, [leafColumns]);
   const getStickyColumnStyle = import_react34.default.useCallback(
     (col) => {
       if (!col.fixed) return {};
@@ -13336,7 +13444,109 @@ function useStickyColumns(visibleColumns) {
       isStripedRow ? "bg-muted!" : "bg-card!"
     );
   }, []);
-  return { getStickyColumnStyle, getStickyHeaderClass, getStickyCellClass };
+  const getStickyHeaderCellStyle = import_react34.default.useCallback(
+    (headerCell) => {
+      const col = headerCell.column;
+      if (headerCell.isLeaf) {
+        return getStickyColumnStyle(col);
+      }
+      const descendants = getLeafColumns([col]);
+      const stickyDescendants = descendants.filter((d) => d.fixed);
+      if (stickyDescendants.length === 0) return {};
+      const firstSticky = stickyDescendants[0];
+      const lastSticky = stickyDescendants[stickyDescendants.length - 1];
+      if (firstSticky.fixed === "left") {
+        const pos = stickyPositions[firstSticky.key];
+        return pos?.left !== void 0 ? { left: pos.left } : {};
+      }
+      if (lastSticky.fixed === "right") {
+        const pos = stickyPositions[lastSticky.key];
+        return pos?.right !== void 0 ? { right: pos.right } : {};
+      }
+      return {};
+    },
+    [stickyPositions, getStickyColumnStyle]
+  );
+  return {
+    getStickyColumnStyle,
+    getStickyHeaderClass,
+    getStickyCellClass,
+    getStickyHeaderCellStyle
+  };
+}
+
+// ../../components/ui/DataTable/utils/validation.ts
+function validateColumns(columns) {
+  const warnings = [];
+  const keys = /* @__PURE__ */ new Set();
+  function validate(cols, path = "") {
+    for (const col of cols) {
+      const fullPath = path ? `${path}.${col.key}` : col.key;
+      if (keys.has(col.key)) {
+        warnings.push(`Duplicate key "${col.key}" at ${fullPath}`);
+      }
+      keys.add(col.key);
+      const isGroup = col.children && col.children.length > 0;
+      if (isGroup) {
+        if (col.dataIndex) {
+          warnings.push(`Group column "${fullPath}" has dataIndex (will be ignored)`);
+        }
+        if (col.sortable) {
+          warnings.push(`Group column "${fullPath}" has sortable (will be ignored)`);
+        }
+        if (col.filter) {
+          warnings.push(`Group column "${fullPath}" has filter (will be ignored)`);
+        }
+        if (col.render) {
+          warnings.push(`Group column "${fullPath}" has render function (will be ignored)`);
+        }
+        if (col.colSpan !== void 0) {
+          const actualColSpan = getColSpan(col);
+          if (col.colSpan !== actualColSpan) {
+            warnings.push(
+              `Column "${fullPath}" has colSpan=${col.colSpan} but structure suggests ${actualColSpan} (based on ${col.children.length} children)`
+            );
+          }
+        }
+        if (col.fixed) {
+          const conflictingChildren = col.children.filter((c) => c.fixed && c.fixed !== col.fixed);
+          if (conflictingChildren.length > 0) {
+            warnings.push(
+              `Group column "${fullPath}" has fixed="${col.fixed}" but children have different fixed values: ${conflictingChildren.map((c) => c.key).join(", ")}`
+            );
+          }
+        }
+        validate(col.children, fullPath);
+      } else {
+        if (col.children !== void 0) {
+          warnings.push(`Leaf column "${fullPath}" has children property (should be omitted for leaf columns)`);
+        }
+      }
+    }
+  }
+  validate(columns);
+  const depth = getHeaderDepth(columns);
+  if (depth > 4) {
+    warnings.push(`Header depth is ${depth} rows. Consider simplifying - too many header rows may impact user experience.`);
+  }
+  function checkMixedSticky(cols, parentPath = "") {
+    for (const col of cols) {
+      if (col.children && col.children.length > 0) {
+        const childrenFixed = col.children.map((c) => c.fixed);
+        const hasStickyChild = childrenFixed.some((f) => f !== void 0);
+        const hasNonStickyChild = childrenFixed.some((f) => f === void 0);
+        if (hasStickyChild && hasNonStickyChild) {
+          const fullPath = parentPath ? `${parentPath}.${col.key}` : col.key;
+          warnings.push(
+            `Group column "${fullPath}" has mixed sticky children (some fixed, some not). This may cause visual separation when scrolling.`
+          );
+        }
+        checkMixedSticky(col.children, parentPath ? `${parentPath}.${col.key}` : col.key);
+      }
+    }
+  }
+  checkMixedSticky(columns);
+  return warnings;
 }
 
 // ../../components/ui/DataTable/DataTable.tsx
@@ -13372,6 +13582,12 @@ function DataTable({
   const [density, setDensity] = import_react35.default.useState("normal");
   const [curPage, setCurPage] = import_react35.default.useState(page);
   const { curPageSize, setCurPageSize } = usePageSizeStorage({ pageSize, storageKey });
+  import_react35.default.useEffect(() => {
+    if (process.env.NODE_ENV === "development") {
+      const warnings = validateColumns(columns);
+      warnings.forEach((w) => console.warn(`[DataTable] ${w}`));
+    }
+  }, [columns]);
   import_react35.default.useEffect(() => {
     const newColKeys = columns.filter((c) => c.visible !== false).map((c) => c.key);
     setVisibleCols((prev) => {
@@ -13396,11 +13612,19 @@ function DataTable({
   const densityRowClass = density === "compact" ? "h-9" : density === "comfortable" ? "h-14" : "h-12";
   const cellPadding = density === "compact" ? "py-1.5 px-3" : density === "comfortable" ? "py-3 px-4" : "py-2.5 px-4";
   const visibleColsSet = import_react35.default.useMemo(() => new Set(visibleCols), [visibleCols]);
-  const visibleColumns = columns.filter((c) => visibleColsSet.has(c.key));
-  const totalColumnsWidth = import_react35.default.useMemo(() => {
-    return visibleColumns.reduce((sum, col) => sum + getColumnWidth(col), 0);
+  const visibleColumns = import_react35.default.useMemo(() => {
+    return filterVisibleColumns(columns, visibleColsSet);
+  }, [columns, visibleColsSet]);
+  const leafColumns = import_react35.default.useMemo(() => {
+    return getLeafColumns(visibleColumns);
   }, [visibleColumns]);
-  const { getStickyCellClass, getStickyColumnStyle, getStickyHeaderClass } = useStickyColumns(visibleColumns);
+  const totalColumnsWidth = import_react35.default.useMemo(() => {
+    return leafColumns.reduce((sum, col) => sum + getColumnWidth(col), 0);
+  }, [leafColumns]);
+  const { getStickyCellClass, getStickyColumnStyle, getStickyHeaderClass, getStickyHeaderCellStyle } = useStickyColumns(
+    columns,
+    visibleColsSet
+  );
   const getRowKey = (row, idx) => {
     if (!rowKey) return String(idx);
     if (typeof rowKey === "function") return String(rowKey(row));
@@ -13456,127 +13680,150 @@ function DataTable({
     }
     return null;
   };
-  const renderHeader = /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(TableRow, { children: visibleColumns.map((col, colIdx) => {
-    const prevCol = colIdx > 0 ? visibleColumns[colIdx - 1] : null;
+  const headerRows = import_react35.default.useMemo(() => buildHeaderRows(visibleColumns), [visibleColumns]);
+  const renderHeaderContent = (col, isLeaf) => {
+    if (!isLeaf) {
+      return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+        "div",
+        {
+          className: cn(
+            "flex items-center gap-1 min-h-10",
+            col.align === "right" && "justify-end",
+            col.align === "center" && "justify-center",
+            !col.align && "justify-start"
+          ),
+          children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "font-medium text-sm whitespace-nowrap", children: col.title })
+        }
+      );
+    }
+    const isRightAlign = col.align === "right" || !col.align && headerAlign === "right";
+    const isCenterAlign = col.align === "center" || !col.align && headerAlign === "center";
+    const titleContent = /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "font-medium text-sm whitespace-nowrap", children: col.title }),
+      col.sortable && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+        "button",
+        {
+          className: cn(
+            "p-1 rounded-lg transition-all duration-200 hover:bg-accent",
+            sort?.key === col.key ? "opacity-100 bg-accent" : "opacity-60 hover:opacity-100"
+          ),
+          onClick: () => {
+            setCurPage(1);
+            setSort((s) => {
+              if (!s || s.key !== col.key) return { key: col.key, order: "asc" };
+              if (s.order === "asc") return { key: col.key, order: "desc" };
+              return null;
+            });
+          },
+          "aria-label": "Sort",
+          title: `Sort by ${String(col.title)}`,
+          children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 20 20", fill: "none", className: "inline-block", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+              "path",
+              {
+                d: "M7 8l3-3 3 3",
+                stroke: "currentColor",
+                strokeWidth: "1.5",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                opacity: sort?.key === col.key && sort.order === "asc" ? 1 : 0.4
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+              "path",
+              {
+                d: "M7 12l3 3 3-3",
+                stroke: "currentColor",
+                strokeWidth: "1.5",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                opacity: sort?.key === col.key && sort.order === "desc" ? 1 : 0.4
+              }
+            )
+          ] })
+        }
+      )
+    ] });
+    const filterContent = col.filter ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+      Popover,
+      {
+        placement: "bottom-start",
+        trigger: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+          "button",
+          {
+            className: cn(
+              "p-1.5 rounded-lg transition-all duration-200 hover:bg-accent",
+              filters[col.key] ? "bg-accent text-primary" : "text-muted-foreground"
+            ),
+            "aria-label": "Filter",
+            title: `Filter by ${String(col.title)}`,
+            children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_lucide_react27.Filter, { className: "w-4 h-4" })
+          }
+        ),
+        children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "p-3 w-64 space-y-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "text-sm font-medium", children: col.title }),
+            filters[col.key] !== void 0 && filters[col.key] !== null && filters[col.key] !== "" && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+              "button",
+              {
+                onClick: () => {
+                  setCurPage(1);
+                  setFilters((f) => ({ ...f, [col.key]: void 0 }));
+                },
+                className: "text-xs text-destructive hover:underline",
+                children: t("clearFilter")
+              }
+            )
+          ] }),
+          renderFilterControl(col)
+        ] })
+      }
+    ) : null;
+    return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+      "div",
+      {
+        className: cn(
+          "flex items-center gap-2 select-none min-h-10",
+          isRightAlign && "justify-end",
+          isCenterAlign && "justify-center",
+          !isRightAlign && !isCenterAlign && "justify-start"
+        ),
+        children: isRightAlign ? /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_jsx_runtime59.Fragment, { children: [
+          filterContent,
+          titleContent
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_jsx_runtime59.Fragment, { children: [
+          titleContent,
+          filterContent
+        ] })
+      }
+    );
+  };
+  const renderHeader = /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_jsx_runtime59.Fragment, { children: headerRows.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(TableRow, { children: row.map((headerCell, cellIndex) => {
+    const { column: col, colSpan, rowSpan, isLeaf } = headerCell;
+    const prevCell = cellIndex > 0 ? row[cellIndex - 1] : null;
+    const prevCol = prevCell?.column;
     const isAfterFixedLeft = prevCol?.fixed === "left";
-    const showBorderLeft = columnDividers && colIdx > 0 && !isAfterFixedLeft && !col.fixed;
+    const showBorderLeft = columnDividers && cellIndex > 0 && !isAfterFixedLeft && !col.fixed;
     return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
       TableHead,
       {
-        style: { width: col.width, ...getStickyColumnStyle(col) },
+        colSpan,
+        rowSpan,
+        style: {
+          width: col.width,
+          ...getStickyHeaderCellStyle(headerCell)
+        },
         className: cn(
           (col.align === "right" || !col.align && headerAlign === "right") && "text-right",
           (col.align === "center" || !col.align && headerAlign === "center") && "text-center",
           showBorderLeft && "border-l border-border/60",
           getStickyHeaderClass(col)
         ),
-        children: (() => {
-          const isRightAlign = col.align === "right" || !col.align && headerAlign === "right";
-          const isCenterAlign = col.align === "center" || !col.align && headerAlign === "center";
-          const titleContent = /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: cn("flex items-center gap-1", !col.fixed && "min-w-0 shrink"), children: [
-            /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: cn("font-medium text-sm", !col.fixed && "truncate"), children: col.title }),
-            col.sortable && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-              "button",
-              {
-                className: cn(
-                  "p-1 rounded-lg transition-all duration-200 hover:bg-accent",
-                  sort?.key === col.key ? "opacity-100 bg-accent" : "opacity-60 hover:opacity-100"
-                ),
-                onClick: () => {
-                  setCurPage(1);
-                  setSort((s) => {
-                    if (!s || s.key !== col.key) return { key: col.key, order: "asc" };
-                    if (s.order === "asc") return { key: col.key, order: "desc" };
-                    return null;
-                  });
-                },
-                "aria-label": "Sort",
-                title: `Sort by ${String(col.title)}`,
-                children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 20 20", fill: "none", className: "inline-block", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-                    "path",
-                    {
-                      d: "M7 8l3-3 3 3",
-                      stroke: "currentColor",
-                      strokeWidth: "1.5",
-                      strokeLinecap: "round",
-                      strokeLinejoin: "round",
-                      opacity: sort?.key === col.key && sort.order === "asc" ? 1 : 0.4
-                    }
-                  ),
-                  /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-                    "path",
-                    {
-                      d: "M7 12l3 3 3-3",
-                      stroke: "currentColor",
-                      strokeWidth: "1.5",
-                      strokeLinecap: "round",
-                      strokeLinejoin: "round",
-                      opacity: sort?.key === col.key && sort.order === "desc" ? 1 : 0.4
-                    }
-                  )
-                ] })
-              }
-            )
-          ] });
-          const filterContent = col.filter ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-            Popover,
-            {
-              placement: "bottom-start",
-              trigger: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-                "button",
-                {
-                  className: cn(
-                    "p-1.5 rounded-lg transition-all duration-200 hover:bg-accent",
-                    filters[col.key] ? "bg-accent text-primary" : "text-muted-foreground"
-                  ),
-                  "aria-label": "Filter",
-                  title: `Filter by ${String(col.title)}`,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_lucide_react27.Filter, { className: "w-4 h-4" })
-                }
-              ),
-              children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "p-3 w-64 space-y-3", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "flex items-center justify-between", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "text-sm font-medium", children: col.title }),
-                  filters[col.key] !== void 0 && filters[col.key] !== null && filters[col.key] !== "" && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-                    "button",
-                    {
-                      onClick: () => {
-                        setCurPage(1);
-                        setFilters((f) => ({ ...f, [col.key]: void 0 }));
-                      },
-                      className: "text-xs text-destructive hover:underline",
-                      children: t("clearFilter")
-                    }
-                  )
-                ] }),
-                renderFilterControl(col)
-              ] })
-            }
-          ) : null;
-          return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-            "div",
-            {
-              className: cn(
-                "flex items-center gap-2 select-none min-h-10",
-                isRightAlign && "justify-end",
-                isCenterAlign && "justify-center",
-                !isRightAlign && !isCenterAlign && "justify-start"
-              ),
-              children: isRightAlign ? /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_jsx_runtime59.Fragment, { children: [
-                filterContent,
-                titleContent
-              ] }) : /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_jsx_runtime59.Fragment, { children: [
-                titleContent,
-                filterContent
-              ] })
-            }
-          );
-        })()
+        children: renderHeaderContent(col, isLeaf)
       },
       col.key
     );
-  }) });
+  }) }, `header-row-${rowIndex}`)) });
   const processedData = import_react35.default.useMemo(() => {
     if (isServerMode) return data;
     let result = [...data];
@@ -13652,7 +13899,7 @@ function DataTable({
             style: { minWidth: totalColumnsWidth > 0 ? `${totalColumnsWidth}px` : void 0 },
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(TableHeader, { children: renderHeader }),
-              /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(TableBody, { children: loading2 ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(TableCell, { colSpan: visibleColumns.length, className: "text-center py-8", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "flex items-center justify-center gap-2 text-muted-foreground", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(TableBody, { children: loading2 ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(TableCell, { colSpan: leafColumns.length, className: "text-center py-8", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "flex items-center justify-center gap-2 text-muted-foreground", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("svg", { className: "animate-spin h-4 w-4", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [
                   /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
                   /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
@@ -13668,7 +13915,7 @@ function DataTable({
                   t("loading"),
                   "\u2026"
                 ] })
-              ] }) }) }) : !displayedData || displayedData.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(TableCell, { colSpan: visibleColumns.length, className: "text-center py-6 text-muted-foreground", children: t("noData") }) }) : displayedData.map((row, idx) => {
+              ] }) }) }) : !displayedData || displayedData.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(TableCell, { colSpan: leafColumns.length, className: "text-center py-6 text-muted-foreground", children: t("noData") }) }) : displayedData.map((row, idx) => {
                 const isLastRow = idx === displayedData.length - 1;
                 return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
                   TableRow,
@@ -13678,10 +13925,10 @@ function DataTable({
                       contentVisibility: "auto",
                       containIntrinsicSize: density === "compact" ? "0 36px" : density === "comfortable" ? "0 56px" : "0 48px"
                     },
-                    children: visibleColumns.map((col, colIdx) => {
+                    children: leafColumns.map((col, colIdx) => {
                       const value = col.dataIndex ? row[col.dataIndex] : void 0;
                       const isStripedRow = striped && idx % 2 === 0;
-                      const prevCol = colIdx > 0 ? visibleColumns[colIdx - 1] : null;
+                      const prevCol = colIdx > 0 ? leafColumns[colIdx - 1] : null;
                       const isAfterFixedLeft = prevCol?.fixed === "left";
                       const showBorderLeft = columnDividers && colIdx > 0 && !isAfterFixedLeft && !col.fixed;
                       return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
@@ -13693,8 +13940,8 @@ function DataTable({
                             col.align === "right" && "text-right",
                             col.align === "center" && "text-center",
                             showBorderLeft && "border-l border-border/60",
-                            isLastRow && col === visibleColumns[0] && "rounded-bl-2xl md:rounded-bl-3xl",
-                            isLastRow && col === visibleColumns[visibleColumns.length - 1] && "rounded-br-2xl md:rounded-br-3xl",
+                            isLastRow && col === leafColumns[0] && "rounded-bl-2xl md:rounded-bl-3xl",
+                            isLastRow && col === leafColumns[leafColumns.length - 1] && "rounded-br-2xl md:rounded-br-3xl",
                             getStickyCellClass(col, isStripedRow),
                             !col.fixed && isStripedRow && "bg-muted/50"
                           ),