@megha-ui/react 1.2.685 → 1.2.686

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]);
@@ -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) &&
@@ -1429,7 +1446,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, startHoriIndex: startHoriIndex, endHoriIndex: endHoriIndex, 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) => {
                             let _gridGroupBy = gridGroupBy;
                             _gridGroupBy = _gridGroupBy.split(",").includes(value)
                                 ? _gridGroupBy

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

@@ -1,6 +1,8 @@
 import React from "react";
 import { Column, DataRow } from "../types/grid";
 interface GridHeaderProps {
+    startHoriIndex: number;
+    endHoriIndex: number;
     columns: Column[];
     sortable: boolean;
     search?: boolean;

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

@@ -41,7 +41,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 = ({ startHoriIndex, endHoriIndex, 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 [menuPosition, setMenuPosition] = useState(null);
     const [searchOpsPosition, setSearchOpsPosition] = useState(null);
     const [headerColumns, setHeaderColumns] = useState([]);
@@ -509,7 +509,7 @@ const GridHeader = ({ columns, onSearch, searchQueries, sortable, search, resiza
                 .filter((column) => !groupByKeys.includes(column.key))
                 .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) {
+                if (!column.hidden && colIndex >= startHoriIndex && colIndex <= endHoriIndex) {
                     const columnData = getColumnData(column.key, gridData, (_a = column.dataType) !== null && _a !== void 0 ? _a : "string");
                     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"

package/package.json

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