pam-grid 1.1.1 → 1.3.0

package/dist/index.d.mts

@@ -125,6 +125,8 @@ declare function useGridCore<T extends Record<string, any>>({ data, columns, ser
     setPageSize: react.Dispatch<react.SetStateAction<number>>;
     totalRows: number;
     totalPages: number;
+    totalRecord: number;
+    setTotalRecord: react.Dispatch<react.SetStateAction<number>>;
     search: string;
     setSearch: react.Dispatch<react.SetStateAction<string>>;
     debouncedSearch: string;
@@ -256,8 +258,9 @@ type PamDropdownProps = {
     disabled?: boolean;
     closeOnItemClick?: boolean;
     className?: string;
+    title?: string;
 };
-declare function PamDropdown({ trigger, items, placement, offset, disabled, closeOnItemClick, className, }: PamDropdownProps): react_jsx_runtime.JSX.Element;
+declare function PamDropdown({ trigger, items, title, placement, offset, disabled, closeOnItemClick, className, }: PamDropdownProps): react_jsx_runtime.JSX.Element;
 
 declare function getAdvancedFilterType<T extends object>(column: GridColumn<T>): AdvancedFilterType | null;
 declare function getLeftOffset<T extends object>(colState: GridColumn<T>[], key: GridColumn<T>["key"]): number;

package/dist/index.d.ts

@@ -125,6 +125,8 @@ declare function useGridCore<T extends Record<string, any>>({ data, columns, ser
     setPageSize: react.Dispatch<react.SetStateAction<number>>;
     totalRows: number;
     totalPages: number;
+    totalRecord: number;
+    setTotalRecord: react.Dispatch<react.SetStateAction<number>>;
     search: string;
     setSearch: react.Dispatch<react.SetStateAction<string>>;
     debouncedSearch: string;
@@ -256,8 +258,9 @@ type PamDropdownProps = {
     disabled?: boolean;
     closeOnItemClick?: boolean;
     className?: string;
+    title?: string;
 };
-declare function PamDropdown({ trigger, items, placement, offset, disabled, closeOnItemClick, className, }: PamDropdownProps): react_jsx_runtime.JSX.Element;
+declare function PamDropdown({ trigger, items, title, placement, offset, disabled, closeOnItemClick, className, }: PamDropdownProps): react_jsx_runtime.JSX.Element;
 
 declare function getAdvancedFilterType<T extends object>(column: GridColumn<T>): AdvancedFilterType | null;
 declare function getLeftOffset<T extends object>(colState: GridColumn<T>[], key: GridColumn<T>["key"]): number;

package/dist/index.js

@@ -55,6 +55,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
 function PamDropdown({
   trigger,
   items,
+  title,
   placement = "bottom-start",
   offset = 6,
   disabled = false,
@@ -156,7 +157,7 @@ function PamDropdown({
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { ref: triggerRef, className: `pam-dropdown-trigger ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { onClick: toggle, style: { display: "inline-flex" }, children: trigger }) }),
     open && (0, import_react_dom.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
         "div",
         {
           ref: menuRef,
@@ -165,17 +166,20 @@ function PamDropdown({
             top: pos.top,
             left: pos.left
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            PamDropdownList,
-            {
-              items,
-              closeOnItemClick,
-              onClose: close,
-              openSubKeys,
-              setOpenSubKeys,
-              level: 0
-            }
-          )
+          children: [
+            title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "pam-dropdown-title", children: title }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "pam-list-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              PamDropdownList,
+              {
+                items,
+                closeOnItemClick,
+                onClose: close,
+                openSubKeys,
+                setOpenSubKeys,
+                level: 0
+              }
+            ) })
+          ]
         }
       ),
       portalRoot
@@ -611,62 +615,71 @@ var FacetFilter = ({
   if (facetLoading?.[columnKey]) {
     return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "p-3 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "text-secondary", children: "Loading..." }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "pam-grid-facet-filter", style: { width: 240 }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "mb-2", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      "input",
-      {
-        type: "search",
-        className: "form-control form-control-sm",
-        placeholder: "Search...",
-        value: search,
-        onChange: (e) => setSearch(e.target.value)
-      }
-    ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-      "div",
-      {
-        className: "list-group list-group-flush text-truncate",
-        style: {
-          maxHeight: 220,
-          overflowY: "auto"
-        },
-        children: [
-          filteredItems.map((item) => {
-            const checked = selected.some((s) => s.id === item.id);
-            return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-              "label",
-              {
-                className: "list-group-item list-group-item-action d-flex align-items-center gap-2 py-2",
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                    "input",
-                    {
-                      type: "checkbox",
-                      className: "form-check-input mt-0",
-                      checked,
-                      onChange: () => toggleFacetFilter(columnKey, item)
-                    }
-                  ),
-                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "flex-grow-1", children: item.name }),
-                  checked && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("i", { className: "bx bx-check text-primary" })
-                ]
-              },
-              item.id
-            );
-          }),
-          !filteredItems.length && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "text-center text-muted py-3 small", children: "No results" })
-        ]
-      }
-    ),
-    selected.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "pt-2 border-top mt-2 d-flex justify-content-end", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      "button",
-      {
-        className: "btn btn-sm btn-label-secondary",
-        onClick: clearFacetFilters,
-        children: "Clear"
-      }
-    ) })
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "div",
+    {
+      className: "pam-grid-facet-filter",
+      style: { width: 240 },
+      onClick: (e) => e.stopPropagation(),
+      onMouseDown: (e) => e.stopPropagation(),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "mb-2", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "input",
+          {
+            type: "search",
+            className: "form-control form-control-sm",
+            placeholder: "Search...",
+            value: search,
+            onChange: (e) => setSearch(e.target.value)
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+          "div",
+          {
+            className: "list-group list-group-flush text-truncate",
+            style: {
+              maxHeight: 220,
+              overflowY: "auto"
+            },
+            children: [
+              filteredItems.map((item) => {
+                const checked = selected.some((s) => s.id === item.id);
+                return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                  "label",
+                  {
+                    className: "list-group-item list-group-item-action d-flex align-items-center gap-2 py-2",
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                        "input",
+                        {
+                          type: "checkbox",
+                          className: "form-check-input mt-0",
+                          checked,
+                          onChange: () => toggleFacetFilter(columnKey, item)
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "flex-grow-1", children: item.name }),
+                      checked && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("i", { className: "bx bx-check text-primary" })
+                    ]
+                  },
+                  item.id
+                );
+              }),
+              !filteredItems.length && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "text-center text-muted py-3 small", children: "No results" })
+            ]
+          }
+        ),
+        selected.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "pt-2 border-top mt-2 d-flex justify-content-end", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "button",
+          {
+            className: "btn btn-sm btn-label-secondary",
+            onClick: clearFacetFilters,
+            children: "Clear"
+          }
+        ) })
+      ]
+    }
+  );
 };
 var FacetFilter_default = FacetFilter;
 
@@ -1385,6 +1398,7 @@ var PamGrid = ({
     rows,
     page,
     totalPages,
+    totalRecord,
     pageSize,
     setPage,
     setPageSize,
@@ -1409,7 +1423,12 @@ var PamGrid = ({
     addNewRecord,
     advanceFilters,
     setColumnAdvanceFilter
-  } = grid ?? safeGridHandle;
+  } = grid || safeGridHandle;
+  (0, import_react5.useEffect)(() => {
+    return () => {
+      hideTooltip();
+    };
+  }, []);
   const onResizeMouseDown = (e, key, side = "right") => {
     e.preventDefault();
     const startX = e.clientX;
@@ -1745,20 +1764,32 @@ var PamGrid = ({
         ),
         features.pagination && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "d-flex justify-content-between align-items-center mt-2", children: [
           /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "d-flex flex-row align-items-center gap-2", children: [
-            features.pageSizeSelector && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-              "select",
-              {
-                className: "form-select form-select-sm",
-                style: { width: "80px" },
-                value: pageSize,
-                onChange: (e) => setPageSize(Number(e.target.value)),
-                children: [20, 50, 100].map((n) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("option", { value: n, children: n }, n))
-              }
-            ),
-            " ",
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("small", { children: [
-              rows.length,
-              " Record"
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("small", { className: "text-secondary", children: [
+              "Showing ",
+              rows.length === 0 ? 0 : (page - 1) * pageSize + 1,
+              " - ",
+              (page - 1) * pageSize + rows.length,
+              " of ",
+              totalRecord
+            ] }),
+            features.pageSizeSelector && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "d-flex align-items-center gap-2 ms-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                PamDropdown,
+                {
+                  placement: "top-start",
+                  trigger: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("button", { className: "btn btn-sm border bg-white d-flex align-items-center gap-1", children: [
+                    pageSize,
+                    " ",
+                    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("i", { className: "bx bx-chevron-down text-muted" })
+                  ] }),
+                  items: [20, 50, 100].map((n) => ({
+                    key: String(n),
+                    label: String(n),
+                    onClick: () => setPageSize(n)
+                  }))
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("small", { className: "text-secondary", children: "per page" })
             ] })
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
@@ -2076,6 +2107,7 @@ function useGridCore({
 }) {
   const [page, setPage] = (0, import_react6.useState)(1);
   const [pageSize, setPageSize] = (0, import_react6.useState)(initialPageSize);
+  const [totalRecord, setTotalRecord] = (0, import_react6.useState)(0);
   const [search, setSearch] = (0, import_react6.useState)("");
   const [debouncedSearch, setDebouncedSearch] = (0, import_react6.useState)("");
   const [groupBy, setGroupBy] = (0, import_react6.useState)(null);
@@ -2394,6 +2426,8 @@ function useGridCore({
     setPageSize,
     totalRows,
     totalPages,
+    totalRecord,
+    setTotalRecord,
     // search
     search,
     setSearch,