@megha-ui/react 1.2.757 → 1.2.759

package/dist/components/grid/index.js

@@ -1503,7 +1503,7 @@ withCard = false, cardClassName, cardHeader, title, headerLeft, headerRight, sub
                     whiteSpace: "nowrap",
                     height: `calc(100% - ${removalHeight})`,
                     position: "relative",
-                }, onScroll: onScroll, ref: gridRef, children: [_jsx(GridHeader, { columns: gridColumns, headerRef: headerRef, resizable: resizable, sortable: sortable, search: search, defaultSearchOperation: defaultSearchOperation, showMenu: showMenu, sortQueries: sortQueries, onSort: handleSort, bulkSelect: bulkSelect, cellStyle: cellStyle, widthMode: widthMode, allRowsSelected: allRowsSelected, someRowsSelected: someRowsSelected, toggleSelectAll: () => toggleSelectAll(paginate ? paginatedData : sortedData, allRowsSelected), onSearch: handleSearch, searchQueries: searchQueries, headerBackground: headerBackground, headerTopBorder: headerTopBorder, headerBottomBorder: headerBottomBorder, groupBy: gridGroupBy, setGroupBy: (value) => {
+                }, onScroll: onScroll, ref: gridRef, children: [_jsx(GridHeader, { columns: gridColumns, headerRef: headerRef, resizable: resizable, sortable: sortable, search: search, combinedColumns: combinedColumns, defaultSearchOperation: defaultSearchOperation, showMenu: showMenu, sortQueries: sortQueries, onSort: handleSort, bulkSelect: bulkSelect, cellStyle: cellStyle, widthMode: widthMode, allRowsSelected: allRowsSelected, someRowsSelected: someRowsSelected, toggleSelectAll: () => toggleSelectAll(paginate ? paginatedData : sortedData, allRowsSelected), onSearch: handleSearch, searchQueries: searchQueries, headerBackground: headerBackground, headerTopBorder: headerTopBorder, headerBottomBorder: headerBottomBorder, groupBy: gridGroupBy, setGroupBy: (value) => {
                             let _gridGroupBy = gridGroupBy;
                             _gridGroupBy = _gridGroupBy.split(",").includes(value)
                                 ? _gridGroupBy

package/dist/components/grid/utils/gridHeader.d.ts

@@ -54,7 +54,20 @@ interface GridHeaderProps {
     columnSearchOutside: boolean;
     locale?: string;
     formatOptions?: any;
+    combinedColumns?: {
+        name: string;
+        key: string;
+        separator: string;
+        columns: string[];
+        sortOn: string[];
+    }[];
 }
-export declare const getColumnData: (columnKey: string, gridData: DataRow[], type: string) => (string | number)[];
+export declare const getColumnData: (columnKey: string, gridData: DataRow[], type: string, combinedColumns: {
+    name: string;
+    key: string;
+    separator: string;
+    columns: string[];
+    sortOn: string[];
+}[]) => (string | number)[];
 declare const _default: React.NamedExoticComponent<GridHeaderProps>;
 export default _default;

package/dist/components/grid/utils/gridHeader.js

@@ -8,7 +8,7 @@ import DateInput from "../../date-input";
 import TextInput from "../../text-input";
 import Checkbox from "../../checkbox";
 import { Tooltip } from "react-tooltip";
-export const getColumnData = (columnKey, gridData, type) => {
+export const getColumnData = (columnKey, gridData, type, combinedColumns) => {
     const returnedValue = [
         ...new Set(gridData
             .filter((item) => item[columnKey] && typeof item[columnKey].value !== "undefined")
@@ -21,20 +21,46 @@ export const getColumnData = (columnKey, gridData, type) => {
             : data[columnKey].value)),
     ];
     return returnedValue.sort((a, b) => {
-        const aValue = a
+        let aValue = a
             ? type === "number" || type === "currency"
                 ? parseFloat(a === null || a === void 0 ? void 0 : a.toString())
                 : a === null || a === void 0 ? void 0 : a.toString().toUpperCase()
             : type === "number" || type === "currency"
                 ? 0
                 : "";
-        const bValue = b
+        let bValue = b
             ? type === "number" || type === "currency"
                 ? parseFloat(b === null || b === void 0 ? void 0 : b.toString())
                 : b === null || b === void 0 ? void 0 : b.toString().toUpperCase()
             : type === "number" || type === "currency"
                 ? 0
                 : "";
+        if (combinedColumns && (combinedColumns === null || combinedColumns === void 0 ? void 0 : combinedColumns.length) > 0) {
+            const combinedColumn = combinedColumns.find((col) => col.key === columnKey);
+            if (combinedColumn) {
+                const { columns: combinedCols, separator, sortOn } = combinedColumn;
+                if (sortOn) {
+                    const index = combinedCols.findIndex((colKey) => colKey === sortOn[0]);
+                    const aVals = ((aValue === null || aValue === void 0 ? void 0 : aValue.toString()) || "").split(separator);
+                    const bVals = ((bValue === null || bValue === void 0 ? void 0 : bValue.toString()) || "").split(separator);
+                    aValue = aVals[index] || "";
+                    bValue = bVals[index] || "";
+                    if (parseFloat(aValue).toString() !== "NaN" &&
+                        parseFloat(bValue).toString() !== "NaN") {
+                        aValue = parseFloat(aValue);
+                        bValue = parseFloat(bValue);
+                    }
+                }
+            }
+        }
+        else if (columnKey !== "id" &&
+            aValue.toString().includes("-") &&
+            bValue.toString().includes("-")) {
+            aValue = aValue.toString().split("-")[0];
+            bValue = bValue.toString().split("-")[0];
+            aValue = isNaN(parseFloat(aValue)) ? aValue : parseFloat(aValue);
+            bValue = isNaN(parseFloat(bValue)) ? bValue : parseFloat(bValue);
+        }
         if (aValue < bValue)
             return -1;
         if (aValue > bValue)
@@ -42,7 +68,7 @@ export const getColumnData = (columnKey, gridData, type) => {
         return 0;
     });
 };
-const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resizable = false, defaultSearchOperation, sortQueries, onSort, bulkSelect, allRowsSelected, someRowsSelected, toggleSelectAll, cellStyle, widthMode, rowHeight, headerRef, showMenu, headerBackground, headerTopBorder, headerBottomBorder, groupBy, setGroupBy, updateGridColumns, setGridColumns, headerDropdownIndex, widthUnits, textFilterLabel = "Text Filter", gridData, checkboxWrapper, onFilter, setUniqueSearch, uniqueSearch, hugColumnWidths, menuVisible, setMenuVisible, dropdownVisible, setDropdownVisible, actionsKey = "actions", columnSearchOutside, locale, formatOptions, }) => {
+const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resizable = false, defaultSearchOperation, sortQueries, onSort, bulkSelect, allRowsSelected, someRowsSelected, toggleSelectAll, cellStyle, widthMode, rowHeight, headerRef, showMenu, headerBackground, headerTopBorder, headerBottomBorder, groupBy, setGroupBy, updateGridColumns, setGridColumns, headerDropdownIndex, widthUnits, textFilterLabel = "Text Filter", gridData, checkboxWrapper, onFilter, setUniqueSearch, uniqueSearch, hugColumnWidths, menuVisible, setMenuVisible, dropdownVisible, setDropdownVisible, actionsKey = "actions", columnSearchOutside, locale, formatOptions, combinedColumns }) => {
     const [menuPosition, setMenuPosition] = useState(null);
     const [searchOpsPosition, setSearchOpsPosition] = useState(null);
     const [headerColumns, setHeaderColumns] = useState([]);
@@ -329,7 +355,7 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
                                                                 : ((_b = headerColumns.find((column) => column.key === _groupBy)) === null || _b === void 0 ? void 0 : _b.dataType) === "date"
                                                                     ? dateTypeSearch.includes(item.value)
                                                                     : textTypeSearch.includes(item.value);
-                                                        }), position: searchOpsPosition || { top: 0, left: 0 }, columnKey: ((_3 = headerColumns.find((column) => column.key === _groupBy)) === null || _3 === void 0 ? void 0 : _3.key) || "", columnData: getColumnData(((_4 = headerColumns.find((column) => column.key === _groupBy)) === null || _4 === void 0 ? void 0 : _4.key) || "", gridData, (_6 = (_5 = headerColumns.find((column) => column.key === _groupBy)) === null || _5 === void 0 ? void 0 : _5.dataType) !== null && _6 !== void 0 ? _6 : "string"), searchElement: _jsx("div", { id: "search-input", children: ((_7 = headerColumns.find((column) => column.key === _groupBy)) === null || _7 === void 0 ? void 0 : _7.dataType) === "date" ? (((_9 = searchQueries[((_8 = headerColumns.find((column) => column.key === _groupBy)) === null || _8 === void 0 ? void 0 : _8.key) || ""]) === null || _9 === void 0 ? void 0 : _9.type) === "between" ? (_jsxs(_Fragment, { children: [_jsx(DateInput, { value: (_11 = searchQueries[((_10 = headerColumns.find((column) => column.key === _groupBy)) === null || _10 === void 0 ? void 0 : _10.key) || ""]) === null || _11 === void 0 ? void 0 : _11.text.split("to")[0], placeholder: `From date`, onChange: (value) => {
+                                                        }), position: searchOpsPosition || { top: 0, left: 0 }, columnKey: ((_3 = headerColumns.find((column) => column.key === _groupBy)) === null || _3 === void 0 ? void 0 : _3.key) || "", columnData: getColumnData(((_4 = headerColumns.find((column) => column.key === _groupBy)) === null || _4 === void 0 ? void 0 : _4.key) || "", gridData, (_6 = (_5 = headerColumns.find((column) => column.key === _groupBy)) === null || _5 === void 0 ? void 0 : _5.dataType) !== null && _6 !== void 0 ? _6 : "string", combinedColumns !== null && combinedColumns !== void 0 ? combinedColumns : []), searchElement: _jsx("div", { id: "search-input", children: ((_7 = headerColumns.find((column) => column.key === _groupBy)) === null || _7 === void 0 ? void 0 : _7.dataType) === "date" ? (((_9 = searchQueries[((_8 = headerColumns.find((column) => column.key === _groupBy)) === null || _8 === void 0 ? void 0 : _8.key) || ""]) === null || _9 === void 0 ? void 0 : _9.type) === "between" ? (_jsxs(_Fragment, { children: [_jsx(DateInput, { value: (_11 = searchQueries[((_10 = headerColumns.find((column) => column.key === _groupBy)) === null || _10 === void 0 ? void 0 : _10.key) || ""]) === null || _11 === void 0 ? void 0 : _11.text.split("to")[0], placeholder: `From date`, onChange: (value) => {
                                                                             var _a, _b, _c, _d, _e;
                                                                             return onSearch(((_a = headerColumns.find((column) => column.key === _groupBy)) === null || _a === void 0 ? void 0 : _a.key) || "", (_c = searchQueries[((_b = headerColumns.find((column) => column.key === _groupBy)) === null || _b === void 0 ? void 0 : _b.key) || ""]) === null || _c === void 0 ? void 0 : _c.text.split("to").map((item, index) => {
                                                                                 if (index === 0) {
@@ -511,7 +537,7 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
                 .map((column, colIndex) => {
                 var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
                 if (!column.hidden) {
-                    const columnData = getColumnData(column.key, gridData, (_a = column.dataType) !== null && _a !== void 0 ? _a : "string");
+                    const columnData = getColumnData(column.key, gridData, (_a = column.dataType) !== null && _a !== void 0 ? _a : "string", combinedColumns !== null && combinedColumns !== void 0 ? combinedColumns : []);
                     return (_jsx("div", { className: `${sortable && column.sortable ? "sortable" : ""} ${column.showMenu ? "menu-true" : "menu-false"} column index-${column.key}`, style: Object.assign(Object.assign({}, cellStyle), { position: "relative", padding: "0.5rem", textAlign: "left", whiteSpace: "nowrap", textOverflow: "ellipsis", width: widthMode === "auto"
                                 ? "auto"
                                 : column.width

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@megha-ui/react",
-  "version": "1.2.757",
+  "version": "1.2.759",
   "description": "A collection of reusable UI components for React applications, built with TypeScript.",
   "main": "./dist/index.js",
   "module": "./dist/index.js",