@megha-ui/react 1.2.688 → 1.2.690

package/dist/components/grid/index.js

@@ -34,7 +34,7 @@ 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";
-const Grid = ({ columns, wrapperClass, updateGridColumns, data, height, sortable = true, paginate, rowsPerPageOptions = [10, 20, 50, 100], defaultRowsPerPage = 100, defaultColumnsPerView = 100, widthMode = "custom", bulkSelect = false, cellBorder = false, rowHeight = 38, 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 = {
+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", 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) => {
     console.log("Update fixed filter values not implemented", fixedFilterValues);
@@ -90,7 +90,6 @@ withCard = false, cardClassName, cardHeader, title, headerLeft, headerRight, sub
         return gridColumns.filter((col) => col.fixedFilter && col.fixedFilter !== "");
     }, [gridColumns]);
     const [fixedFilterValues, setFixedFilterValues] = useState({});
-    const [columnsPerView, setColumnsPerView] = useState(5);
     useEffect(() => {
         setSummariseAvailable(isSummarise);
     }, [isSummarise]);
@@ -710,7 +709,6 @@ withCard = false, cardClassName, cardHeader, title, headerLeft, headerRight, sub
         const gridWidth = entrieGridRef.current
             ? entrieGridRef.current.getBoundingClientRect().width
             : 0;
-        console.log("Grid Width:", gridWidth);
         if (gridGroupBy === "" &&
             entrieGridRef.current &&
             widthMode === "custom" &&
@@ -826,19 +824,24 @@ withCard = false, cardClassName, cardHeader, title, headerLeft, headerRight, sub
         return (element.scrollHeight - element.scrollTop - element.clientHeight <
             threshold);
     };
+    const isScrollAlmostAtLeft = (element, threshold = 100) => {
+        return (element.scrollWidth - element.scrollLeft - element.clientWidth < threshold);
+    };
     const onScroll = (e) => {
         const isPaginate = gridGroupBy === "" && paginate;
         if (headerRef.current) {
             headerRef.current.scrollLeft = e.currentTarget.scrollLeft;
-            let atmostIndex = -1;
-            if (gridColumns.length > 0) {
-                atmostIndex = gridColumns.length - 1;
-            }
-            if (atmostIndex >= endHoriIndex + columnsPerView) {
-                setEndHoriIndex((prev) => prev + columnsPerView);
-            }
-            else {
-                setEndHoriIndex(atmostIndex);
+            if (isScrollAlmostAtLeft(e.currentTarget)) {
+                let atmostIndex = -1;
+                if (gridColumns.length > 0) {
+                    atmostIndex = gridColumns.length - 1;
+                }
+                if (atmostIndex >= endHoriIndex + defaultColumnsPerView) {
+                    setEndHoriIndex((prev) => prev + defaultColumnsPerView);
+                }
+                else {
+                    setEndHoriIndex(atmostIndex);
+                }
             }
         }
         if (e.currentTarget &&

package/dist/components/grid/types/grid.d.ts

@@ -80,7 +80,7 @@ export interface OjasGridProps {
     widthMode?: "auto" | "custom";
     rowKey?: string;
     cellBorder?: boolean;
-    rowHeight?: number;
+    rowHeight?: number | string;
     onRowClick?: (rowData: any) => void;
     rowCount?: boolean;
     rowBorder?: boolean;
@@ -270,7 +270,7 @@ export interface GridRowProps {
     item: DataRow;
     rowStyle: React.CSSProperties;
     cellStyle: React.CSSProperties;
-    rowHeight: number;
+    rowHeight: number | string;
     /** Unique key field for row items */
     rowKey: string;
     bulkSelect: boolean;

package/package.json

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