@megha-ui/react 1.2.685 → 1.2.687

package/dist/components/grid/index.js

@@ -47,8 +47,10 @@ withCard = false, cardClassName, cardHeader, title, headerLeft, headerRight, sub
     const [isOpen, setIsOpen] = useState(false);
     const [filterColumns, setFilterColumn] = useState([]);
     const modalContent = useRef(null);
-    const [startIndex, setStartIndex] = useState(0);
+    const [startIndex, _setStartIndex] = useState(0);
     const [endIndex, setEndIndex] = useState(defaultRowsPerPage);
+    const [startHoriIndex, _setStartHoriIndex] = useState(0);
+    const [endHoriIndex, setEndHoriIndex] = useState(0);
     const [gridGroupBy, setGridGroupBy] = useState("");
     const [rowIndex, setRowIndex] = useState(-1);
     const [columnIndex, setColumnIndex] = useState(-1);
@@ -88,6 +90,7 @@ 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]);
@@ -123,7 +126,7 @@ withCard = false, cardClassName, cardHeader, title, headerLeft, headerRight, sub
                 acc[item.key] = type;
                 return acc;
             }, {});
-            _columns = _columns.map((col) => {
+            _columns = _columns.filter((_, index) => index >= startHoriIndex && index < endHoriIndex).map((col) => {
                 var _a, _b;
                 let isArrayString = false;
                 if (typeof col.isArrayString !== "undefined") {
@@ -144,7 +147,7 @@ withCard = false, cardClassName, cardHeader, title, headerLeft, headerRight, sub
             });
         }
         setGridColumns(_columns);
-    }, [columns, data, isMultipleChips]);
+    }, [columns, data, isMultipleChips, endHoriIndex, startHoriIndex]);
     useEffect(() => {
         if (globalSearchOpen) {
             setExpandedGI(true);
@@ -700,6 +703,10 @@ withCard = false, cardClassName, cardHeader, title, headerLeft, headerRight, sub
             }
             return typeof column.width === "string" && column.width === "";
         });
+        const gridWidth = entrieGridRef.current
+            ? entrieGridRef.current.getBoundingClientRect().width
+            : 0;
+        console.log("Grid Width:", gridWidth);
         if (gridGroupBy === "" &&
             entrieGridRef.current &&
             widthMode === "custom" &&
@@ -819,6 +826,16 @@ withCard = false, cardClassName, cardHeader, title, headerLeft, headerRight, sub
         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 (e.currentTarget &&
             isScrollAlmostAtEnd(e.currentTarget) &&

package/package.json

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