pam-grid 1.0.8 → 1.1.0

package/dist/index.d.mts

@@ -16,9 +16,13 @@ interface SortState {
     dir: SortDir;
 }
 interface TableAction<T extends object> {
-    label: string;
-    icon?: string;
+    label?: string | ((row: T) => string);
+    icon?: string | ((row: T) => string);
+    onlyIcon?: boolean;
+    className?: string | ((row: T) => string);
+    disabled?: boolean | ((row: T) => boolean);
     isVisible?: boolean | ((row: T) => boolean);
+    tooltip?: string | ((row: T) => string);
     onClick: (row: T) => void;
 }
 interface AdvancedFilter {
@@ -86,6 +90,7 @@ interface GridFetaures<T extends object> {
     aggregation?: boolean;
     IsNumbering?: boolean;
     expand?: boolean;
+    fullScreen?: boolean;
     actions?: TableAction<T>[] | ((row: T, toggleExpand: (id: GridRowId) => void) => React.ReactNode);
     bulkActionsConfig?: BulkAction[];
 }
@@ -198,6 +203,7 @@ interface PamGridProps<T extends Record<string, any>> {
     rowKey?: keyof T;
     maxHeight?: string;
     isDropdown?: boolean;
+    customeDiv?: React.ReactNode;
     isFetching?: boolean;
     addNew?: () => void;
     renderExpanded?: (row: T) => React.ReactNode;
@@ -209,7 +215,7 @@ interface BulkAction {
     onBulkClick: (item: Set<GridRowId>) => Set<GridRowId>;
 }
 
-declare const PamGrid: <T extends Record<string, unknown>>({ columns, grid, loading, features, rowKey, isDropdown, maxHeight, isFetching, addNew, renderExpanded, }: PamGridProps<T>) => react_jsx_runtime.JSX.Element;
+declare const PamGrid: <T extends Record<string, unknown>>({ columns, grid, loading, features, rowKey, isDropdown, maxHeight, isFetching, customeDiv, addNew, renderExpanded, }: PamGridProps<T>) => react_jsx_runtime.JSX.Element;
 
 declare const ColumnVisibilityPanel: <T extends Record<string, any>>({ columns, onToggle, }: ColumnVisibilityPanelProps<T>) => react_jsx_runtime.JSX.Element;
 

package/dist/index.d.ts

@@ -16,9 +16,13 @@ interface SortState {
     dir: SortDir;
 }
 interface TableAction<T extends object> {
-    label: string;
-    icon?: string;
+    label?: string | ((row: T) => string);
+    icon?: string | ((row: T) => string);
+    onlyIcon?: boolean;
+    className?: string | ((row: T) => string);
+    disabled?: boolean | ((row: T) => boolean);
     isVisible?: boolean | ((row: T) => boolean);
+    tooltip?: string | ((row: T) => string);
     onClick: (row: T) => void;
 }
 interface AdvancedFilter {
@@ -86,6 +90,7 @@ interface GridFetaures<T extends object> {
     aggregation?: boolean;
     IsNumbering?: boolean;
     expand?: boolean;
+    fullScreen?: boolean;
     actions?: TableAction<T>[] | ((row: T, toggleExpand: (id: GridRowId) => void) => React.ReactNode);
     bulkActionsConfig?: BulkAction[];
 }
@@ -198,6 +203,7 @@ interface PamGridProps<T extends Record<string, any>> {
     rowKey?: keyof T;
     maxHeight?: string;
     isDropdown?: boolean;
+    customeDiv?: React.ReactNode;
     isFetching?: boolean;
     addNew?: () => void;
     renderExpanded?: (row: T) => React.ReactNode;
@@ -209,7 +215,7 @@ interface BulkAction {
     onBulkClick: (item: Set<GridRowId>) => Set<GridRowId>;
 }
 
-declare const PamGrid: <T extends Record<string, unknown>>({ columns, grid, loading, features, rowKey, isDropdown, maxHeight, isFetching, addNew, renderExpanded, }: PamGridProps<T>) => react_jsx_runtime.JSX.Element;
+declare const PamGrid: <T extends Record<string, unknown>>({ columns, grid, loading, features, rowKey, isDropdown, maxHeight, isFetching, customeDiv, addNew, renderExpanded, }: PamGridProps<T>) => react_jsx_runtime.JSX.Element;
 
 declare const ColumnVisibilityPanel: <T extends Record<string, any>>({ columns, onToggle, }: ColumnVisibilityPanelProps<T>) => react_jsx_runtime.JSX.Element;
 

package/dist/index.js

@@ -97,7 +97,7 @@ function AdvanceFilter({
     );
   };
   if (!type) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { width: 240 }, onClick: (e) => e.stopPropagation(), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { width: 270 }, onClick: (e) => e.stopPropagation(), children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mb-2", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { className: "form-label", children: "Condition" }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
@@ -155,6 +155,15 @@ function AdvanceFilter({
 
 // src/core/utils.ts
 var import_react2 = require("react");
+var EDGE_SIZE = 8;
+var getResizeSide = (e, index) => {
+  const rect = e.currentTarget.getBoundingClientRect();
+  const nearRight = rect.right - e.clientX < EDGE_SIZE;
+  const nearLeft = e.clientX - rect.left < EDGE_SIZE;
+  if (nearRight) return "right";
+  if (nearLeft && index > 0) return "left";
+  return null;
+};
 function getAdvancedFilterType(column) {
   const f = column.enableAdvancedFilter;
   if (!f) return null;
@@ -222,6 +231,9 @@ function useLocalStorageState(key, initialValue) {
   }, [key]);
   return [value, updateValue];
 }
+var resolveValue = (value, row) => {
+  return typeof value === "function" ? value(row) : value;
+};
 
 // src/components/FacetFilter.tsx
 var import_react3 = require("react");
@@ -1304,6 +1316,7 @@ var PamGrid = ({
   isDropdown = false,
   maxHeight = "80vh",
   isFetching = false,
+  customeDiv,
   addNew,
   renderExpanded
 }) => {
@@ -1345,16 +1358,25 @@ var PamGrid = ({
     advanceFilters,
     setColumnAdvanceFilter
   } = grid ?? safeGridHandle;
-  const onResizeMouseDown = (e, key) => {
+  const onResizeMouseDown = (e, key, side = "right") => {
     e.preventDefault();
     const startX = e.clientX;
-    const col = colState.find((c) => c.key === key);
-    if (!col) return;
-    const startWidth = col.width || 120;
+    const colIndex = colState.findIndex((c) => c.key === key);
+    if (colIndex === -1) return;
+    let targetIndex = colIndex;
+    if (side === "left" && colIndex > 0) {
+      targetIndex = colIndex - 1;
+    }
+    const targetCol = colState[targetIndex];
+    if (!targetCol) return;
+    const startWidth = targetCol.width || 120;
     const onMove = (ev) => {
-      const diff = ev.clientX - startX;
+      let diff = ev.clientX - startX;
+      if (side === "left") {
+        diff = -diff;
+      }
       const newWidth = Math.max(60, startWidth + diff);
-      updateColumn(key, { width: newWidth });
+      updateColumn(targetCol.key, { width: newWidth });
     };
     const onUp = () => {
       document.removeEventListener("mousemove", onMove);
@@ -1461,9 +1483,10 @@ var PamGrid = ({
                 ]
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "flex-shrink-0", children: isFullScreen ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Minimize_default, { onClick: () => setFullScreen(!isFullScreen) }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Compress_default, { onClick: () => setFullScreen(!isFullScreen) }) })
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: `flex-shrink-0 ${features.fullScreen ? "" : "d-none"}`, children: isFullScreen ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Minimize_default, { onClick: () => setFullScreen(!isFullScreen) }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Compress_default, { onClick: () => setFullScreen(!isFullScreen) }) })
           ] }) })
         ] }),
+        customeDiv && customeDiv,
         /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "d-flex flex-row gap-1", children: [
           selected.size > 0 && features.bulkActionsConfig && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(BulkAction_default, { records: selected, actions: features.bulkActionsConfig }),
           /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
@@ -1516,7 +1539,7 @@ var PamGrid = ({
                             )
                           }
                         ),
-                        visibleColumns.map((col) => {
+                        visibleColumns.map((col, index) => {
                           const style = {
                             minWidth: col.width || 120,
                             width: col.width,
@@ -1539,18 +1562,41 @@ var PamGrid = ({
                               onDragEnd: () => setDraggingCol(null),
                               onDragOver: (e) => e.preventDefault(),
                               onDrop: (e) => onDrop(e, col.key),
+                              onMouseMove: (e) => {
+                                const side = getResizeSide(e, index);
+                                if (side) {
+                                  e.currentTarget.style.cursor = "col-resize";
+                                } else if (draggingCol === col.key) {
+                                  e.currentTarget.style.cursor = "grabbing";
+                                } else if (features.reorder) {
+                                  e.currentTarget.style.cursor = "grab";
+                                } else {
+                                  e.currentTarget.style.cursor = "default";
+                                }
+                              },
+                              onMouseLeave: (e) => {
+                                e.currentTarget.style.cursor = "default";
+                              },
+                              onMouseDown: (e) => {
+                                const side = getResizeSide(e, index);
+                                if (!side) return;
+                                e.stopPropagation();
+                                onResizeMouseDown(e, col.key, side);
+                              },
                               className: `pms-col-header vs-th
-                        ${features.reorder ? "cursor-grab" : ""}
-                        ${draggingCol === col.key ? "cursor-grabbing" : ""}
-                        ${col.pinned ? `pinned pinned-${col.pinned}` : ""}
-                        `,
+    ${col.pinned ? `pinned pinned-${col.pinned}` : ""}
+  `,
                               style,
-                              children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
-                                "div",
-                                {
-                                  className: `d-flex align-items-center justify-content-${col.align ?? "between"} px-1 rounded ${col.pinned ? "z-6" : ""}`,
-                                  children: [
-                                    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+                              children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "d-flex align-items-center w-100 px-1", children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                                  "div",
+                                  {
+                                    className: `flex-grow-1 d-flex align-items-center
+        ${col.align === "center" ? "justify-content-center" : ""}
+        ${col.align === "end" ? "justify-content-end" : ""}
+        ${!col.align || col.align === "start" ? "justify-content-start" : ""}
+      `,
+                                    children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
                                       "div",
                                       {
                                         onClick: () => col.sortable && changeSort(String(col.key)),
@@ -1560,31 +1606,23 @@ var PamGrid = ({
                                           sortBy.key === col.key && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                                             "i",
                                             {
-                                              className: `bx bx-sm ${sortBy.dir === "asc" ? "bxs-chevron-up" : "bxs-chevron-down"} cursor-pointer`
+                                              className: `bx bx-sm ${sortBy.dir === "asc" ? "bxs-chevron-up" : "bxs-chevron-down"}`
                                             }
-                                          ),
-                                          col.pinned === col.key && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("i", { className: "bx bx-x cursor-pointer" })
+                                          )
                                         ]
                                       }
-                                    ),
-                                    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-                                      "i",
-                                      {
-                                        className: "bx bx-move-horizontal text-white cursor-resize",
-                                        onMouseDown: (e) => onResizeMouseDown(e, col.key)
-                                      }
-                                    ),
-                                    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "d-flex align-items-center gap-1", children: features.pinning && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-                                      PamHeaderOption_default,
-                                      {
-                                        currentColumn: col,
-                                        gridFetaures: features,
-                                        grid
-                                      }
-                                    ) })
-                                  ]
-                                }
-                              )
+                                    )
+                                  }
+                                ),
+                                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "d-flex align-items-center gap-1 flex-shrink-0", children: features.pinning && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                                  PamHeaderOption_default,
+                                  {
+                                    currentColumn: col,
+                                    gridFetaures: features,
+                                    grid
+                                  }
+                                ) })
+                              ] })
                             },
                             String(col.key)
                           );
@@ -1592,7 +1630,7 @@ var PamGrid = ({
                         features.actions && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                           "th",
                           {
-                            className: "text-center sticky-action-column vs-th bg-white fw-semibold th-lastChild",
+                            className: "text-center sticky-action-column vs-th bg-white  th-lastChild",
                             style: { position: "sticky", right: 0, zIndex: 10 },
                             children: "Action"
                           }
@@ -1630,7 +1668,7 @@ var PamGrid = ({
                         className: "text-start pinned pinned-left tr-group",
                         children: [
                           /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("strong", { children: g.displayLabel }),
-                          features.aggregation && Object.keys(g.aggregates).length > 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("small", { className: "ms-3 text-muted  ", children: Object.entries(g.aggregates).map(([k, v]) => `${k}: ${v}`).join("  |  ") })
+                          features.aggregation && Object.keys(g.aggregates).length > 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("small", { className: "ms-3 text-secondary text-capitalize ", children: Object.entries(g.aggregates).map(([k, v]) => `${k}: ${v}`).join("  |  ") })
                         ]
                       }
                     ) }),
@@ -1751,34 +1789,58 @@ var PamGrid = ({
               width: "1%",
               whiteSpace: "nowrap"
             },
-            children: isDropdown ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "text-center ", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(TableAction, { gridFetaures: features, row }) }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            children: isDropdown ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "text-center", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(TableAction, { gridFetaures: features, row }) }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
               "div",
               {
                 className: "d-inline-flex justify-content-center align-items-center gap-2",
                 style: { minWidth: "fit-content", padding: "0 4px" },
                 children: Array.isArray(features.actions) ? features.actions.filter((act) => {
-                  if (typeof act.isVisible === "function") {
-                    return act.isVisible(row);
-                  }
-                  if (typeof act.isVisible === "boolean") {
-                    return act.isVisible;
-                  }
-                  return true;
-                }).map((act, i) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-                  "i",
-                  {
-                    title: act.label,
-                    onClick: (e) => {
-                      e.stopPropagation();
-                      act.onClick && act.onClick(row);
+                  const visible = resolveValue(
+                    act.isVisible ?? true,
+                    row
+                  );
+                  return visible;
+                }).map((act, i) => {
+                  const label = resolveValue(act.label, row);
+                  const icon = resolveValue(act.icon, row);
+                  const className = resolveValue(act.className, row);
+                  const disabled = resolveValue(
+                    act.disabled ?? false,
+                    row
+                  );
+                  return act.onlyIcon ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                    "i",
+                    {
+                      title: label,
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        if (!disabled) act.onClick?.(row);
+                      },
+                      className: `${icon} ${disabled ? "opacity-50" : ""}`,
+                      style: {
+                        cursor: disabled ? "not-allowed" : "pointer"
+                      },
+                      onMouseMove: (e) => typeof label === "string" && showTooltip(label, e.clientX, e.clientY),
+                      onMouseLeave: hideTooltip
+                    },
+                    i
+                  ) : /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+                    "button",
+                    {
+                      className,
+                      disabled,
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        if (!disabled) act.onClick?.(row);
+                      },
+                      children: [
+                        icon && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("i", { className: `${icon} me-1` }),
+                        label
+                      ]
                     },
-                    className: `${act.icon}`,
-                    onMouseEnter: (e) => showTooltip(act.label, e.clientX, e.clientY),
-                    onMouseMove: (e) => showTooltip(act.label, e.clientX, e.clientY),
-                    onMouseLeave: hideTooltip
-                  },
-                  i
-                )) : typeof features.actions === "function" ? features.actions(row, toggleExpand) : null
+                    i
+                  );
+                }) : typeof features.actions === "function" ? features.actions(row, toggleExpand) : null
               }
             )
           }