@megha-ui/react 1.2.687 → 1.2.689

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, 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 = 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 = {
     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);
@@ -50,7 +50,7 @@ withCard = false, cardClassName, cardHeader, title, headerLeft, headerRight, sub
     const [startIndex, _setStartIndex] = useState(0);
     const [endIndex, setEndIndex] = useState(defaultRowsPerPage);
     const [startHoriIndex, _setStartHoriIndex] = useState(0);
-    const [endHoriIndex, setEndHoriIndex] = useState(0);
+    const [endHoriIndex, setEndHoriIndex] = useState(defaultColumnsPerView);
     const [gridGroupBy, setGridGroupBy] = useState("");
     const [rowIndex, setRowIndex] = useState(-1);
     const [columnIndex, setColumnIndex] = useState(-1);
@@ -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]);
@@ -126,7 +125,11 @@ withCard = false, cardClassName, cardHeader, title, headerLeft, headerRight, sub
                 acc[item.key] = type;
                 return acc;
             }, {});
-            _columns = _columns.filter((_, index) => index >= startHoriIndex && index < endHoriIndex).map((col) => {
+            _columns = [
+                ...(startHoriIndex > 0 && endHoriIndex > 0
+                    ? _columns.filter((_, index) => index >= startHoriIndex && index <= endHoriIndex)
+                    : _columns),
+            ].map((col) => {
                 var _a, _b;
                 let isArrayString = false;
                 if (typeof col.isArrayString !== "undefined") {
@@ -706,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" &&
@@ -822,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

@@ -73,6 +73,7 @@ export interface OjasGridProps {
     bulkSelect?: boolean;
     rowsPerPageOptions?: number[];
     defaultRowsPerPage?: number;
+    defaultColumnsPerView?: number;
     height: string | number;
     maxHeight?: string | number;
     width?: string | number;

package/package.json

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