@underverse-ui/underverse 0.2.64 → 0.2.66

package/dist/index.d.cts

@@ -1668,6 +1668,8 @@ type DataTableColumn<T> = {
     };
     render?: (value: any, record: T, index: number) => React__default.ReactNode;
     visible?: boolean;
+    /** Cố định cột bên trái hoặc phải khi cuộn ngang */
+    fixed?: "left" | "right";
 };
 type Sorter = {
     key: string;

package/dist/index.d.ts

@@ -1668,6 +1668,8 @@ type DataTableColumn<T> = {
     };
     render?: (value: any, record: T, index: number) => React__default.ReactNode;
     visible?: boolean;
+    /** Cố định cột bên trái hoặc phải khi cuộn ngang */
+    fixed?: "left" | "right";
 };
 type Sorter = {
     key: string;

package/dist/index.js

@@ -12972,6 +12972,45 @@ function DataTable({
   const cellPadding = density === "compact" ? "py-1.5 px-3" : density === "comfortable" ? "py-3 px-4" : "py-2.5 px-4";
   const visibleColsSet = React48.useMemo(() => new Set(visibleCols), [visibleCols]);
   const visibleColumns = columns.filter((c) => visibleColsSet.has(c.key));
+  const stickyPositions = React48.useMemo(() => {
+    const positions = {};
+    let leftOffset = 0;
+    for (const col of visibleColumns) {
+      if (col.fixed === "left") {
+        positions[col.key] = { left: leftOffset };
+        const colWidth = typeof col.width === "number" ? col.width : parseInt(String(col.width) || "150", 10);
+        leftOffset += colWidth;
+      }
+    }
+    let rightOffset = 0;
+    for (let i = visibleColumns.length - 1; i >= 0; i--) {
+      const col = visibleColumns[i];
+      if (col.fixed === "right") {
+        positions[col.key] = { right: rightOffset };
+        const colWidth = typeof col.width === "number" ? col.width : parseInt(String(col.width) || "150", 10);
+        rightOffset += colWidth;
+      }
+    }
+    return positions;
+  }, [visibleColumns]);
+  const getStickyColumnClass = (col, isHeader = false) => {
+    if (!col.fixed) return "";
+    return cn(
+      "sticky z-10 bg-background",
+      col.fixed === "left" && "shadow-[2px_0_5px_-2px_rgba(0,0,0,0.1)]",
+      col.fixed === "right" && "shadow-[-2px_0_5px_-2px_rgba(0,0,0,0.1)]",
+      isHeader && "z-20"
+      // Header cần z-index cao hơn
+    );
+  };
+  const getStickyColumnStyle = (col) => {
+    if (!col.fixed) return {};
+    const pos = stickyPositions[col.key];
+    return {
+      ...pos?.left !== void 0 && { left: pos.left },
+      ...pos?.right !== void 0 && { right: pos.right }
+    };
+  };
   const getRowKey = (row, idx) => {
     if (!rowKey) return String(idx);
     if (typeof rowKey === "function") return String(rowKey(row));
@@ -13032,12 +13071,13 @@ function DataTable({
   const renderHeader = /* @__PURE__ */ jsx57(TableRow, { children: visibleColumns.map((col, colIdx) => /* @__PURE__ */ jsx57(
     TableHead,
     {
-      style: { width: col.width },
+      style: { width: col.width, ...getStickyColumnStyle(col) },
       className: cn(
         // Use column-specific align if defined, otherwise use global headerAlign
         (col.align === "right" || !col.align && headerAlign === "right") && "text-right",
         (col.align === "center" || !col.align && headerAlign === "center") && "text-center",
-        columnDividers && colIdx > 0 && "border-l border-border/60"
+        columnDividers && colIdx > 0 && "border-l border-border/60",
+        getStickyColumnClass(col, true)
       ),
       children: (() => {
         const isRightAlign = col.align === "right" || !col.align && headerAlign === "right";
@@ -13294,13 +13334,17 @@ function DataTable({
                   return /* @__PURE__ */ jsx57(
                     TableCell,
                     {
+                      style: getStickyColumnStyle(col),
                       className: cn(
                         cellPadding,
                         col.align === "right" && "text-right",
                         col.align === "center" && "text-center",
                         columnDividers && colIdx > 0 && "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 === visibleColumns[visibleColumns.length - 1] && "rounded-br-2xl md:rounded-br-3xl",
+                        getStickyColumnClass(col),
+                        // Giữ màu nền striped cho cột cố định
+                        col.fixed && striped && idx % 2 === 0 && "bg-muted/50!"
                       ),
                       children: col.render ? col.render(value, row, idx) : String(value ?? "")
                     },