baaz-custom-components 5.0.20 → 5.0.22

package/dist/index.css

@@ -675,9 +675,6 @@
   .touch-none {
     touch-action: none;
   }
-  .resize {
-    resize: both;
-  }
   .scroll-my-1 {
     scroll-margin-block: calc(var(--spacing) * 1);
   }

package/dist/index.d.mts

@@ -92,13 +92,10 @@ type GridProps = {
     fonts?: boolean;
     autoConfig?: boolean | {};
     downloadable?: boolean;
-    fileNmae?: string;
+    fileName?: string;
     search: boolean;
     searchkey: string;
     searchValue: string;
-    autoResize?: boolean;
-    autoResizeMode?: boolean | "data" | "header" | undefined;
-    defaultMinWidth?: number;
     onExportPdf?: () => void;
     onExportExcel?: () => void;
     onSearch: (e: React.ChangeEvent<HTMLInputElement>) => void;
@@ -114,7 +111,18 @@ type ActiveFilter = {
     endDate?: string | null;
 };
 
-declare function Grid({ data, columns, sortKey, sortOrder, onSortChange, onExportPdf, onExportExcel, downloadable, autoResize, autoResizeMode, defaultMinWidth, fileNmae, fonts, onFilterChange, ...rest }: GridProps): react.JSX.Element;
+declare const Grid: react.ForwardRefExoticComponent<GridProps & react.RefAttributes<IApi | null>>;
+
+type Props = {
+    cell: {
+        id?: string;
+        text?: string;
+    };
+    sortKey?: string | null;
+    sortOrder?: SortOrder | null;
+    onSortChange?: (key: string, order: SortOrder) => void;
+};
+declare function SortableHeaderCell({ cell, sortKey, sortOrder, onSortChange }: Props): react.JSX.Element;
 
 type Pagination$1 = {
     totalCount: number;
@@ -130,4 +138,4 @@ type Pagination$1 = {
 
 declare function Pagination({ totalCount, count, currentPage, totalPages, pageSize, onPageChange, onPageSizeChange, showSizeChanger, sizeChangerOptions, }: Pagination$1): react.JSX.Element | null;
 
-export { type BreadcrumbProps, CustomBreadcrumb, Grid, type GridProps, Navbar, type NavbarData, type NavbarEntry, type NavbarProps, type NotificationDataTypes, Pagination, type Pagination$1 as PaginationProps, type RouteTree, type RouterAdapter, type UserData };
+export { type BreadcrumbProps, CustomBreadcrumb, Grid, type GridProps, Navbar, type NavbarData, type NavbarEntry, type NavbarProps, type NotificationDataTypes, Pagination, type Pagination$1 as PaginationProps, type RouteTree, type RouterAdapter, SortableHeaderCell, type UserData };

package/dist/index.d.ts

@@ -92,13 +92,10 @@ type GridProps = {
     fonts?: boolean;
     autoConfig?: boolean | {};
     downloadable?: boolean;
-    fileNmae?: string;
+    fileName?: string;
     search: boolean;
     searchkey: string;
     searchValue: string;
-    autoResize?: boolean;
-    autoResizeMode?: boolean | "data" | "header" | undefined;
-    defaultMinWidth?: number;
     onExportPdf?: () => void;
     onExportExcel?: () => void;
     onSearch: (e: React.ChangeEvent<HTMLInputElement>) => void;
@@ -114,7 +111,18 @@ type ActiveFilter = {
     endDate?: string | null;
 };
 
-declare function Grid({ data, columns, sortKey, sortOrder, onSortChange, onExportPdf, onExportExcel, downloadable, autoResize, autoResizeMode, defaultMinWidth, fileNmae, fonts, onFilterChange, ...rest }: GridProps): react.JSX.Element;
+declare const Grid: react.ForwardRefExoticComponent<GridProps & react.RefAttributes<IApi | null>>;
+
+type Props = {
+    cell: {
+        id?: string;
+        text?: string;
+    };
+    sortKey?: string | null;
+    sortOrder?: SortOrder | null;
+    onSortChange?: (key: string, order: SortOrder) => void;
+};
+declare function SortableHeaderCell({ cell, sortKey, sortOrder, onSortChange }: Props): react.JSX.Element;
 
 type Pagination$1 = {
     totalCount: number;
@@ -130,4 +138,4 @@ type Pagination$1 = {
 
 declare function Pagination({ totalCount, count, currentPage, totalPages, pageSize, onPageChange, onPageSizeChange, showSizeChanger, sizeChangerOptions, }: Pagination$1): react.JSX.Element | null;
 
-export { type BreadcrumbProps, CustomBreadcrumb, Grid, type GridProps, Navbar, type NavbarData, type NavbarEntry, type NavbarProps, type NotificationDataTypes, Pagination, type Pagination$1 as PaginationProps, type RouteTree, type RouterAdapter, type UserData };
+export { type BreadcrumbProps, CustomBreadcrumb, Grid, type GridProps, Navbar, type NavbarData, type NavbarEntry, type NavbarProps, type NotificationDataTypes, Pagination, type Pagination$1 as PaginationProps, type RouteTree, type RouterAdapter, SortableHeaderCell, type UserData };

package/dist/index.js

@@ -62,7 +62,8 @@ __export(index_exports, {
   CustomBreadcrumb: () => breadcrumb_default,
   Grid: () => grid_default,
   Navbar: () => Navbar,
-  Pagination: () => pagination_default
+  Pagination: () => pagination_default,
+  SortableHeaderCell: () => sortableHeaderCell_default
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -1948,39 +1949,6 @@ var breadcrumb_default = CustomBreadcrumb;
 var import_react6 = require("react");
 var import_react_grid = require("@svar-ui/react-grid");
 
-// src/components/custom/grid/sortableHeaderCell.tsx
-var import_lucide_react12 = require("lucide-react");
-var import_jsx_runtime23 = require("react/jsx-runtime");
-function SortableHeaderCell({ cell, sortKey, sortOrder, onSortChange }) {
-  if (!(cell == null ? void 0 : cell.id)) return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { children: cell == null ? void 0 : cell.text });
-  const active = sortKey === cell.id;
-  const handleClick = () => {
-    if (!onSortChange || !cell.id) return;
-    if (!active) {
-      onSortChange(cell.id, "asc");
-      return;
-    }
-    if (sortOrder === "asc") {
-      onSortChange(cell.id, "desc");
-      return;
-    }
-    onSortChange("", null);
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
-    "div",
-    {
-      onClick: handleClick,
-      className: "cursor-pointer flex items-center gap-2 justify-between select-none",
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { children: cell.text }),
-        !active && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react12.ArrowUpDown, { className: "w-4 h-4 opacity-50" }),
-        active && (sortOrder === "asc" ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react12.MoveDown, { className: "w-4 h-4" }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react12.MoveUp, { className: "w-4 h-4" }))
-      ]
-    }
-  );
-}
-var sortableHeaderCell_default = SortableHeaderCell;
-
 // src/utils/exportPdf.ts
 var import_jspdf = __toESM(require("jspdf"));
 var import_jspdf_autotable = __toESM(require("jspdf-autotable"));
@@ -2013,12 +1981,13 @@ function exportExcel(rows, name) {
 
 // src/components/custom/grid/gridHeader.tsx
 var import_react5 = require("react");
-var import_lucide_react13 = require("lucide-react");
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_lucide_react12 = require("lucide-react");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 var GridHeader = ({
   onPdf,
   onExcel,
-  onSearch,
+  onSearch = () => {
+  },
   download,
   search,
   searchValue,
@@ -2032,9 +2001,7 @@ var GridHeader = ({
   const [filter, setFilter] = (0, import_react5.useState)({});
   const downloadRef = (0, import_react5.useRef)(null);
   const filterRef = (0, import_react5.useRef)(null);
-  const selectedColumn = filterList.find(
-    (f) => f.columnName === filter.column
-  );
+  const selectedColumn = filterList.find((f) => f.columnName === filter.column);
   const selectedOperator = selectedColumn == null ? void 0 : selectedColumn.operators.find(
     (op) => op.label === filter.operator
   );
@@ -2059,26 +2026,26 @@ var GridHeader = ({
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex justify-end gap-4 items-center", children: [
-    filterList.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "relative", ref: filterRef, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex justify-end gap-4 items-center", children: [
+    filterList.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "relative", ref: filterRef, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
         "button",
         {
           onClick: () => setFilterMenu((p) => !p),
           className: "py-2 px-4 rounded-md bg-input hover:bg-muted transition cursor-pointer",
-          children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react13.ListFilter, { size: 18 })
+          children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react12.ListFilter, { size: 18 })
         }
       ),
-      filterMenu && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "absolute top-full right-0 mt-2 p-3 rounded-md border bg-background shadow-lg z-50 flex items-center gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      filterMenu && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "absolute top-full right-0 mt-2 p-3 rounded-md border bg-background shadow-lg z-50 flex items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
           "button",
           {
             onClick: clearFilters,
             className: "mr-auto p-2 rounded-md hover:bg-destructive bg-destructive/40 transition cursor-pointer",
-            children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react13.X, { size: 16 })
+            children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react12.X, { size: 16 })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
           "select",
           {
             value: (_a = filter.column) != null ? _a : "",
@@ -2089,12 +2056,12 @@ var GridHeader = ({
             }),
             className: "px-4 py-2 rounded-md bg-input text-sm",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("option", { value: "", disabled: true, children: "Columns" }),
-              filterList.map((f) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("option", { value: f.columnName, children: f.columnName }, f.columnName))
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("option", { value: "", disabled: true, children: "Columns" }),
+              filterList.map((f) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("option", { value: f.columnName, children: f.columnName }, f.columnName))
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
           "select",
           {
             value: (_b = filter.operator) != null ? _b : "",
@@ -2105,12 +2072,12 @@ var GridHeader = ({
             }),
             className: "px-4 py-2 rounded-md bg-input text-sm",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("option", { value: "", disabled: true, children: "Operator" }),
-              selectedColumn == null ? void 0 : selectedColumn.operators.map((op) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("option", { value: op.label, children: op.label }, op.label))
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("option", { value: "", disabled: true, children: "Operator" }),
+              selectedColumn == null ? void 0 : selectedColumn.operators.map((op) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("option", { value: op.label, children: op.label }, op.label))
             ]
           }
         ),
-        (selectedOperator == null ? void 0 : selectedOperator.value) === "input" && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        (selectedOperator == null ? void 0 : selectedOperator.value) === "input" && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
           "input",
           {
             placeholder: "Filter value",
@@ -2119,31 +2086,31 @@ var GridHeader = ({
             className: "px-4 py-2 rounded-md bg-input text-sm"
           }
         ),
-        (selectedOperator == null ? void 0 : selectedOperator.value) === "select" && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+        (selectedOperator == null ? void 0 : selectedOperator.value) === "select" && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
           "select",
           {
             value: (_d = filter.value) != null ? _d : "",
             onChange: (e) => updateFilter({ value: e.target.value }),
             className: "px-4 py-2 rounded-md bg-input text-sm",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("option", { value: "", disabled: true, children: "Value" }),
-              (_e = selectedOperator.options) == null ? void 0 : _e.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("option", { value: opt.value, children: opt.label }, opt.value))
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("option", { value: "", disabled: true, children: "Value" }),
+              (_e = selectedOperator.options) == null ? void 0 : _e.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("option", { value: opt.value, children: opt.label }, opt.value))
             ]
           }
         )
       ] })
     ] }),
-    download && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "relative", ref: downloadRef, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    download && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "relative", ref: downloadRef, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
         "button",
         {
           onClick: () => setDownloadMenu((p) => !p),
           className: "py-2 px-4 rounded-md bg-input hover:bg-muted transition",
-          children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react13.Download, { size: 18 })
+          children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react12.Download, { size: 18 })
         }
       ),
-      downloadMenu && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "absolute top-full right-0 mt-2 w-32 rounded-md border bg-background shadow-lg z-50", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+      downloadMenu && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "absolute top-full right-0 mt-2 w-32 rounded-md border bg-background shadow-lg z-50", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
           "button",
           {
             onClick: () => {
@@ -2152,12 +2119,12 @@ var GridHeader = ({
             },
             className: "flex items-center gap-2 w-full px-3 py-2 text-sm hover:bg-muted",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react13.FileText, { size: 14 }),
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react12.FileText, { size: 14 }),
               "PDF"
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
           "button",
           {
             onClick: () => {
@@ -2166,16 +2133,16 @@ var GridHeader = ({
             },
             className: "flex items-center gap-2 w-full px-3 py-2 text-sm hover:bg-muted",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react13.FileSpreadsheet, { size: 14 }),
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react12.FileSpreadsheet, { size: 14 }),
               "Excel"
             ]
           }
         )
       ] })
     ] }),
-    search && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "py-2 px-4 w-[20rem] rounded-md border border-input bg-background flex items-center gap-2 text-sm", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react13.Search, { className: "w-4 h-4" }),
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    search && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "py-2 px-4 w-[20rem] rounded-md border border-input bg-background flex items-center gap-2 text-sm", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react12.Search, { className: "w-4 h-4" }),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
         "input",
         {
           placeholder: `Search by ${searchkey}`,
@@ -2190,139 +2157,135 @@ var GridHeader = ({
 var gridHeader_default = GridHeader;
 
 // src/components/custom/grid/index.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
-function Grid(_a) {
-  var _b = _a, {
-    data,
-    columns,
-    sortKey,
-    sortOrder,
-    onSortChange,
-    onExportPdf,
-    onExportExcel,
-    downloadable = true,
-    autoResize = true,
-    autoResizeMode = true,
-    defaultMinWidth = 120,
-    fileNmae,
-    fonts,
-    onFilterChange
-  } = _b, rest = __objRest(_b, [
-    "data",
-    "columns",
-    "sortKey",
-    "sortOrder",
-    "onSortChange",
-    "onExportPdf",
-    "onExportExcel",
-    "downloadable",
-    "autoResize",
-    "autoResizeMode",
-    "defaultMinWidth",
-    "fileNmae",
-    "fonts",
-    "onFilterChange"
-  ]);
-  const apiRef = (0, import_react6.useRef)(null);
-  const svarColumns = columns.map((col) => {
-    const _a2 = col, { sortable, header } = _a2, columnProps = __objRest(_a2, ["sortable", "header"]);
-    if (!sortable) {
-      return __spreadProps(__spreadValues({}, columnProps), {
-        header
-      });
-    }
-    return __spreadProps(__spreadValues({}, columnProps), {
-      header: {
-        text: header,
-        cell: (props) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-          sortableHeaderCell_default,
-          __spreadProps(__spreadValues({}, props), {
-            sortKey,
-            sortOrder,
-            onSortChange
-          })
-        )
-      }
-    });
-  });
-  const init = (api) => {
-    var _a2;
-    apiRef.current = api;
-    (_a2 = rest.onApiReady) == null ? void 0 : _a2.call(rest, api);
-  };
-  (0, import_react6.useEffect)(() => {
-    if (!apiRef.current || !columns.length || !autoResize) return;
-    const resize = () => {
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var Grid = (0, import_react6.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, {
+      data,
+      columns,
+      sortKey,
+      sortOrder,
+      onSortChange,
+      onExportPdf,
+      onExportExcel,
+      downloadable = true,
+      fileName,
+      fonts,
+      onFilterChange
+    } = _b, rest = __objRest(_b, [
+      "data",
+      "columns",
+      "sortKey",
+      "sortOrder",
+      "onSortChange",
+      "onExportPdf",
+      "onExportExcel",
+      "downloadable",
+      "fileName",
+      "fonts",
+      "onFilterChange"
+    ]);
+    const apiRef = (0, import_react6.useRef)(null);
+    (0, import_react6.useImperativeHandle)(ref, () => apiRef.current, []);
+    const resizeColumns = (0, import_react6.useCallback)(() => {
+      const api = apiRef.current;
+      if (!api) return;
       columns.forEach((col) => {
-        var _a2, _b2;
-        if (!(col == null ? void 0 : col.width)) {
-          (_a2 = apiRef.current) == null ? void 0 : _a2.exec("resize-column", {
-            id: col.id,
-            auto: autoResizeMode
-          });
-        }
-        if (defaultMinWidth) {
-          (_b2 = apiRef.current) == null ? void 0 : _b2.exec("update-column", {
-            id: col.id,
-            minWidth: defaultMinWidth
-          });
-        }
+        api.exec("resize-column", {
+          id: col.id,
+          auto: "data"
+        });
       });
-    };
-    const run = async () => {
-      var _a2;
-      if ((_a2 = document == null ? void 0 : document.fonts) == null ? void 0 : _a2.ready) {
-        await document.fonts.ready;
-      }
-      requestAnimationFrame(() => {
-        requestAnimationFrame(resize);
+    }, [columns, data]);
+    const init = (0, import_react6.useCallback)((api) => {
+      apiRef.current = api;
+      resizeColumns();
+    }, [resizeColumns]);
+    const getSelectedData = () => {
+      var _a2, _b2;
+      const selected = (_b2 = (_a2 = apiRef.current) == null ? void 0 : _a2.getState().selectedRows) != null ? _b2 : [];
+      let selectedData = data.filter((row) => {
+        return selected.includes(row.id);
       });
+      return selectedData;
     };
-    run();
-  }, [columns, data, autoResize, autoResizeMode, defaultMinWidth]);
-  const getSelectedData = () => {
-    var _a2, _b2;
-    const selected = (_b2 = (_a2 = apiRef.current) == null ? void 0 : _a2.getState().selectedRows) != null ? _b2 : [];
-    let selectedData = data.filter((row) => {
-      return selected.includes(row.id);
-    });
-    return selectedData;
-  };
-  const handleExportPdf = () => {
-    const selected = getSelectedData();
-    if (selected.length) {
-      exportPdf(selected, fileNmae);
-    } else {
-      onExportPdf == null ? void 0 : onExportPdf();
+    const handleExportPdf = (0, import_react6.useCallback)(() => {
+      const selected = getSelectedData();
+      if (selected.length) {
+        exportPdf(selected, fileName);
+      } else {
+        onExportPdf == null ? void 0 : onExportPdf();
+      }
+    }, [getSelectedData, exportPdf, onExportPdf, fileName]);
+    const handleExportExcel = (0, import_react6.useCallback)(() => {
+      const selected = getSelectedData();
+      if (selected.length) {
+        exportExcel(selected, fileName);
+      } else {
+        onExportExcel == null ? void 0 : onExportExcel();
+      }
+    }, [getSelectedData, exportExcel, onExportExcel, fileName]);
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "w-full flex flex-col gap-4 overflow-hidden", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        gridHeader_default,
+        {
+          onPdf: handleExportPdf,
+          onExcel: handleExportExcel,
+          download: downloadable,
+          search: rest.search,
+          searchkey: rest.searchkey,
+          onSearch: rest.onSearch,
+          searchValue: rest.searchValue,
+          filterList: rest.filterList,
+          onFilterChange
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "w-full overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react_grid.WillowDark, { fonts, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "w-grid h-full overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        import_react_grid.Grid,
+        __spreadProps(__spreadValues({}, rest), {
+          data,
+          columns,
+          init,
+          onUpdateCell: () => resizeColumns()
+        })
+      ) }) }) })
+    ] });
+  }
+);
+var grid_default = Grid;
+
+// src/components/custom/grid/sortableHeaderCell.tsx
+var import_lucide_react13 = require("lucide-react");
+var import_jsx_runtime25 = require("react/jsx-runtime");
+function SortableHeaderCell({ cell, sortKey, sortOrder, onSortChange }) {
+  if (!(cell == null ? void 0 : cell.id)) return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { children: cell == null ? void 0 : cell.text });
+  const active = sortKey === cell.id;
+  const handleClick = () => {
+    if (!onSortChange || !cell.id) return;
+    if (!active) {
+      onSortChange(cell.id, "asc");
+      return;
     }
-  };
-  const handleExportExcel = () => {
-    const selected = getSelectedData();
-    if (selected.length) {
-      exportExcel(selected, fileNmae);
-    } else {
-      onExportExcel == null ? void 0 : onExportExcel();
+    if (sortOrder === "asc") {
+      onSortChange(cell.id, "desc");
+      return;
     }
+    onSortChange("", null);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "w-full flex flex-col gap-4 overflow-hidden", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-      gridHeader_default,
-      {
-        onPdf: handleExportPdf,
-        onExcel: handleExportExcel,
-        download: downloadable,
-        search: rest.search,
-        searchkey: rest.searchkey,
-        onSearch: rest.onSearch,
-        searchValue: rest.searchValue,
-        filterList: rest.filterList,
-        onFilterChange
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "w-full overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_grid.WillowDark, { fonts, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "w-grid h-full overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_grid.Grid, __spreadProps(__spreadValues({}, rest), { data, columns: svarColumns, init })) }) }) })
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+    "div",
+    {
+      onClick: handleClick,
+      className: "cursor-pointer flex items-center gap-2 justify-between select-none",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { children: cell.text }),
+        !active && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react13.ArrowUpDown, { className: "w-4 h-4 opacity-50" }),
+        active && (sortOrder === "asc" ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react13.MoveDown, { className: "w-4 h-4" }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react13.MoveUp, { className: "w-4 h-4" }))
+      ]
+    }
+  );
 }
-var grid_default = Grid;
+var sortableHeaderCell_default = SortableHeaderCell;
 
 // src/utils/pagination.ts
 function getPaginationRange(currentPage, totalPages, siblingCount = 2) {
@@ -2445,5 +2408,6 @@ var pagination_default = Pagination;
   CustomBreadcrumb,
   Grid,
   Navbar,
-  Pagination
+  Pagination,
+  SortableHeaderCell
 });