@megha-ui/react 1.2.798 → 1.2.800

package/dist/components/grid/index.js

@@ -34,6 +34,8 @@ import Card from "../card";
 import { TbAntennaBarsOff, TbCalculator, TbCalculatorFilled, TbCalculatorOff, } from "react-icons/tb";
 import { TbCopy, TbCopyOff } from "react-icons/tb";
 import { formatValue } from "../../services/commonService";
+import NewGridHeader from "./utils/newGridHeader";
+import NewGridRow from "./utils/newGridRow";
 const Grid = ({ columns, wrapperClass, updateGridColumns, data, height, sortable = true, paginate, rowsPerPageOptions = [10, 20, 50, 100], defaultRowsPerPage = 100, defaultColumnsPerView = 200, widthMode = "custom", bulkSelect = false, cellBorder = false, rowHeight = "3rem", onRowClick, rowCount = false, rowBorder = true, showMenu = false, search = false, defaultSearchOperation = "contains", gridBorder = false, isLoading = false, rowTopBorder, rowBottomBorder, rowLeftBorder, rowRightBorder, headerBackground = "var(--row-header-bg)", headerTopBorder = "none", headerBottomBorder = "none", SettingIcon, ExportIcon, ignoredExportItems = ["action", "actions"], borderColor = "#dbdfe9", updateColumns, showHideAvailable = false, columnSearchOutside = false, multiSorting = false, exportAvailable = false, exportableFileName = "", groupBy, updateGroupBy, rowKey = "id", hlBorderColor = "black", selectedRow, selectedRowStyle = {
     borderLeft: "0.5rem solid #d9d9d9",
 }, defaultSort, noKeyEvents = true, customOperation, hasCustomOperation, globalSearch, headerDropdownIndex, draggable = false, resizable = false, updateGridData, widthUnits, checkboxWrapper, ignoreHugContent = false, isSummarise = false, isHideDups = false, isMultipleChips = false, fullScreenAvailable = true, defaultGroupOpen, alternateRowColor = true, activeCalculateColor = "#2377BA", calculatetextColor = "#fff", actionsKey = "actions", ignoreClickKeys = "", saveAsNewView = false, handleSaveAsView, saveAsViewIcon, filterData, chipColor = "#ccc", withAscii = false, propSummariseKeys, SummariseIcon, summarizeColor = "black", isExpandable = false, expandedRow, extraRow, selectedCheckBox, setSelectedCheckbox, ignoreRowSelect, setOpenedRows, openedRows, getLoadingState, globalSearchOpen = false, updateFixedFilterValues = (fixedFilterValues) => {
@@ -1517,14 +1519,74 @@ withCard = false, cardClassName, cardHeader, title, headerLeft, headerRight, sub
                                                         .filter((item) => item !== chip)
                                                         .join(","));
                                             }, children: "\u00D7" })] }, chip));
-                            })] }))] }), _jsxs("div", { id: `grid-content`, style: {
-                    display: "block",
-                    border: gridBorder ? "1px solid #f0f0f0" : "none",
-                    overflow: calculateVisible && gridGroupBy ? "visible" : "auto",
-                    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, 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) => {
+                            })] }))] }), _jsxs("div", { id: `grid-content`, 
+                // style={{
+                //   display: "block",
+                //   border: gridBorder ? "1px solid #f0f0f0" : "none",
+                //   overflow: calculateVisible && gridGroupBy ? "visible" : "auto",
+                //   whiteSpace: "nowrap",
+                //   height: `calc(100% - ${removalHeight})`,
+                //   position: "relative",
+                // }}
+                onScroll: onScroll, ref: gridRef, style: {
+                    display: "grid",
+                    gridTemplateColumns: gridColumns
+                        .map((_, index) => index > gridColumns.length - 2
+                        ? "minmax(max-content, 1fr)"
+                        : "max-content")
+                        .join(" "),
+                }, children: [_jsxs("div", { className: "hidden", 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
+                                            .split(",")
+                                            .filter((item) => item && item !== value)
+                                            .join(",")
+                                        : [
+                                            ..._gridGroupBy.split(",").filter((item) => item),
+                                            value,
+                                        ].join(",");
+                                    setGridGroupBy(_gridGroupBy);
+                                    updateGroupBy && updateGroupBy(_gridGroupBy);
+                                }, headerDropdownIndex: headerDropdownIndex, updateGridColumns: updateGridColumns, setGridColumns: setGridColumns, widthUnits: widthUnits, gridData: filteredData, checkboxWrapper: checkboxWrapper, onFilter: onFilter, setUniqueSearch: setUniqueSearch, uniqueSearch: uniqueSearch, hugColumnWidths: columnWidths, menuVisible: menuVisible, setMenuVisible: setMenuVisible, dropdownVisible: dropdownVisible, actionsKey: actionsKey, setDropdownVisible: setDropdownVisible, columnSearchOutside: columnSearchOutside, locale: locale, formatOptions: formatOptions }), hugLoading && (_jsx("div", { style: {
+                                    position: "sticky",
+                                    width: "100%",
+                                    height: `calc(100% - ${(_a = headerRef === null || headerRef === void 0 ? void 0 : headerRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight}px)`,
+                                    top: ((_b = headerRef === null || headerRef === void 0 ? void 0 : headerRef.current) === null || _b === void 0 ? void 0 : _b.clientHeight)
+                                        ? (_c = headerRef === null || headerRef === void 0 ? void 0 : headerRef.current) === null || _c === void 0 ? void 0 : _c.clientHeight
+                                        : 0,
+                                    zIndex: 1,
+                                    left: 0,
+                                    display: "flex",
+                                    alignItems: "center",
+                                    justifyContent: "center",
+                                    background: "var(--background)",
+                                }, children: _jsx(Loader, { size: 32 }) })), _jsx("div", { id: "table-body", children: gridGroupBy !== "" ? (_jsx(GroupedGridDetails, { locale: locale, formatOptions: formatOptions, groupedData: groupedData, rowOpened: rowOpened, startIndex: startIndex, endIndex: endIndex, alternateRowColor: alternateRowColor, updateRowOpened: updateRowOpened, columnWidths: columnWidths, columnHeights: columnHeights, groupBy: groupBy, widthMode: widthMode, rowKey: rowKey, rowHeight: rowHeight, headerBackground: headerBackground, isSummarise: summariseAvailable, gridGroupBy: gridGroupBy, rowStyle: rowStyle, sortable: sortable, cellStyle: cellStyle, summariseKeys: summariseKeys, summariseDetails: summariseDetails, activeCalculateColor: activeCalculateColor, gridRef: gridRef, setCalculatePosition: setCalculatePosition, calculatePosition: calculatePosition, calculatetextColor: calculatetextColor, setCalculateVisible: setCalculateVisible, calculateVisible: calculateVisible, summariseDisplay: summariseDisplay, recalculate: recalculate, selectedRowStyle: selectedRowStyle, isLoading: isLoading, selectedRow: selectedRow, onRowClick: onRowClick, gridColumns: gridColumns, bulkSelect: bulkSelect, selectedRows: selectedRows, toggleRowSelection: toggleRowSelection, hasVerticalScroll: hasVerticalScroll, setColumnWidths: setColumnWidths, setColumnHeights: setColumnHeights, ignoreClickKeys: ignoreClickKeys, actionsKey: actionsKey })) : (_jsxs(_Fragment, { children: [tableData.map((item, index) => {
+                                            var _a, _b, _c, _d, _e, _f;
+                                            if (paginate) {
+                                                return (_jsx(GridRow, { item: item, index: index, rowStyle: Object.assign(Object.assign({}, rowStyle), (selectedRow === ((_a = item.id) === null || _a === void 0 ? void 0 : _a.value)
+                                                        ? selectedRowStyle
+                                                        : {})), handleDragStart: handleDragStart, handleDragOver: handleDragOver, handleDrop: handleDrop, draggable: draggable, cellStyle: cellStyle, rowHeight: rowHeight, alternateRowColor: alternateRowColor, bulkSelect: bulkSelect, selectedRows: selectedRows ? selectedRows : new Set([""]), ignoreRowSelect: ignoreRowSelect ? ignoreRowSelect : new Set([""]), toggleRowSelection: toggleRowSelection, columns: gridColumns, widthMode: widthMode, hasVerticalScroll: hasVerticalScroll, onRowClick: onRowClick, loading: isLoading, groupBy: gridGroupBy, rowKey: rowKey, rowIndex: rowIndex, columnIndex: columnIndex, hlBorderColor: hlBorderColor, hugColumnWidths: columnWidths, hugColumnHeights: columnHeights, expandedRow: expandedRow, isExpandable: isExpandable, checkboxWrapper: checkboxWrapper, locale: locale, formatOptions: formatOptions, ignoreClickKeys: ignoreClickKeys, actionsKey: actionsKey }, String((_c = (_b = item.id) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : index)));
+                                            }
+                                            else if (index >= startIndex && index <= endIndex) {
+                                                return (_jsx(GridRow, { item: item, index: index, rowStyle: Object.assign(Object.assign({}, rowStyle), (selectedRow === ((_d = item.id) === null || _d === void 0 ? void 0 : _d.value)
+                                                        ? selectedRowStyle
+                                                        : {})), handleDragStart: handleDragStart, handleDragOver: handleDragOver, handleDrop: handleDrop, draggable: draggable, cellStyle: cellStyle, rowHeight: rowHeight, alternateRowColor: alternateRowColor, bulkSelect: bulkSelect, selectedRows: selectedRows ? selectedRows : new Set([""]), ignoreRowSelect: ignoreRowSelect ? ignoreRowSelect : new Set([""]), toggleRowSelection: toggleRowSelection, columns: gridColumns, widthMode: widthMode, hasVerticalScroll: hasVerticalScroll, onRowClick: onRowClick, loading: isLoading, groupBy: gridGroupBy, rowKey: rowKey, rowIndex: rowIndex, columnIndex: columnIndex, hlBorderColor: hlBorderColor, hugColumnWidths: columnWidths, hugColumnHeights: columnHeights, expandedRow: expandedRow, isExpandable: isExpandable, checkboxWrapper: checkboxWrapper, locale: locale, formatOptions: formatOptions, ignoreClickKeys: ignoreClickKeys, actionsKey: actionsKey }, String((_f = (_e = item.id) === null || _e === void 0 ? void 0 : _e.value) !== null && _f !== void 0 ? _f : index)));
+                                            }
+                                        }), extraRow && extraRow, tableData.length === 0 && typeof extraRow === "undefined" && (_jsx("div", { style: {
+                                                width: "100%",
+                                                height: `calc(100% - ${(_d = headerRef === null || headerRef === void 0 ? void 0 : headerRef.current) === null || _d === void 0 ? void 0 : _d.clientHeight}px)`,
+                                                display: "flex",
+                                                alignItems: "center",
+                                                padding: "1rem 0",
+                                                justifyContent: "center",
+                                            }, children: "No Data available" }))] })) }), (rowCount || paginate || summariseAvailable) && (_jsx("div", { id: "table-footer", style: {
+                                    position: "sticky",
+                                    bottom: 0,
+                                    background: "var(--row-header-bg)",
+                                }, children: summariseAvailable &&
+                                    filteredData.length > 0 &&
+                                    gridGroupBy === "" && (_jsx(SummariseDetails, { summariseKeys: summariseKeys, columns: gridColumns, groupBy: gridGroupBy, sortable: sortable, cellStyle: cellStyle, columnWidths: columnWidths, widthMode: widthMode, summariseDetails: summariseDetails, activeCalculateColor: activeCalculateColor, gridRef: gridRef, setCalculatePosition: setCalculatePosition, calculatePosition: calculatePosition, calculatetextColor: calculatetextColor, setCalculateVisible: setCalculateVisible, calculateVisible: calculateVisible, summariseDisplay: summariseDisplay, recalculate: recalculate, actionsKey: actionsKey })) }))] }), _jsx(NewGridHeader, { 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
@@ -1534,45 +1596,15 @@ withCard = false, cardClassName, cardHeader, title, headerLeft, headerRight, sub
                                 : [..._gridGroupBy.split(",").filter((item) => item), value].join(",");
                             setGridGroupBy(_gridGroupBy);
                             updateGroupBy && updateGroupBy(_gridGroupBy);
-                        }, headerDropdownIndex: headerDropdownIndex, updateGridColumns: updateGridColumns, setGridColumns: setGridColumns, widthUnits: widthUnits, gridData: filteredData, checkboxWrapper: checkboxWrapper, onFilter: onFilter, setUniqueSearch: setUniqueSearch, uniqueSearch: uniqueSearch, hugColumnWidths: columnWidths, menuVisible: menuVisible, setMenuVisible: setMenuVisible, dropdownVisible: dropdownVisible, actionsKey: actionsKey, setDropdownVisible: setDropdownVisible, columnSearchOutside: columnSearchOutside, locale: locale, formatOptions: formatOptions }), hugLoading && (_jsx("div", { style: {
-                            position: "sticky",
-                            width: "100%",
-                            height: `calc(100% - ${(_a = headerRef === null || headerRef === void 0 ? void 0 : headerRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight}px)`,
-                            top: ((_b = headerRef === null || headerRef === void 0 ? void 0 : headerRef.current) === null || _b === void 0 ? void 0 : _b.clientHeight)
-                                ? (_c = headerRef === null || headerRef === void 0 ? void 0 : headerRef.current) === null || _c === void 0 ? void 0 : _c.clientHeight
-                                : 0,
-                            zIndex: 1,
-                            left: 0,
-                            display: "flex",
-                            alignItems: "center",
-                            justifyContent: "center",
-                            background: "var(--background)",
-                        }, children: _jsx(Loader, { size: 32 }) })), _jsx("div", { id: "table-body", children: gridGroupBy !== "" ? (_jsx(GroupedGridDetails, { locale: locale, formatOptions: formatOptions, groupedData: groupedData, rowOpened: rowOpened, startIndex: startIndex, endIndex: endIndex, alternateRowColor: alternateRowColor, updateRowOpened: updateRowOpened, columnWidths: columnWidths, columnHeights: columnHeights, groupBy: groupBy, widthMode: widthMode, rowKey: rowKey, rowHeight: rowHeight, headerBackground: headerBackground, isSummarise: summariseAvailable, gridGroupBy: gridGroupBy, rowStyle: rowStyle, sortable: sortable, cellStyle: cellStyle, summariseKeys: summariseKeys, summariseDetails: summariseDetails, activeCalculateColor: activeCalculateColor, gridRef: gridRef, setCalculatePosition: setCalculatePosition, calculatePosition: calculatePosition, calculatetextColor: calculatetextColor, setCalculateVisible: setCalculateVisible, calculateVisible: calculateVisible, summariseDisplay: summariseDisplay, recalculate: recalculate, selectedRowStyle: selectedRowStyle, isLoading: isLoading, selectedRow: selectedRow, onRowClick: onRowClick, gridColumns: gridColumns, bulkSelect: bulkSelect, selectedRows: selectedRows, toggleRowSelection: toggleRowSelection, hasVerticalScroll: hasVerticalScroll, setColumnWidths: setColumnWidths, setColumnHeights: setColumnHeights, ignoreClickKeys: ignoreClickKeys, actionsKey: actionsKey })) : (_jsxs(_Fragment, { children: [tableData.map((item, index) => {
-                                    var _a, _b, _c, _d, _e, _f;
-                                    if (paginate) {
-                                        return (_jsx(GridRow, { item: item, index: index, rowStyle: Object.assign(Object.assign({}, rowStyle), (selectedRow === ((_a = item.id) === null || _a === void 0 ? void 0 : _a.value)
-                                                ? selectedRowStyle
-                                                : {})), handleDragStart: handleDragStart, handleDragOver: handleDragOver, handleDrop: handleDrop, draggable: draggable, cellStyle: cellStyle, rowHeight: rowHeight, alternateRowColor: alternateRowColor, bulkSelect: bulkSelect, selectedRows: selectedRows ? selectedRows : new Set([""]), ignoreRowSelect: ignoreRowSelect ? ignoreRowSelect : new Set([""]), toggleRowSelection: toggleRowSelection, columns: gridColumns, widthMode: widthMode, hasVerticalScroll: hasVerticalScroll, onRowClick: onRowClick, loading: isLoading, groupBy: gridGroupBy, rowKey: rowKey, rowIndex: rowIndex, columnIndex: columnIndex, hlBorderColor: hlBorderColor, hugColumnWidths: columnWidths, hugColumnHeights: columnHeights, expandedRow: expandedRow, isExpandable: isExpandable, checkboxWrapper: checkboxWrapper, locale: locale, formatOptions: formatOptions, ignoreClickKeys: ignoreClickKeys, actionsKey: actionsKey }, String((_c = (_b = item.id) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : index)));
-                                    }
-                                    else if (index >= startIndex && index <= endIndex) {
-                                        return (_jsx(GridRow, { item: item, index: index, rowStyle: Object.assign(Object.assign({}, rowStyle), (selectedRow === ((_d = item.id) === null || _d === void 0 ? void 0 : _d.value)
-                                                ? selectedRowStyle
-                                                : {})), handleDragStart: handleDragStart, handleDragOver: handleDragOver, handleDrop: handleDrop, draggable: draggable, cellStyle: cellStyle, rowHeight: rowHeight, alternateRowColor: alternateRowColor, bulkSelect: bulkSelect, selectedRows: selectedRows ? selectedRows : new Set([""]), ignoreRowSelect: ignoreRowSelect ? ignoreRowSelect : new Set([""]), toggleRowSelection: toggleRowSelection, columns: gridColumns, widthMode: widthMode, hasVerticalScroll: hasVerticalScroll, onRowClick: onRowClick, loading: isLoading, groupBy: gridGroupBy, rowKey: rowKey, rowIndex: rowIndex, columnIndex: columnIndex, hlBorderColor: hlBorderColor, hugColumnWidths: columnWidths, hugColumnHeights: columnHeights, expandedRow: expandedRow, isExpandable: isExpandable, checkboxWrapper: checkboxWrapper, locale: locale, formatOptions: formatOptions, ignoreClickKeys: ignoreClickKeys, actionsKey: actionsKey }, String((_f = (_e = item.id) === null || _e === void 0 ? void 0 : _e.value) !== null && _f !== void 0 ? _f : index)));
-                                    }
-                                }), extraRow && extraRow, tableData.length === 0 && typeof extraRow === "undefined" && (_jsx("div", { style: {
-                                        width: "100%",
-                                        height: `calc(100% - ${(_d = headerRef === null || headerRef === void 0 ? void 0 : headerRef.current) === null || _d === void 0 ? void 0 : _d.clientHeight}px)`,
-                                        display: "flex",
-                                        alignItems: "center",
-                                        padding: "1rem 0",
-                                        justifyContent: "center",
-                                    }, children: "No Data available" }))] })) }), (rowCount || paginate || summariseAvailable) && (_jsx("div", { id: "table-footer", style: {
-                            position: "sticky",
-                            bottom: 0,
-                            background: "var(--row-header-bg)",
-                        }, children: summariseAvailable &&
-                            filteredData.length > 0 &&
-                            gridGroupBy === "" && (_jsx(SummariseDetails, { summariseKeys: summariseKeys, columns: gridColumns, groupBy: gridGroupBy, sortable: sortable, cellStyle: cellStyle, columnWidths: columnWidths, widthMode: widthMode, summariseDetails: summariseDetails, activeCalculateColor: activeCalculateColor, gridRef: gridRef, setCalculatePosition: setCalculatePosition, calculatePosition: calculatePosition, calculatetextColor: calculatetextColor, setCalculateVisible: setCalculateVisible, calculateVisible: calculateVisible, summariseDisplay: summariseDisplay, recalculate: recalculate, actionsKey: actionsKey })) }))] }), paginate && gridGroupBy === "" && (_jsxs("div", { id: "pagination", style: {
+                        }, headerDropdownIndex: headerDropdownIndex, updateGridColumns: updateGridColumns, setGridColumns: setGridColumns, widthUnits: widthUnits, gridData: filteredData, checkboxWrapper: checkboxWrapper, onFilter: onFilter, setUniqueSearch: setUniqueSearch, uniqueSearch: uniqueSearch, hugColumnWidths: columnWidths, menuVisible: menuVisible, setMenuVisible: setMenuVisible, dropdownVisible: dropdownVisible, actionsKey: actionsKey, setDropdownVisible: setDropdownVisible, columnSearchOutside: columnSearchOutside, locale: locale, formatOptions: formatOptions }), tableData.map((item, index) => {
+                        var _a, _b, _c, _d, _e, _f;
+                        if (paginate) {
+                            return (_jsx(NewGridRow, { item: item, index: index, rowStyle: Object.assign(Object.assign({}, rowStyle), (selectedRow === ((_a = item.id) === null || _a === void 0 ? void 0 : _a.value) ? selectedRowStyle : {})), handleDragStart: handleDragStart, handleDragOver: handleDragOver, handleDrop: handleDrop, draggable: draggable, cellStyle: cellStyle, rowHeight: rowHeight, alternateRowColor: alternateRowColor, bulkSelect: bulkSelect, selectedRows: selectedRows ? selectedRows : new Set([""]), ignoreRowSelect: ignoreRowSelect ? ignoreRowSelect : new Set([""]), toggleRowSelection: toggleRowSelection, columns: gridColumns, widthMode: widthMode, hasVerticalScroll: hasVerticalScroll, onRowClick: onRowClick, loading: isLoading, groupBy: gridGroupBy, rowKey: rowKey, rowIndex: rowIndex, columnIndex: columnIndex, hlBorderColor: hlBorderColor, hugColumnWidths: columnWidths, hugColumnHeights: columnHeights, expandedRow: expandedRow, isExpandable: isExpandable, checkboxWrapper: checkboxWrapper, locale: locale, formatOptions: formatOptions, ignoreClickKeys: ignoreClickKeys, actionsKey: actionsKey }, String((_c = (_b = item.id) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : index)));
+                        }
+                        else if (index >= startIndex && index <= endIndex) {
+                            return (_jsx(NewGridRow, { item: item, index: index, rowStyle: Object.assign(Object.assign({}, rowStyle), (selectedRow === ((_d = item.id) === null || _d === void 0 ? void 0 : _d.value) ? selectedRowStyle : {})), handleDragStart: handleDragStart, handleDragOver: handleDragOver, handleDrop: handleDrop, draggable: draggable, cellStyle: cellStyle, rowHeight: rowHeight, alternateRowColor: alternateRowColor, bulkSelect: bulkSelect, selectedRows: selectedRows ? selectedRows : new Set([""]), ignoreRowSelect: ignoreRowSelect ? ignoreRowSelect : new Set([""]), toggleRowSelection: toggleRowSelection, columns: gridColumns, widthMode: widthMode, hasVerticalScroll: hasVerticalScroll, onRowClick: onRowClick, loading: isLoading, groupBy: gridGroupBy, rowKey: rowKey, rowIndex: rowIndex, columnIndex: columnIndex, hlBorderColor: hlBorderColor, hugColumnWidths: columnWidths, hugColumnHeights: columnHeights, expandedRow: expandedRow, isExpandable: isExpandable, checkboxWrapper: checkboxWrapper, locale: locale, formatOptions: formatOptions, ignoreClickKeys: ignoreClickKeys, actionsKey: actionsKey }, String((_f = (_e = item.id) === null || _e === void 0 ? void 0 : _e.value) !== null && _f !== void 0 ? _f : index)));
+                        }
+                    })] }), paginate && gridGroupBy === "" && (_jsxs("div", { id: "pagination", style: {
                     display: "flex",
                     minHeight: "2rem",
                     alignItems: "center",

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

@@ -0,0 +1,73 @@
+import React from "react";
+import { Column, DataRow } from "../types/grid";
+interface GridHeaderProps {
+    columns: Column[];
+    sortable: boolean;
+    search?: boolean;
+    resizable?: boolean;
+    defaultSearchOperation?: string;
+    sortQueries: {
+        [key: string]: "asc" | "desc";
+    };
+    onSort: (column: Column | null, order?: "asc" | "desc") => void;
+    bulkSelect?: boolean;
+    allRowsSelected: boolean;
+    someRowsSelected: boolean;
+    toggleSelectAll: () => void;
+    cellStyle: React.CSSProperties;
+    widthMode: "auto" | "custom";
+    rowHeight?: number;
+    headerRef: React.RefObject<HTMLDivElement>;
+    showMenu: boolean;
+    searchQueries: Record<string, {
+        text: string;
+        type: string;
+    }>;
+    onSearch: (key: string, value: string, type: string) => void;
+    headerBackground?: string;
+    headerTopBorder?: string;
+    headerBottomBorder?: string;
+    groupBy: string;
+    updateGridColumns?: (data: Column[]) => void;
+    setGridColumns?: (data: Column[]) => void;
+    setGroupBy: (value: string) => void;
+    headerDropdownIndex?: number;
+    widthUnits?: string;
+    textFilterLabel?: string;
+    gridData: DataRow[];
+    checkboxWrapper?: string;
+    onFilter: (data: {
+        [key: string]: string[];
+    }, key: string) => void;
+    setUniqueSearch: any;
+    uniqueSearch: {
+        [key: string]: (string | number)[];
+    };
+    hugColumnWidths: {
+        [key: string]: string;
+    };
+    menuVisible: string;
+    setMenuVisible: any;
+    dropdownVisible: string;
+    setDropdownVisible: any;
+    actionsKey?: string;
+    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, combinedColumns: {
+    name: string;
+    key: string;
+    separator: string;
+    columns: string[];
+    sortOn: string[];
+}[]) => (string | number)[];
+declare const _default: React.NamedExoticComponent<GridHeaderProps>;
+export default _default;