@codezee/sixtify-brahma 0.2.193 → 0.2.195

package/packages/shared-components/dist/SmartGrid/Components/SmartSwitch.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SmartSwitch = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_hook_form_1 = require("react-hook-form");
+const SmartSwitch = ({ name, control, defaultValue, rules, label, }) => {
+    const { field: { value = false, onChange }, } = (0, react_hook_form_1.useController)({ name, control, defaultValue, rules });
+    const handleToggle = () => {
+        onChange(!value);
+    };
+    const containerStyle = {
+        display: "flex",
+        alignItems: "center",
+        gap: "12px",
+    };
+    const labelStyle = {
+        color: "#374151",
+        fontWeight: "500",
+    };
+    const buttonStyle = {
+        position: "relative",
+        width: "42px",
+        height: "20px",
+        background: "transparent",
+        border: "none",
+        cursor: "pointer",
+        outline: "none",
+        padding: "0",
+    };
+    const trackStyle = {
+        position: "absolute",
+        top: "0",
+        left: "0",
+        width: "100%",
+        height: "100%",
+        borderRadius: "11px",
+        backgroundColor: value ? "#38bdf8" : "#e5e7eb",
+        transition: "background-color 0.25s ease",
+    };
+    const circleStyle = {
+        position: "absolute",
+        top: "2px",
+        left: value ? "23px" : "3px",
+        width: "18px",
+        height: "16px",
+        borderRadius: "50%",
+        backgroundColor: "#ffffff",
+        transition: "left 0.25s ease",
+        boxShadow: "0 1px 2px rgba(0, 0, 0, 0.2)",
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { style: containerStyle, children: [label && (0, jsx_runtime_1.jsx)("span", { style: labelStyle, children: label }), (0, jsx_runtime_1.jsxs)("button", { onClick: handleToggle, style: buttonStyle, role: "switch", "aria-checked": value, type: "button", children: [(0, jsx_runtime_1.jsx)("span", { style: trackStyle }), (0, jsx_runtime_1.jsx)("span", { style: circleStyle })] })] }));
+};
+exports.SmartSwitch = SmartSwitch;

package/packages/shared-components/dist/SmartGrid/Components/Svgs/HideIcon.d.ts

@@ -0,0 +1,3 @@
+import type { SVGProps } from "react";
+export declare const HideIcon: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=HideIcon.d.ts.map

package/packages/shared-components/dist/SmartGrid/Components/Svgs/HideIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HideIcon.d.ts","sourceRoot":"","sources":["../../../../src/SmartGrid/Components/Svgs/HideIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtC,eAAO,MAAM,QAAQ,GAAI,OAAO,QAAQ,CAAC,aAAa,CAAC,4CA0BtD,CAAC"}

package/packages/shared-components/dist/SmartGrid/Components/Svgs/HideIcon.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HideIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const HideIcon = (props) => ((0, jsx_runtime_1.jsxs)("svg", { fill: "#000000", width: "800px", height: "800px", viewBox: "0 0 36 36", preserveAspectRatio: "xMidYMid meet", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", ...props, children: [(0, jsx_runtime_1.jsx)("title", { children: "eye-hide-line" }), (0, jsx_runtime_1.jsx)("path", { d: "M25.19,20.4A6.78,6.78,0,0,0,25.62,18a6.86,6.86,0,0,0-6.86-6.86,6.79,6.79,0,0,0-2.37.43L18,13.23a4.78,4.78,0,0,1,.74-.06A4.87,4.87,0,0,1,23.62,18a4.79,4.79,0,0,1-.06.74Z", className: "clr-i-outline clr-i-outline-path-1" }), (0, jsx_runtime_1.jsx)("path", { d: "M34.29,17.53c-3.37-6.23-9.28-10-15.82-10a16.82,16.82,0,0,0-5.24.85L14.84,10a14.78,14.78,0,0,1,3.63-.47c5.63,0,10.75,3.14,13.8,8.43a17.75,17.75,0,0,1-4.37,5.1l1.42,1.42a19.93,19.93,0,0,0,5-6l.26-.48Z", className: "clr-i-outline clr-i-outline-path-2" }), (0, jsx_runtime_1.jsx)("path", { d: "M4.87,5.78l4.46,4.46a19.52,19.52,0,0,0-6.69,7.29L2.38,18l.26.48c3.37,6.23,9.28,10,15.82,10a16.93,16.93,0,0,0,7.37-1.69l5,5,1.75-1.5-26-26Zm9.75,9.75,6.65,6.65a4.81,4.81,0,0,1-2.5.72A4.87,4.87,0,0,1,13.9,18,4.81,4.81,0,0,1,14.62,15.53Zm-1.45-1.45a6.85,6.85,0,0,0,9.55,9.55l1.6,1.6a14.91,14.91,0,0,1-5.86,1.2c-5.63,0-10.75-3.14-13.8-8.43a17.29,17.29,0,0,1,6.12-6.3Z", className: "clr-i-outline clr-i-outline-path-3" }), (0, jsx_runtime_1.jsx)("rect", { x: 0, y: 0, width: 36, height: 36, fillOpacity: 0 })] }));
+exports.HideIcon = HideIcon;

package/packages/shared-components/dist/SmartGrid/Components/TableRowComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableRowComponent.d.ts","sourceRoot":"","sources":["../../../src/SmartGrid/Components/TableRowComponent.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAO3D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAG9C,KAAK,sBAAsB,CAAC,CAAC,IAAI;IAC/B,YAAY,EAAE,MAAM,EAAE,CAAC;IACvB,aAAa,CAAC,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC,CAAC;IAC9D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC;IACZ,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;IAC/B,UAAU,EAAE,WAAW,CAAC;CACzB,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,CAAC,EAAG,sHAWnC,sBAAsB,CAAC,CAAC,CAAC,4CA+Q3B,CAAC"}
+{"version":3,"file":"TableRowComponent.d.ts","sourceRoot":"","sources":["../../../src/SmartGrid/Components/TableRowComponent.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAO3D,OAAO,KAAK,EAAgB,aAAa,EAAE,MAAM,UAAU,CAAC;AAG5D,KAAK,sBAAsB,CAAC,CAAC,IAAI;IAC/B,YAAY,EAAE,MAAM,EAAE,CAAC;IACvB,aAAa,CAAC,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC,CAAC;IAC9D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC;IACZ,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;IAC/B,UAAU,EAAE,WAAW,CAAC;CACzB,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,CAAC,EAAG,sHAWnC,sBAAsB,CAAC,CAAC,CAAC,4CAmV3B,CAAC"}

package/packages/shared-components/dist/SmartGrid/Components/TableRowComponent.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TableRowComponent = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+/* eslint-disable sonarjs/function-return-type */
 const material_1 = require("@mui/material");
 const react_1 = require("react");
 const Button_1 = require("../../Button");
@@ -91,14 +92,43 @@ const TableRowComponent = ({ columnWidths, exportActions, exportData, grouping =
                             if (cell.column.id === "grouped_by") {
                                 return true;
                             }
+                            // Keep the grouped cell for grouped rows (this shows the expand/collapse and group label)
+                            if (cell.getIsGrouped()) {
+                                return true;
+                            }
                             // Filter out grouping columns - check both if cell is grouped AND if column ID is in grouping array
                             const columnId = cell.column.id;
                             const accessorKey = cell.column.columnDef?.accessorKey;
                             const isGroupingColumn = grouping.includes(columnId) ||
                                 (accessorKey && grouping.includes(accessorKey));
-                            return !isGroupingColumn && !cell.getIsGrouped();
+                            return !isGroupingColumn;
                         })
                         : visibleCells;
+                    // Check if this is a grouped row (has grouping header)
+                    const isGroupedRow = row.getIsGrouped();
+                    // For grouped rows, render a single cell that spans all columns
+                    if (isGroupedRow && cellsToRender.length > 0) {
+                        const groupedCell = cellsToRender.find((c) => c.getIsGrouped());
+                        if (groupedCell) {
+                            return ((0, jsx_runtime_1.jsx)("td", { colSpan: cellsToRender.length, style: {
+                                    boxSizing: "border-box",
+                                    lineHeight: "21px",
+                                    overflow: "hidden",
+                                    padding: "0px 8px",
+                                    position: "relative",
+                                    textAlign: "left",
+                                    width: "100%",
+                                }, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                                        alignItems: "center",
+                                        color: iron[400],
+                                        display: "flex",
+                                        fontFamily: "Poppins",
+                                        fontSize: "13px",
+                                        height: rowHeight,
+                                        justifyContent: "flex-start",
+                                    }, children: (0, jsx_runtime_1.jsx)(CellRenderer_1.CellRenderer, { cell: groupedCell, row: row, isSummaryRow: isSummaryRow, summaryData: summaryData, isGroupColumn: false }) }) }, groupedCell.id));
+                        }
+                    }
                     return cellsToRender.map((cell, cellIndex, allCells) => {
                         const width = columnWidths[cellIndex] ?? cell.column.getSize();
                         const pinStyle = getPinStyle(cell, cellIndex, allCells);
@@ -127,6 +157,19 @@ const TableRowComponent = ({ columnWidths, exportActions, exportData, grouping =
                                     ? butterflyBlue[600]
                                     : getRowBackgroundColor()
                             : cellBackgroundColor;
+                        // Get alignment from column definition
+                        const columnDef = cell.column.columnDef;
+                        const textAlign = columnDef.align ?? "left";
+                        let justifyContent;
+                        if (textAlign === "right") {
+                            justifyContent = "flex-end";
+                        }
+                        else if (textAlign === "center") {
+                            justifyContent = "center";
+                        }
+                        else {
+                            justifyContent = "flex-start";
+                        }
                         return ((0, jsx_runtime_1.jsx)("td", { onMouseDown: handleMouseDown, onMouseEnter: handleMouseEnter, style: {
                                 animation: cellAnimation,
                                 backgroundColor: finalBackgroundColor,
@@ -138,6 +181,7 @@ const TableRowComponent = ({ columnWidths, exportActions, exportData, grouping =
                                 overflow: "hidden",
                                 padding: "0px 8px",
                                 position: "relative",
+                                textAlign,
                                 textOverflow: "ellipsis",
                                 textWrap: "nowrap",
                                 userSelect: cellSelectionEnabled ? "none" : "auto",
@@ -148,9 +192,10 @@ const TableRowComponent = ({ columnWidths, exportActions, exportData, grouping =
                                     color: iron[400],
                                     display: "flex",
                                     fontFamily: "Poppins",
-                                    fontSize: "14px",
+                                    fontSize: "13px",
                                     fontWeight: isSummaryRow ? "500" : 400,
                                     height: rowHeight,
+                                    justifyContent,
                                     overflow: "hidden",
                                     textOverflow: "ellipsis",
                                 }, children: (0, jsx_runtime_1.jsx)(CellRenderer_1.CellRenderer, { cell: cell, row: row, isSummaryRow: isSummaryRow, summaryData: summaryData, isGroupColumn: cell.column.id === "grouped_by" }) }) }, cell.id));
@@ -171,7 +216,7 @@ const TableRowComponent = ({ columnWidths, exportActions, exportData, grouping =
                 }, children: exportActions?.map((item) => {
                     return ((0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: item.onClick, variant: "text", style: {
                             borderBottom: `1px solid ${iron[700]}`,
-                            fontSize: "14px",
+                            fontSize: "13px",
                             padding: 0,
                         }, disableRipple: true, children: item.label }, item.label));
                 }) }))] }));

package/packages/shared-components/dist/SmartGrid/SmartGrid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SmartGrid.d.ts","sourceRoot":"","sources":["../../src/SmartGrid/SmartGrid.tsx"],"names":[],"mappings":"AAKA,OAAO,KAQN,MAAM,OAAO,CAAC;AAiBf,OAAO,KAAK,EAEV,cAAc,EAGf,MAAM,SAAS,CAAC;AAkCjB,KAAK,aAAa,GAAG,KAAK,CAAC,yBAAyB,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,GAC3E,CAAC,CAAC,WAAW,EAAE,KAAK,EAAE,cAAc,CAAC,WAAW,CAAC,KAAK,GAAG,CAAC,OAAO,CAAC,CAAC;AAErE,eAAO,MAAM,SAAS,EA8gBjB,aAAa,CAAC"}
+{"version":3,"file":"SmartGrid.d.ts","sourceRoot":"","sources":["../../src/SmartGrid/SmartGrid.tsx"],"names":[],"mappings":"AAKA,OAAO,KAQN,MAAM,OAAO,CAAC;AAiBf,OAAO,KAAK,EAEV,cAAc,EAGf,MAAM,SAAS,CAAC;AAoCjB,KAAK,aAAa,GAAG,KAAK,CAAC,yBAAyB,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,GAC3E,CAAC,CAAC,WAAW,EAAE,KAAK,EAAE,cAAc,CAAC,WAAW,CAAC,KAAK,GAAG,CAAC,OAAO,CAAC,CAAC;AAErE,eAAO,MAAM,SAAS,EA6uBjB,aAAa,CAAC"}

package/packages/shared-components/dist/SmartGrid/SmartGrid.js

@@ -27,6 +27,8 @@ const GroupedPanel_1 = require("./Components/Grouped/GroupedPanel");
 const DraggableHeaderCell_1 = require("./Components/HeaderCells/DraggableHeaderCell");
 const GroupAreaOverlay_1 = require("./Components/Grouped/GroupAreaOverlay");
 const sortable_1 = require("@dnd-kit/sortable");
+const iconoir_react_1 = require("iconoir-react");
+const ColumnArrangerDialog_1 = require("./Components/ColumnChooser/ColumnArrangerDialog");
 const calculateGroupSummary = (groupRow, globalSummary, dynamicSummaryConfig) => {
     const { subRows } = groupRow;
     if (dynamicSummaryConfig && subRows) {
@@ -35,17 +37,51 @@ const calculateGroupSummary = (groupRow, globalSummary, dynamicSummaryConfig) =>
     }
     return globalSummary ? globalSummary : {};
 };
-exports.SmartGrid = (0, react_1.forwardRef)(({ defaultGrouping = [], dynamicRowSelection = () => true, emptyMessage = "No data found", enableCellSelection = false, exportActions = [], exportData = false, height = "calc(100vh - 130px)", loading = false, rowHeight = 38, rowSelection = false, swipeableColumns = false, totalCount = 0, ...props }, ref) => {
+exports.SmartGrid = (0, react_1.forwardRef)(({ defaultGrouping = [], dynamicRowSelection = () => true, emptyMessage = "No data found", enableCellSelection = false, exportActions = [], exportData = false, height = "calc(100vh - 130px)", loading = false, rowHeight = 38, rowSelection = false, swipeableColumns = false, columnArranger = false, totalCount = 0, onApplyColumnArranger, ...props }, ref) => {
     const theme = (0, material_1.useTheme)();
     const { butterflyBlue } = theme.palette.app.color;
     const [resetAllFilters, setResetAllFilters] = (0, react_1.useState)(false);
     const [activeDragId, setActiveDragId] = (0, react_1.useState)(null);
     const [activeDragOver, setActiveDragOver] = (0, react_1.useState)(null);
+    const [isOutsideGrid, setIsOutsideGrid] = (0, react_1.useState)(false);
+    const gridContainerRef = (0, react_1.useRef)(null);
+    const [showColumnChooser, setShowColumnChooser] = (0, react_1.useState)(false);
     const containerRef = (0, react_1.useRef)(null);
     const headerRef = (0, react_1.useRef)(null);
     const { columns: propsColumns, data, dynamicSummaryConfig, summary, } = props;
+    // Internal state to track hidden columns (by columnId or accessorKey)
+    const [hiddenColumnIds, setHiddenColumnIds] = (0, react_1.useState)(new Set());
+    // Filter out columns where hide is true (default hide is false) or internally hidden
+    const visibleColumns = (0, react_1.useMemo)(() => {
+        return propsColumns.filter((col) => {
+            const appCol = col;
+            const colId = appCol.id ?? appCol.accessorKey;
+            // Check if column is hidden via prop or internal state
+            return appCol.hide !== true && !hiddenColumnIds.has(colId);
+        });
+    }, [propsColumns, hiddenColumnIds]);
+    // Internal handler to hide column when dragged outside grid
+    const handleInternalColumnHide = (columnId) => {
+        setHiddenColumnIds((prev) => {
+            const newSet = new Set(prev);
+            newSet.add(columnId);
+            return newSet;
+        });
+    };
+    // Columns with internal hidden state applied (for ColumnArrangerDialog)
+    const columnsWithHiddenState = (0, react_1.useMemo)(() => {
+        return propsColumns.map((col) => {
+            const appCol = col;
+            const colId = appCol.id ?? appCol.accessorKey;
+            // If column is internally hidden, mark it as hide: true
+            if (hiddenColumnIds.has(colId)) {
+                return { ...appCol, hide: true };
+            }
+            return appCol;
+        });
+    }, [propsColumns, hiddenColumnIds]);
     const { columns } = (0, useGetRowSelection_1.useGetRowSelection)({
-        defaultColumn: propsColumns,
+        defaultColumn: visibleColumns,
         dynamicRowSelection,
         rowSelection,
     });
@@ -111,7 +147,7 @@ exports.SmartGrid = (0, react_1.forwardRef)(({ defaultGrouping = [], dynamicRowS
         overscan: 20,
     });
     const { columnWidths } = (0, useGetColumnWidth_1.useGetColumnWidth)({
-        columns: propsColumns,
+        columns: visibleColumns,
         headerRef,
         table,
     });
@@ -130,6 +166,51 @@ exports.SmartGrid = (0, react_1.forwardRef)(({ defaultGrouping = [], dynamicRowS
             notifyParentRef.current();
         }
     }, [table.getSelectedRowModel().rows]);
+    // Prevent scrolling during drag
+    (0, react_1.useEffect)(() => {
+        if (!activeDragId || !containerRef.current) {
+            return;
+        }
+        const container = containerRef.current;
+        // Store current scroll position when drag starts
+        const scrollTop = container.scrollTop;
+        const scrollLeft = container.scrollLeft;
+        // Prevent scroll events during drag
+        const preventScroll = (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            // Lock scroll position
+            container.scrollTop = scrollTop;
+            container.scrollLeft = scrollLeft;
+        };
+        // Prevent wheel events (mouse wheel scrolling)
+        const preventWheel = (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+        };
+        // Use capture phase to catch events early
+        container.addEventListener("scroll", preventScroll, {
+            passive: false,
+            capture: true,
+        });
+        container.addEventListener("wheel", preventWheel, {
+            passive: false,
+            capture: true,
+        });
+        container.addEventListener("touchmove", preventScroll, {
+            passive: false,
+            capture: true,
+        });
+        return () => {
+            container.removeEventListener("scroll", preventScroll, {
+                capture: true,
+            });
+            container.removeEventListener("wheel", preventWheel, { capture: true });
+            container.removeEventListener("touchmove", preventScroll, {
+                capture: true,
+            });
+        };
+    }, [activeDragId]);
     const enableSecondRowFilter = (0, react_1.useMemo)(() => {
         return getHeaderGroups().some((headerGroup) => headerGroup.headers.some((header) => {
             const columnDef = header.column.columnDef;
@@ -181,10 +262,10 @@ exports.SmartGrid = (0, react_1.forwardRef)(({ defaultGrouping = [], dynamicRowS
         propsColumns,
         defaultGrouping,
     });
-    return ((0, jsx_runtime_1.jsxs)(CellSelectionContext_1.CellSelectionProvider, { value: {
-            ...cellSelection,
-            enabled: enableCellSelection,
-        }, children: [(0, jsx_runtime_1.jsx)("style", { children: `
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(CellSelectionContext_1.CellSelectionProvider, { value: {
+                    ...cellSelection,
+                    enabled: enableCellSelection,
+                }, children: [(0, jsx_runtime_1.jsx)("style", { children: `
             @keyframes copyFlash {
               0% {
                 background-color: ${butterflyBlue[700]};
@@ -196,69 +277,139 @@ exports.SmartGrid = (0, react_1.forwardRef)(({ defaultGrouping = [], dynamicRowS
                 background-color: ${butterflyBlue[700]};
               }
             }
-          ` }), (0, jsx_runtime_1.jsxs)(core_1.DndContext, { sensors: sensors, collisionDetection: customCollisionDetection, onDragStart: handleDragStart, onDragEnd: handleDragEnd, onDragOver: (event) => {
-                    setActiveDragOver(event.over ? String(event.over.id) : null);
-                }, onDragCancel: () => {
-                    setActiveDragOver(null);
-                    setActiveDragId(null);
-                }, children: [(0, jsx_runtime_1.jsx)(sortable_1.SortableContext, { items: allDraggableIds, children: (0, jsx_runtime_1.jsxs)("div", { style: {
-                                display: "flex",
-                                flexDirection: "column",
-                                height: height || "calc(100vh - 100px)",
-                                position: "relative",
-                            }, onMouseUp: endCellSelection, children: [hasGroupableColumns && ((0, jsx_runtime_1.jsx)(GroupedPanel_1.GroupedPanel, { groupedColumns: currentGrouping, onRemoveGroup: handleRemoveGroup, table: table, defaultGrouping: defaultGrouping })), (0, jsx_runtime_1.jsx)("div", { ref: containerRef, style: {
-                                        border: `1px solid ${theme.palette.divider}`,
-                                        flexGrow: 1,
-                                        height: "100%",
-                                        overflow: "auto",
+          ` }), (0, jsx_runtime_1.jsxs)(core_1.DndContext, { sensors: sensors, collisionDetection: customCollisionDetection, onDragStart: (event) => {
+                            handleDragStart(event);
+                            setIsOutsideGrid(false);
+                        }, onDragEnd: (event) => {
+                            // Check if dropped outside grid and should hide the column
+                            if (isOutsideGrid && activeDragId) {
+                                const groupingArray = currentGrouping;
+                                const isGroupedChip = groupingArray.includes(activeDragId);
+                                // Only hide column headers, not grouped chips
+                                if (!isGroupedChip) {
+                                    handleInternalColumnHide(activeDragId);
+                                }
+                            }
+                            handleDragEnd(event);
+                            setIsOutsideGrid(false);
+                        }, onDragMove: (event) => {
+                            // Check if drag is outside the grid container
+                            if (gridContainerRef.current && event.active) {
+                                const gridRect = gridContainerRef.current.getBoundingClientRect();
+                                const pointerX = event.activatorEvent.clientX +
+                                    (event.delta?.x ?? 0);
+                                const pointerY = event.activatorEvent.clientY +
+                                    (event.delta?.y ?? 0);
+                                const isOutside = pointerX < gridRect.left ||
+                                    pointerX > gridRect.right ||
+                                    pointerY < gridRect.top ||
+                                    pointerY > gridRect.bottom;
+                                // Don't show hide icon when over grouping panel
+                                const isOverGroupPanel = event.over?.id === "grouping-panel";
+                                setIsOutsideGrid(isOutside && !isOverGroupPanel);
+                            }
+                        }, onDragOver: (event) => {
+                            setActiveDragOver(event.over ? String(event.over.id) : null);
+                        }, onDragCancel: () => {
+                            setActiveDragOver(null);
+                            setActiveDragId(null);
+                            setIsOutsideGrid(false);
+                        }, children: [(0, jsx_runtime_1.jsx)(sortable_1.SortableContext, { items: allDraggableIds, children: (0, jsx_runtime_1.jsxs)("div", { ref: gridContainerRef, style: {
+                                        display: "flex",
+                                        flexDirection: "column",
+                                        height: height || "calc(100vh - 100px)",
                                         position: "relative",
-                                    }, children: (0, jsx_runtime_1.jsxs)("table", { style: {
-                                            borderCollapse: "separate",
-                                            borderSpacing: 0,
-                                            fontFamily: "arial, sans-serif",
-                                            minHeight: "100%",
-                                            tableLayout: "fixed",
-                                            width: "100%",
-                                        }, children: [(0, jsx_runtime_1.jsx)("thead", { ref: headerRef, style: {
-                                                    position: "sticky",
-                                                    top: 0,
-                                                    zIndex: 10,
-                                                }, children: swipeableColumns ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: headerGroups.map((headerGroup) => {
-                                                        const filteredHeaderGroup = {
-                                                            ...headerGroup,
-                                                            headers: filterHeaders(headerGroup.headers, currentGrouping),
-                                                        };
-                                                        return ((0, jsx_runtime_1.jsx)(DraggableHeaderGroupRows_1.DraggableHeaderGroupRows, { defaultGrouping: defaultGrouping, enableSecondRowFilter: enableSecondRowFilter, headerGroup: filteredHeaderGroup, isHeaderReorderable: isHeaderReorderable, loading: loading, resetAllFilters: resetAllFilters, swipeableColumns: swipeableColumns }, headerGroup.id));
-                                                    }) })) : (headerGroups.map((headerGroup) => {
-                                                    const allHeaders = filterHeaders(headerGroup.headers, currentGrouping);
-                                                    const leftPinnedHeaders = allHeaders.filter((h) => h.column.getIsPinned() === "left");
-                                                    const centerHeaders = allHeaders.filter((h) => !h.column.getIsPinned());
-                                                    const rightPinnedHeaders = allHeaders.filter((h) => h.column.getIsPinned() === "right");
-                                                    // Helper to check if header can be grouped and should be draggable
-                                                    // Only columns with enableGrouping: true should be draggable to group area
-                                                    const isGroupable = (header) => {
-                                                        const columnDef = header.column
-                                                            .columnDef;
-                                                        return columnDef.enableGrouping === true;
-                                                    };
-                                                    const headerRow = ((0, jsx_runtime_1.jsxs)("tr", { children: [leftPinnedHeaders.map((header) => ((0, jsx_runtime_1.jsx)(HeaderCell_1.HeaderCell, { defaultGrouping: defaultGrouping, header: header, loading: loading, resetAllFilters: resetAllFilters }, header.id))), centerHeaders.map((header) => {
-                                                                // Make groupable headers draggable so they can be dragged to grouping panel
-                                                                const canGroup = isGroupable(header);
-                                                                return canGroup ? ((0, jsx_runtime_1.jsx)(DraggableHeaderCell_1.DraggableHeaderCell, { defaultGrouping: defaultGrouping, header: header, loading: loading, resetAllFilters: resetAllFilters }, header.id)) : ((0, jsx_runtime_1.jsx)(HeaderCell_1.HeaderCell, { defaultGrouping: defaultGrouping, header: header, loading: loading, resetAllFilters: resetAllFilters }, header.id));
-                                                            }), rightPinnedHeaders.map((header) => ((0, jsx_runtime_1.jsx)(HeaderCell_1.HeaderCell, { defaultGrouping: defaultGrouping, header: header, loading: loading, resetAllFilters: resetAllFilters }, header.id)))] }, `${headerGroup.id}-row`));
-                                                    return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [headerRow, enableSecondRowFilter && !loading && ((0, jsx_runtime_1.jsx)("tr", { children: allHeaders.map((header) => ((0, jsx_runtime_1.jsx)(SearchFilterRow_1.SearchFilterRow, { header: header, resetAllFilters: resetAllFilters }, header.id))) }))] }, headerGroup.id));
-                                                })) }), (0, jsx_runtime_1.jsx)("tbody", { style: {
-                                                    filter: loading ? "blur(2px)" : "none",
-                                                    height: `${rowVirtualizer.getTotalSize()}px`,
-                                                    position: "relative",
-                                                    transition: "filter 0.2s ease-in-out",
-                                                }, children: rowVirtualizer.getVirtualItems().map((virtualRow) => {
-                                                    const enhancedRow = enhancedRows[virtualRow.index];
-                                                    if (!enhancedRow) {
-                                                        return null;
-                                                    }
-                                                    const { groupId, isSummary, row, summaryData } = enhancedRow;
-                                                    return ((0, jsx_runtime_1.jsx)(TableRowComponent_1.TableRowComponent, { columnWidths: columnWidths, row: row, index: virtualRow.index, virtualRow: virtualRow, rowHeight: rowHeight, isSummaryRow: isSummary, summaryData: summaryData, exportData: exportData, exportActions: exportActions, grouping: currentGrouping }, `table-row-${virtualRow.index}-${isSummary ? "summary" : "normal"}-${groupId}`));
-                                                }) }), !loading && summary && ((0, jsx_runtime_1.jsx)(TableFooterComponent_1.TableFooterComponent, { table: table, summary: summary }))] }) }), rowSelection && getSelectedRowModel().rows.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { style: { fontSize: "14px" }, children: ["Selected Rows: ", getSelectedRowModel().rows.length] })), (0, jsx_runtime_1.jsx)(FilterStatusPanel_1.FilterStatusPanel, { table: table, clearAllFilters: clearAllFilters }), loading && (0, jsx_runtime_1.jsx)(CircularLoader_1.CircularLoader, {}), !rows.length && !loading && ((0, jsx_runtime_1.jsx)(DataNotFound_1.DataNotFound, { message: emptyMessage }))] }) }), (0, jsx_runtime_1.jsx)(GroupAreaOverlay_1.GroupAreaOverlay, { activeDragId: activeDragId, activeDragOver: activeDragOver, table: table, defaultGrouping: defaultGrouping })] })] }));
+                                    }, onMouseUp: endCellSelection, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                                                display: "flex",
+                                                gap: 10,
+                                                justifyContent: "center",
+                                                alignItems: "center",
+                                                backgroundColor: "white",
+                                            }, children: [hasGroupableColumns && ((0, jsx_runtime_1.jsx)(GroupedPanel_1.GroupedPanel, { groupedColumns: currentGrouping, onRemoveGroup: handleRemoveGroup, table: table, defaultGrouping: defaultGrouping })), columnArranger && ((0, jsx_runtime_1.jsx)("div", { style: {
+                                                        cursor: "pointer",
+                                                        display: "flex",
+                                                        alignItems: "center",
+                                                        justifyContent: "center",
+                                                        borderRadius: "5px",
+                                                        border: "1px solid",
+                                                        width: "25px",
+                                                        height: "25px",
+                                                        marginRight: "10px",
+                                                    }, children: (0, jsx_runtime_1.jsx)(iconoir_react_1.ReportColumns, { width: 20, height: 20, onClick: () => {
+                                                            setShowColumnChooser(true);
+                                                        } }) }))] }), (0, jsx_runtime_1.jsx)("div", { ref: containerRef, style: {
+                                                border: `1px solid ${theme.palette.divider}`,
+                                                flexGrow: 1,
+                                                height: "100%",
+                                                overflow: activeDragId ? "hidden" : "auto",
+                                                position: "relative",
+                                                pointerEvents: activeDragId ? "none" : "auto",
+                                                touchAction: activeDragId ? "none" : "auto",
+                                            }, children: (0, jsx_runtime_1.jsxs)("table", { style: {
+                                                    borderCollapse: "separate",
+                                                    borderSpacing: 0,
+                                                    fontFamily: "arial, sans-serif",
+                                                    minHeight: "100%",
+                                                    tableLayout: "fixed",
+                                                    width: "100%",
+                                                }, children: [(0, jsx_runtime_1.jsx)("thead", { ref: headerRef, style: {
+                                                            position: "sticky",
+                                                            top: 0,
+                                                            zIndex: 10,
+                                                        }, children: swipeableColumns ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: headerGroups.map((headerGroup) => {
+                                                                const filteredHeaderGroup = {
+                                                                    ...headerGroup,
+                                                                    headers: filterHeaders(headerGroup.headers, currentGrouping),
+                                                                };
+                                                                return ((0, jsx_runtime_1.jsx)(DraggableHeaderGroupRows_1.DraggableHeaderGroupRows, { defaultGrouping: defaultGrouping, enableSecondRowFilter: enableSecondRowFilter, headerGroup: filteredHeaderGroup, isHeaderReorderable: isHeaderReorderable, loading: loading, resetAllFilters: resetAllFilters, swipeableColumns: swipeableColumns }, headerGroup.id));
+                                                            }) })) : (headerGroups.map((headerGroup) => {
+                                                            const allHeaders = filterHeaders(headerGroup.headers, currentGrouping);
+                                                            const leftPinnedHeaders = allHeaders.filter((h) => h.column.getIsPinned() === "left");
+                                                            const centerHeaders = allHeaders.filter((h) => !h.column.getIsPinned());
+                                                            const rightPinnedHeaders = allHeaders.filter((h) => h.column.getIsPinned() === "right");
+                                                            // Helper to check if header can be grouped and should be draggable
+                                                            // Only columns with enableGrouping: true should be draggable to group area
+                                                            const isGroupable = (header) => {
+                                                                const columnDef = header.column
+                                                                    .columnDef;
+                                                                return columnDef.enableGrouping === true;
+                                                            };
+                                                            const headerRow = ((0, jsx_runtime_1.jsxs)("tr", { children: [leftPinnedHeaders.map((header) => ((0, jsx_runtime_1.jsx)(HeaderCell_1.HeaderCell, { defaultGrouping: defaultGrouping, header: header, loading: loading, resetAllFilters: resetAllFilters }, header.id))), centerHeaders.map((header) => {
+                                                                        // Make groupable headers draggable so they can be dragged to grouping panel
+                                                                        const canGroup = isGroupable(header);
+                                                                        return canGroup ? ((0, jsx_runtime_1.jsx)(DraggableHeaderCell_1.DraggableHeaderCell, { defaultGrouping: defaultGrouping, header: header, loading: loading, resetAllFilters: resetAllFilters }, header.id)) : ((0, jsx_runtime_1.jsx)(HeaderCell_1.HeaderCell, { defaultGrouping: defaultGrouping, header: header, loading: loading, resetAllFilters: resetAllFilters }, header.id));
+                                                                    }), rightPinnedHeaders.map((header) => ((0, jsx_runtime_1.jsx)(HeaderCell_1.HeaderCell, { defaultGrouping: defaultGrouping, header: header, loading: loading, resetAllFilters: resetAllFilters }, header.id)))] }, `${headerGroup.id}-row`));
+                                                            return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [headerRow, enableSecondRowFilter && !loading && ((0, jsx_runtime_1.jsx)("tr", { children: allHeaders.map((header) => ((0, jsx_runtime_1.jsx)(SearchFilterRow_1.SearchFilterRow, { header: header, resetAllFilters: resetAllFilters }, header.id))) }))] }, headerGroup.id));
+                                                        })) }), (0, jsx_runtime_1.jsx)("tbody", { style: {
+                                                            filter: loading ? "blur(2px)" : "none",
+                                                            height: `${rowVirtualizer.getTotalSize()}px`,
+                                                            position: "relative",
+                                                            transition: "filter 0.2s ease-in-out",
+                                                        }, children: rowVirtualizer.getVirtualItems().map((virtualRow) => {
+                                                            const enhancedRow = enhancedRows[virtualRow.index];
+                                                            if (!enhancedRow) {
+                                                                return null;
+                                                            }
+                                                            const { groupId, isSummary, row, summaryData } = enhancedRow;
+                                                            return ((0, jsx_runtime_1.jsx)(TableRowComponent_1.TableRowComponent, { columnWidths: columnWidths, row: row, index: virtualRow.index, virtualRow: virtualRow, rowHeight: rowHeight, isSummaryRow: isSummary, summaryData: summaryData, exportData: exportData, exportActions: exportActions, grouping: currentGrouping }, `table-row-${virtualRow.index}-${isSummary ? "summary" : "normal"}-${groupId}`));
+                                                        }) }), !loading && summary && ((0, jsx_runtime_1.jsx)(TableFooterComponent_1.TableFooterComponent, { table: table, summary: summary }))] }) }), rowSelection && getSelectedRowModel().rows.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { style: { fontSize: "14px" }, children: ["Selected Rows: ", getSelectedRowModel().rows.length] })), (0, jsx_runtime_1.jsx)(FilterStatusPanel_1.FilterStatusPanel, { table: table, clearAllFilters: clearAllFilters }), loading && (0, jsx_runtime_1.jsx)(CircularLoader_1.CircularLoader, {}), !rows.length && !loading && ((0, jsx_runtime_1.jsx)(DataNotFound_1.DataNotFound, { message: emptyMessage }))] }) }), (0, jsx_runtime_1.jsx)(GroupAreaOverlay_1.GroupAreaOverlay, { activeDragId: activeDragId, activeDragOver: activeDragOver, table: table, defaultGrouping: defaultGrouping, isOutsideGrid: isOutsideGrid, currentGrouping: currentGrouping })] })] }), columnArranger && ((0, jsx_runtime_1.jsx)(ColumnArrangerDialog_1.ColumnArrangerDialog, { open: showColumnChooser, onClose: () => {
+                    setShowColumnChooser(false);
+                }, columns: columnsWithHiddenState, grouping: currentGrouping, onSave: (savedColumns) => {
+                    // Sync internal hidden state with saved columns
+                    // Note: In the form, hide is inverted (hide: true means visible, hide: false means hidden)
+                    // So we need to add columns where hide is FALSE (meaning they should be hidden)
+                    setHiddenColumnIds(() => {
+                        const newHiddenIds = new Set();
+                        Object.entries(savedColumns).forEach(([colId, colConfig]) => {
+                            // hide: false in saved result means column should be hidden
+                            if (!colConfig.hide) {
+                                newHiddenIds.add(colId);
+                            }
+                        });
+                        return newHiddenIds;
+                    });
+                    onApplyColumnArranger?.(savedColumns);
+                    setShowColumnChooser(false);
+                } }))] }));
 });
 exports.SmartGrid.displayName = "SmartGrid";

package/packages/shared-components/dist/SmartGrid/hooks/useGetColumnWidth.d.ts

@@ -1,8 +1,9 @@
 import type { Table } from "@tanstack/react-table";
+import { type RefObject } from "react";
 import type { AppColumnDef } from "../types";
 type UseGetColumnWidthProps<T> = {
     columns: AppColumnDef<T>[];
-    headerRef: React.RefObject<HTMLTableSectionElement>;
+    headerRef: RefObject<HTMLTableSectionElement>;
     table: Table<T>;
 };
 export declare const useGetColumnWidth: <T>({ columns, headerRef, table, }: UseGetColumnWidthProps<T>) => {

package/packages/shared-components/dist/SmartGrid/hooks/useGetColumnWidth.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useGetColumnWidth.d.ts","sourceRoot":"","sources":["../../../src/SmartGrid/hooks/useGetColumnWidth.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAEnD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAE7C,KAAK,sBAAsB,CAAC,CAAC,IAAI;IAC/B,OAAO,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;IAC3B,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,uBAAuB,CAAC,CAAC;IACpD,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC;CACjB,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,CAAC,EAAE,gCAIlC,sBAAsB,CAAC,CAAC,CAAC;;CA4E3B,CAAC"}
+{"version":3,"file":"useGetColumnWidth.d.ts","sourceRoot":"","sources":["../../../src/SmartGrid/hooks/useGetColumnWidth.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAoC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACzE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAE7C,KAAK,sBAAsB,CAAC,CAAC,IAAI;IAC/B,OAAO,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;IAC3B,SAAS,EAAE,SAAS,CAAC,uBAAuB,CAAC,CAAC;IAC9C,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC;CACjB,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,CAAC,EAAE,gCAIlC,sBAAsB,CAAC,CAAC,CAAC;;CA4E3B,CAAC"}

package/packages/shared-components/dist/SmartGrid/hooks/useGetGroupedColumn.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useGetGroupedColumn.d.ts","sourceRoot":"","sources":["../../../src/SmartGrid/hooks/useGetGroupedColumn.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,kBAAkB,EAClB,cAAc,EACd,YAAY,EACb,MAAM,eAAe,CAAC;AAGvB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAItE,KAAK,wBAAwB,CAAC,CAAC,IAAI;IACjC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC;IAChB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,eAAe,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC7C,eAAe,EAAE,MAAM,EAAE,CAAC;IAC1B,mBAAmB,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IACnD,aAAa,EAAE,CACb,OAAO,EAAE,MAAM,CAAC,CAAC,EAAE,OAAO,CAAC,EAAE,EAC7B,QAAQ,EAAE,MAAM,EAAE,KACf,MAAM,CAAC,CAAC,EAAE,OAAO,CAAC,EAAE,CAAC;IAC1B,mBAAmB,EAAE,CACnB,MAAM,EAAE,MAAM,CAAC,CAAC,EAAE,OAAO,CAAC,EAC1B,gBAAgB,EAAE,OAAO,KACtB,OAAO,CAAC;IACb,YAAY,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;IAC7B,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC;CACjC,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,CAAC,EAAE,wJAUpC,wBAAwB,CAAC,CAAC,CAAC;2BA6ElB,YAAY;6BANsB,cAAc;kCAhE7C,MAAM;;;;CA2OpB,CAAC"}
+{"version":3,"file":"useGetGroupedColumn.d.ts","sourceRoot":"","sources":["../../../src/SmartGrid/hooks/useGetGroupedColumn.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,kBAAkB,EAClB,cAAc,EACd,YAAY,EACb,MAAM,eAAe,CAAC;AAGvB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAItE,KAAK,wBAAwB,CAAC,CAAC,IAAI;IACjC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC;IAChB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,eAAe,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC7C,eAAe,EAAE,MAAM,EAAE,CAAC;IAC1B,mBAAmB,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IACnD,aAAa,EAAE,CACb,OAAO,EAAE,MAAM,CAAC,CAAC,EAAE,OAAO,CAAC,EAAE,EAC7B,QAAQ,EAAE,MAAM,EAAE,KACf,MAAM,CAAC,CAAC,EAAE,OAAO,CAAC,EAAE,CAAC;IAC1B,mBAAmB,EAAE,CACnB,MAAM,EAAE,MAAM,CAAC,CAAC,EAAE,OAAO,CAAC,EAC1B,gBAAgB,EAAE,OAAO,KACtB,OAAO,CAAC;IACb,YAAY,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;IAC7B,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC;CACjC,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,CAAC,EAAE,wJAUpC,wBAAwB,CAAC,CAAC,CAAC;2BAmFlB,YAAY;6BANsB,cAAc;kCAtE7C,MAAM;;;;CAiPpB,CAAC"}

package/packages/shared-components/dist/SmartGrid/hooks/useGetGroupedColumn.js

@@ -40,6 +40,10 @@ const useGetGroupedColumn = ({ table, swipeableColumns, setActiveDragId, current
         if (isAlreadyGrouped) {
             return false;
         }
+        const MAX_GROUPING_COLUMNS = 4;
+        if (groupingArray.length >= MAX_GROUPING_COLUMNS) {
+            return false;
+        }
         const groupingId = accessorKey ?? activeId;
         setGrouping([...groupingArray, groupingId]);
         return true;

package/packages/shared-components/dist/SmartGrid/hooks/useTableState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTableState.d.ts","sourceRoot":"","sources":["../../../src/SmartGrid/hooks/useTableState.ts"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAG/C,eAAO,MAAM,aAAa,GAAI,CAAC,EAAE,OAAO,cAAc,CAAC,CAAC,CAAC;;CA0JxD,CAAC"}
+{"version":3,"file":"useTableState.d.ts","sourceRoot":"","sources":["../../../src/SmartGrid/hooks/useTableState.ts"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE/C,eAAO,MAAM,aAAa,GAAI,CAAC,EAAE,OAAO,cAAc,CAAC,CAAC,CAAC;;CAmJxD,CAAC"}

package/packages/shared-components/dist/SmartGrid/hooks/useTableState.js

@@ -5,18 +5,12 @@ const react_table_1 = require("@tanstack/react-table");
 const react_1 = require("react");
 const useGetFacetedFilter_1 = require("./useGetFacetedFilter");
 const useGetPinningColumns_1 = require("./useGetPinningColumns");
-const useProcessColumnsForGroupDisplay_1 = require("./useProcessColumnsForGroupDisplay");
 const useTableState = (props) => {
     const { columns, data } = props;
     const [sorting, setSorting] = (0, react_1.useState)([]);
     const [grouping, setGrouping] = (0, react_1.useState)(props.defaultGrouping ?? []);
-    // Process columns for single group column display when grouping is enabled
-    const { processedColumns: groupProcessedColumns } = (0, useProcessColumnsForGroupDisplay_1.useProcessColumnsForGroupDisplay)({
-        columns,
-        grouping: grouping,
-    });
     const { combinedFilter, dateRangeFilter, includesSome, processedColumns } = (0, useGetFacetedFilter_1.useGetFacetedFilter)({
-        columns: groupProcessedColumns,
+        columns,
     });
     const [expanded, setExpanded] = (0, react_1.useState)(true);
     const [rowSelection, setRowSelection] = (0, react_1.useState)({});