@visns-studio/visns-components 6.6.3 → 6.15.0

package/src/components/DataGrid.jsx

@@ -30,6 +30,7 @@ import React, {
     useState,
 } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
+import { buildEnv } from './utils/buildEnv';
 import debounce from 'lodash.debounce';
 import moment from 'moment';
 import 'reactjs-popup/dist/index.css';
@@ -43,7 +44,11 @@ import NativeDateFilterEditor from './columns/NativeDateFilterEditor';
 import { toast } from 'react-toastify';
 import fetchUtil from '../utils/fetchUtil';
 import { confirmDialog } from './utils/ConfirmDialog';
-import { useDensity } from './utils/useDensity';
+import {
+    useDensity,
+    useAvailableHeight,
+    rowsForHeight,
+} from './utils/useDensity';
 import { DEFAULT_INTELLIGENT_SORTING_CONFIG } from '../utils/relationshipSortingUtils';
 import {
     extractColumnsMetadata,
@@ -144,6 +149,7 @@ import {
     renderPhoneColumn,
     renderAbnColumn,
 } from './columns/ColumnRenderers.jsx';
+import AutoGrowCell from './columns/AutoGrowCell.jsx';
 import _ from 'lodash';
 
 // Enhanced multi-line content support for data cells
@@ -872,6 +878,22 @@ const DataGrid = forwardRef(
             debugLog('[DataGrid] Initial limit set to:', initialLimit);
             return initialLimit;
         });
+
+        // Set the moment the user picks a size from the pager's "Results per
+        // page" control. From then on nothing auto-sizes the page behind their
+        // back — not the profile default, not a window resize. Deliberately a
+        // ref rather than state: it must not itself trigger a re-render, and
+        // the sizing effect reads it without wanting to re-run when it flips.
+        const userChoseLimitRef = useRef(false);
+        // The current limit, readable from the sizing effect without listing
+        // `limit` as a dependency (which would re-run it on every page change).
+        const limitRef = useRef(limit);
+        limitRef.current = limit;
+
+        const handleLimitChange = useCallback((next) => {
+            userChoseLimitRef.current = true;
+            setLimit(next);
+        }, []);
         const [search, setSearch] = useState('');
 
         // This component instance survives client-side route changes — React Router
@@ -906,8 +928,12 @@ const DataGrid = forwardRef(
                 userProfile_settings_rows_per_page: userProfile?.settings?.rows_per_page,
                 currentLimit: limit,
             });
-            // Only apply the user's preference once, when userProfile first becomes available
-            if (!initialLimitApplied.current) {
+            // Only apply the user's preference once, when userProfile first
+            // becomes available — and never over a size the user has picked
+            // from the pager since. This seeds the limit for the first fetch;
+            // the sizing effect below replaces it as soon as the grid has
+            // measured itself against the window.
+            if (!initialLimitApplied.current && !userChoseLimitRef.current) {
                 const userLimit = userProfile?.rows_per_page || userProfile?.settings?.rows_per_page;
                 debugLog('[DataGrid] Checking userLimit:', userLimit);
                 if (userLimit && userLimit > 0) {
@@ -959,6 +985,197 @@ const DataGrid = forwardRef(
         // prevents action buttons from being clipped.
         const { grid } = useDensity();
 
+        // ---------------------------------------------------------------
+        // Per-column autoGrow
+        // ---------------------------------------------------------------
+        //
+        // A column with `"autoGrow": true` lets the ROWS whose content does
+        // not fit the fixed height above grow to fit — and only those rows.
+        // Nothing here runs unless such a column exists AND the density gives
+        // a numeric `grid.rowHeight`; on desktop (`rowHeight === null`) the
+        // grid already measures every row, so autoGrow has nothing to add.
+        //
+        // Why this drives the grid's RowHeightManager instead of passing
+        // `rowHeight` as a function: the datagrid's types advertise
+        // `rowHeight: number | ((rowIndex) => number) | null`, but in this
+        // fork the function form is not implemented. `RowHeightManager`
+        // stores it as `rowHeightFn` and never reads it again, and
+        // `factory.tsx` derives `naturalRowHeight: typeof props.rowHeight !==
+        // 'number'` — so a function rowHeight silently turns on exactly the
+        // lazy per-row rAF measurement the fixed height exists to avoid.
+        //
+        // What IS implemented is the manager's per-index override map: every
+        // row's height comes from `rowHeightManager.getRowHeight(index)`
+        // (packages/react-virtual-list-pro/src/Row.tsx), which reads that map
+        // first and falls back to the fixed height; `setHeights(map)`
+        // re-indexes the offsets and emits `index`, which `VirtualList`
+        // listens for and answers with a full re-layout. The cells follow the
+        // row because Content/Row.tsx passes the row's own height down as the
+        // cell's `initialRowHeight` on unexpanded rows, so a grown row's other
+        // cells and its action buttons stay vertically centred in the taller
+        // box exactly as they are today.
+        //
+        // Heights are keyed by ROW ID (stable across sorting, filtering and
+        // virtualised scrolling) and only converted to the manager's
+        // index-keyed map at flush time, from the grid's own computed data —
+        // which includes group rows, so indexes stay right under groupBy/tree.
+        const autoGrowHeightsRef = useRef(new Map());
+        const autoGrowRowIndexRef = useRef(new Map());
+        const autoGrowAppliedRef = useRef(null);
+        const autoGrowRafRef = useRef(0);
+
+        const flushAutoGrowHeights = useCallback(() => {
+            autoGrowRafRef.current = 0;
+
+            const gridApi = gridRef.current;
+            const manager = gridApi?.rowHeightManager;
+            const baseRowHeight = grid.rowHeight;
+
+            if (!manager || typeof baseRowHeight !== 'number') {
+                return;
+            }
+
+            const heights = autoGrowHeightsRef.current;
+            const next = {};
+
+            // The grid's computed data is the authority on index → row: it is
+            // the array the virtual list indexes into, group rows included.
+            // The `onRenderRow` record is only a fallback for the frame
+            // before `handle` has published the computed props.
+            const data = Array.isArray(gridApi?.data) ? gridApi.data : null;
+
+            if (data) {
+                const present = new Set();
+
+                for (let index = 0; index < data.length; index++) {
+                    const row = data[index];
+
+                    // Group rows keep the default height — they carry a title,
+                    // not a column's content.
+                    if (!row || row.__group) {
+                        continue;
+                    }
+
+                    const rowId = row.id;
+
+                    if (rowId === undefined || rowId === null) {
+                        continue;
+                    }
+
+                    const key = String(rowId);
+
+                    present.add(key);
+
+                    const measured = heights.get(key);
+
+                    if (measured > baseRowHeight) {
+                        next[index] = measured;
+                    }
+                }
+
+                // Rows that left the page cannot be measured again, so drop
+                // their heights rather than letting the map grow forever.
+                heights.forEach((_value, key) => {
+                    if (!present.has(key)) {
+                        heights.delete(key);
+                    }
+                });
+            } else {
+                autoGrowRowIndexRef.current.forEach((key, index) => {
+                    const measured = heights.get(key);
+
+                    if (measured > baseRowHeight) {
+                        next[index] = measured;
+                    }
+                });
+            }
+
+            // setHeights re-indexes and emits, and the re-layout re-renders
+            // the rows — which measures them again. Applying an unchanged map
+            // would therefore loop, so compare before writing.
+            const serialised = JSON.stringify(next);
+
+            if (serialised === autoGrowAppliedRef.current) {
+                return;
+            }
+
+            autoGrowAppliedRef.current = serialised;
+
+            if (typeof manager.setHeights === 'function') {
+                manager.setHeights(next);
+            }
+        }, [grid]);
+
+        // One flush per frame: a page of 100 rows measuring on mount is 100
+        // reports and one re-layout.
+        const scheduleAutoGrowFlush = useCallback(() => {
+            if (autoGrowRafRef.current) {
+                return;
+            }
+
+            if (typeof requestAnimationFrame === 'undefined') {
+                flushAutoGrowHeights();
+                return;
+            }
+
+            autoGrowRafRef.current =
+                requestAnimationFrame(flushAutoGrowHeights);
+        }, [flushAutoGrowHeights]);
+
+        /** `AutoGrowCell`'s callback: one row's natural height, in px. */
+        const reportAutoGrowHeight = useCallback(
+            (rowId, height, force) => {
+                if (
+                    rowId === undefined ||
+                    rowId === null ||
+                    !Number.isFinite(height)
+                ) {
+                    return;
+                }
+
+                const key = String(rowId);
+                const previous = autoGrowHeightsRef.current.get(key);
+                const changed =
+                    previous === undefined || Math.abs(previous - height) > 1;
+
+                if (changed) {
+                    autoGrowHeightsRef.current.set(key, height);
+                }
+
+                // `force` covers the mount/row-changed case: the height may be
+                // identical while the INDEX it has to be applied at is not.
+                if (changed || force) {
+                    scheduleAutoGrowFlush();
+                }
+            },
+            [scheduleAutoGrowFlush]
+        );
+
+        useEffect(
+            () => () => {
+                if (
+                    autoGrowRafRef.current &&
+                    typeof cancelAnimationFrame !== 'undefined'
+                ) {
+                    cancelAnimationFrame(autoGrowRafRef.current);
+                    autoGrowRafRef.current = 0;
+                }
+            },
+            []
+        );
+
+        // Leaving the fixed-height densities hands row heights back to the
+        // grid; anything measured under the old density is meaningless.
+        useEffect(() => {
+            if (typeof grid.rowHeight === 'number') {
+                return;
+            }
+
+            autoGrowHeightsRef.current.clear();
+            autoGrowRowIndexRef.current.clear();
+            autoGrowAppliedRef.current = null;
+        }, [grid]);
+
         // Effect to handle autoRefresh setting
         useEffect(() => {
             if (ajaxSetting && ajaxSetting.autoRefresh !== undefined) {
@@ -1921,7 +2138,11 @@ const DataGrid = forwardRef(
             }
 
             // Show confirmation dialog for other actions to prevent accidental clicks
-            const confirmMessage = `Are you sure you want to perform "${iconConfig.label}" action on group "${groupValue}" (${groupRows.length} rows)?`;
+            const confirmMessage = `Are you sure you want to perform "${
+                iconConfig.label
+            }" action on group "${getGroupDisplayLabel(groupValue)}" (${
+                groupRows.length
+            } rows)?`;
 
             confirmDialog({
                 title: 'Confirm Group Action',
@@ -1959,6 +2180,28 @@ const DataGrid = forwardRef(
             );
         };
 
+        /**
+         * `groupBySetting.labelKey` is display-only: when set, the group row
+         * shows the named field taken from the group's first row instead of
+         * the raw group value (falling back to it when the field is empty).
+         * The group KEY is still `groupValue` — it decides membership,
+         * selection, collapse state, `handleGroupAction`/`shouldShowGroupAction`
+         * and what the backend receives (`groupLabel`).
+         */
+        const getGroupDisplayLabel = (groupValue) => {
+            const labelKey = ajaxSetting?.groupBySetting?.labelKey;
+
+            if (!labelKey) {
+                return groupValue;
+            }
+
+            const label = getGroupRows(groupValue)[0]?.[labelKey];
+
+            return label === null || label === undefined || label === ''
+                ? groupValue
+                : label;
+        };
+
         /**
          * The show-condition grammar shared by group action icons and row
          * action icons:
@@ -2096,7 +2339,9 @@ const DataGrid = forwardRef(
                         iconConfig.fetch.messageFromResponse &&
                             result?.data?.message
                             ? result.data.message
-                            : `${iconConfig.label} - Group: ${groupValue} completed successfully`
+                            : `${iconConfig.label} - Group: ${getGroupDisplayLabel(
+                                  groupValue
+                              )} completed successfully`
                     );
 
                     // Reload grid data if needed
@@ -2113,7 +2358,9 @@ const DataGrid = forwardRef(
                 } catch (error) {
                     console.error('Group action fetch error:', error);
                     toast.error(
-                        `${iconConfig.label} - Group: ${groupValue} failed: ${error.message}`
+                        `${iconConfig.label} - Group: ${getGroupDisplayLabel(
+                            groupValue
+                        )} failed: ${error.message}`
                     );
                 }
             } else if (iconConfig.formModal) {
@@ -2137,7 +2384,11 @@ const DataGrid = forwardRef(
                 // Fallback to existing switch logic if no fetch config
                 // Skip toast notification for edit actions
                 if (iconConfig.id !== 'edit') {
-                    toast.info(`${iconConfig.label} - Group: ${groupValue}`);
+                    toast.info(
+                        `${iconConfig.label} - Group: ${getGroupDisplayLabel(
+                            groupValue
+                        )}`
+                    );
                 }
 
                 switch (iconConfig.id) {
@@ -2684,6 +2935,26 @@ const DataGrid = forwardRef(
 
         const onRenderRow = useCallback(
             (rowProps) => {
+                // Index → row id, the fallback map autoGrow flushes from
+                // before the grid has published its computed data (see the
+                // autoGrow block above). Group rows are skipped: they keep the
+                // default height.
+                const autoGrowIndex =
+                    rowProps?.rowIndex ?? rowProps?.realIndex;
+
+                if (
+                    typeof autoGrowIndex === 'number' &&
+                    rowProps?.data &&
+                    !rowProps.data.__group &&
+                    rowProps.data.id !== undefined &&
+                    rowProps.data.id !== null
+                ) {
+                    autoGrowRowIndexRef.current.set(
+                        autoGrowIndex,
+                        String(rowProps.data.id)
+                    );
+                }
+
                 // save the original handlers to be called later
                 const { onClick } = rowProps;
 
@@ -2853,10 +3124,10 @@ const DataGrid = forwardRef(
 
         const handleCoding = (c, data) => {
             const icons = [];
-            const assetPath =
-                import.meta.env.REACT_APP_ASSET_PATH !== undefined
-                    ? import.meta.env.REACT_APP_ASSET_PATH
-                    : '';
+            // Read through buildEnv, not import.meta.env directly: the
+            // latter is Vite's interface and throws a TypeError under
+            // webpack, which took the whole grid down in the Next.js portal.
+            const assetPath = buildEnv('REACT_APP_ASSET_PATH', '');
 
             const addIcon = (src, icon, alt, tooltipContent, key) => {
                 if (src && src !== '') {
@@ -4594,16 +4865,91 @@ const DataGrid = forwardRef(
                         };
                     };
 
+                    /**
+                     * `"autoGrow": true` on a column definition.
+                     *
+                     * Opt-in, and only meaningful where the grid runs at a
+                     * fixed row height — on desktop (`grid.rowHeight === null`)
+                     * rows already measure naturally, so this returns the
+                     * column untouched and the code path below is the one that
+                     * has always run.
+                     *
+                     * Outermost decorator on purpose: it has to measure the
+                     * FINAL content of the cell, including the tree indent and
+                     * any row-action icons the decorators below add.
+                     */
+                    const decorateAutoGrow = (gridColumn, columnDef) => {
+                        if (
+                            columnDef?.autoGrow !== true ||
+                            typeof grid.rowHeight !== 'number' ||
+                            !gridColumn
+                        ) {
+                            return gridColumn;
+                        }
+
+                        const originalRender = gridColumn.render;
+                        const existingClassName = gridColumn.className;
+
+                        // The class relaxes the nowrap/ellipsis clamp that
+                        // global-datagrid.css puts on every non-wrapping cell;
+                        // without it the content can never take a second line
+                        // and so can never be taller than the row.
+                        const withAutoGrowClass = (base) =>
+                            [base, 'cell-auto-grow'].filter(Boolean).join(' ');
+
+                        return {
+                            ...gridColumn,
+                            className:
+                                typeof existingClassName === 'function'
+                                    ? (...args) =>
+                                          withAutoGrowClass(
+                                              existingClassName(...args)
+                                          )
+                                    : withAutoGrowClass(existingClassName),
+                            render: (arg) => {
+                                const content = originalRender
+                                    ? originalRender(arg)
+                                    : arg?.value ?? null;
+
+                                const row = arg?.data;
+
+                                // Group rows keep the default height, and an
+                                // empty cell has nothing to grow for.
+                                if (
+                                    !row ||
+                                    row.__group ||
+                                    content === null ||
+                                    content === undefined ||
+                                    content === false
+                                ) {
+                                    return content;
+                                }
+
+                                return (
+                                    <AutoGrowCell
+                                        rowId={row.id}
+                                        onMeasure={reportAutoGrowHeight}
+                                    >
+                                        {content}
+                                    </AutoGrowCell>
+                                );
+                            },
+                        };
+                    };
+
                     // decorateTreeChildIndent sits INSIDE
                     // decorateTreeParentActions: the latter draws parent rows
                     // itself and delegates everything else downward, so the
                     // member indent has to be the render it delegates to.
                     const newColumns = columns.map((column) =>
-                        decorateColumnRowActions(
-                            decorateTreeParentActions(
-                                decorateTreeChildIndent(
-                                    guardTreeParentRender(
-                                        renderColumn(column),
+                        decorateAutoGrow(
+                            decorateColumnRowActions(
+                                decorateTreeParentActions(
+                                    decorateTreeChildIndent(
+                                        guardTreeParentRender(
+                                            renderColumn(column),
+                                            column
+                                        ),
                                         column
                                     ),
                                     column
@@ -4872,11 +5218,42 @@ const DataGrid = forwardRef(
         // Data Grid Styling
         const [windowHeight, setWindowHeight] = useState(window.innerHeight);
         const [dataCount, setDataCount] = useState(0);
+
+        // Pages that mount the grid directly (rather than through GenericIndex)
+        // pass no gridHeight, and fitToRows deliberately never grows past the
+        // rows - so on a tall screen the grid sat at a few rows' height and
+        // scrolled inside itself. The grid now measures what is left between
+        // its own top edge and the bottom of the viewport; fitToRows remains
+        // the first-paint fallback.
+        //
+        // Measured from `.dataGridContainer` rather than from the whole
+        // component, so the search/create bar and the legend above it are part
+        // of `top` instead of being asked for a second time below.
+        // `measureChrome` subtracts what the *page* needs under the grid — the
+        // card's padding and border, the page gutter, any section rendered
+        // after it — which used to be a flat 28px guess that was wrong for any
+        // page nesting its grid differently.
+        const containerRef = useRef(null);
+        const measuredHeight = useAvailableHeight(containerRef, {
+            bottomGutter: 0,
+            measureChrome: true,
+            recomputeKey: windowHeight,
+        });
+        const resolvedHeight =
+            gridHeight && gridHeight > 0
+                ? gridHeight
+                : measuredHeight != null && measuredHeight > 0
+                  ? measuredHeight
+                  : null;
+
+        // Both minHeight AND height: with minHeight alone the grid settles at
+        // its content height on a tall screen. An explicit height makes it
+        // take the room measured for it.
+        const initialHeight =
+            resolvedHeight ?? fitToRows(dataCount, windowHeight);
         const [gridStyle, setGridStyle] = useState({
-            minHeight:
-                gridHeight && gridHeight > 0
-                    ? gridHeight
-                    : fitToRows(dataCount, windowHeight),
+            minHeight: initialHeight,
+            height: initialHeight,
             boxShadow: 'none',
             ...(hoverColor ? { '--hover-color': hoverColor } : {}),
         });
@@ -4884,39 +5261,116 @@ const DataGrid = forwardRef(
             style: style ? style : {},
         };
 
+        /**
+         * The part of the grid's height that is not data rows: the column
+         * header, the filter row (only some pages have one), the footer rows
+         * and the pagination toolbar.
+         *
+         * Read off the rendered grid rather than assumed, because it changes
+         * with density, with `enableFiltering`, and with whether the page shows
+         * a footer — and because the pager *is* inside the grid element, so
+         * getting this wrong is exactly what leaves the last row hidden behind
+         * it or the pager stranded under a band of empty body.
+         *
+         * Returns null on the first pass, before the grid is in the DOM; the
+         * caller falls back to GRID_CHROME.
+         */
+        const measureGridChrome = () => {
+            const root = containerRef.current;
+
+            if (!root || typeof root.querySelector !== 'function') {
+                return null;
+            }
+
+            const gridEl = root.querySelector('.InovuaReactDataGrid');
+            const body = root.querySelector('.InovuaReactDataGrid__body');
+
+            if (!gridEl || !body) {
+                return null;
+            }
+
+            const chrome =
+                gridEl.getBoundingClientRect().height -
+                body.getBoundingClientRect().height;
+
+            return chrome > 0 ? chrome : null;
+        };
+
         useEffect(() => {
             const getMinimumHeight = () => {
-                if (gridHeight > 0) return gridHeight;
+                if (resolvedHeight > 0) return resolvedHeight;
                 return fitToRows(dataCount, window.innerHeight);
             };
 
             const minHeight = getMinimumHeight();
-            setGridStyle((prevState) => ({ ...prevState, minHeight }));
-
-            // Priority for limit:
-            // 1. User's rows_per_page preference (already applied via initialLimitApplied ref)
-            // 2. ajaxSetting.take if >= 35
-            // 3. Calculated rows based on height (fallback)
-
-            // Only auto-calculate limit if user hasn't set a preference
-            const userPreferredLimit = userProfile?.rows_per_page || userProfile?.settings?.rows_per_page;
+            setGridStyle((prevState) => ({
+                ...prevState,
+                minHeight,
+                height: minHeight,
+            }));
 
-            if (userPreferredLimit && userPreferredLimit > 0) {
-                // User has a preference, don't override it
-                debugLog('[DataGrid] Respecting user preference, not auto-calculating limit:', userPreferredLimit);
-            } else if (ajaxSetting?.take >= 35) {
+            // How many rows to ask for.
+            //
+            // The rule used to be "if the profile has a rows_per_page, never
+            // auto-calculate". That is a stored default, not a decision anyone
+            // made — it is 25 for most staff — so every index page on a 1080p
+            // screen drew 25 rows and then several hundred px of empty grid
+            // body under them, with the pager stranded at the bottom of it.
+            //
+            // The profile value now *seeds* the limit (see the initial state
+            // and the effect that applies it once the profile arrives) and
+            // nothing more. Once the grid has measured itself against the
+            // window, the measurement wins — unless the user has picked a size
+            // from the pager's "Results per page" control in this session, in
+            // which case their choice is final for as long as the grid is
+            // mounted. Whatever the pager does about persisting that choice to
+            // the profile is unchanged.
+            //
+            // A page that passes an explicit `gridHeight` is not sized to the
+            // window at all (a grid in a modal, a secondary grid on a detail
+            // page), so it keeps the old order: profile preference, then a
+            // configured `take`, then the arithmetic.
+            const autoSizedToWindow = !(gridHeight && gridHeight > 0);
+            const userPreferredLimit =
+                userProfile?.rows_per_page ||
+                userProfile?.settings?.rows_per_page;
+
+            if (userChoseLimitRef.current) {
+                debugLog(
+                    '[DataGrid] Honouring the size the user picked this session:',
+                    limitRef.current
+                );
+            } else if (
+                !autoSizedToWindow &&
+                userPreferredLimit &&
+                userPreferredLimit > 0
+            ) {
+                debugLog(
+                    '[DataGrid] Fixed-height grid, respecting profile preference:',
+                    userPreferredLimit
+                );
+            } else if (!autoSizedToWindow && ajaxSetting?.take >= 35) {
                 setLimit(ajaxSetting.take);
             } else {
-                // Divide by the row height actually in force. This was
-                // hardcoded to 32 even in tablet mode, so tablet pages asked
-                // for far more rows than could ever fit on screen.
-                const calculateRows = (height) =>
-                    Math.floor((height - 100) / grid.rowUnit);
-
-                const rowCount = calculateRows(minHeight);
-                setLimit(rowCount);
+                // Prefer the chrome the grid is really wearing — the column
+                // header, the filter row if this page has one, and the pager
+                // toolbar all live inside `minHeight`, and they differ by
+                // density and by config. GRID_CHROME is the fallback for the
+                // first pass, before the grid exists to be measured.
+                const chrome = measureGridChrome() ?? GRID_CHROME;
+
+                setLimit(rowsForHeight(minHeight, chrome, grid.rowUnit));
             }
-        }, [dataCount, gridHeight, window.innerHeight, grid, userProfile?.rows_per_page, userProfile?.settings?.rows_per_page]);
+        }, [
+            dataCount,
+            gridHeight,
+            resolvedHeight,
+            window.innerHeight,
+            grid,
+            ajaxSetting?.take,
+            userProfile?.rows_per_page,
+            userProfile?.settings?.rows_per_page,
+        ]);
 
         useEffect(() => {
             const debouncedHandleResize = debounce(() => {
@@ -5072,8 +5526,9 @@ const DataGrid = forwardRef(
                     </div>
                 )}
 
-                {/* DataGrid container with its own border */}
-                <div className={styles.dataGridContainer}>
+                {/* DataGrid container with its own border; its top edge is
+                    what the available height is measured from. */}
+                <div className={styles.dataGridContainer} ref={containerRef}>
 
                     {limit && limit > 0 ? (
                         <ReactDataGrid
@@ -5328,126 +5783,130 @@ const DataGrid = forwardRef(
                                                               aria-label="Select all items in this group"
                                                           />
                                                       )}
-                                                      <button
-                                                          className={`group-expand-btn ${styles.groupExpandBtn}`}
-                                                          onClick={(e) => {
-                                                              e.stopPropagation();
-                                                              if (
-                                                                  typeof toggleGroup ===
-                                                                  'function'
-                                                              ) {
-                                                                  toggleGroup();
+                                                      <div
+                                                          className={`group-controls ${styles.groupControls}`}
+                                                      >
+                                                          <button
+                                                              className={`group-expand-btn ${styles.groupExpandBtn}`}
+                                                              onClick={(e) => {
+                                                                  e.stopPropagation();
+                                                                  if (
+                                                                      typeof toggleGroup ===
+                                                                      'function'
+                                                                  ) {
+                                                                      toggleGroup();
+                                                                  }
+                                                              }}
+                                                              onTouchStart={(e) => {
+                                                                  e.stopPropagation();
+                                                                  handleTouchStart(
+                                                                      e,
+                                                                      'group-expand',
+                                                                      collapsed
+                                                                          ? 'Expand group'
+                                                                          : 'Collapse group'
+                                                                  );
+                                                              }}
+                                                              onTouchEnd={
+                                                                  handleTouchEnd
                                                               }
-                                                          }}
-                                                          onTouchStart={(e) => {
-                                                              e.stopPropagation();
-                                                              handleTouchStart(
-                                                                  e,
-                                                                  'group-expand',
+                                                              onTouchMove={
+                                                                  handleTouchMove
+                                                              }
+                                                              data-tooltip-id="system-tooltip"
+                                                              data-tooltip-content={
                                                                   collapsed
                                                                       ? 'Expand group'
                                                                       : 'Collapse group'
-                                                              );
-                                                          }}
-                                                          onTouchEnd={
-                                                              handleTouchEnd
-                                                          }
-                                                          onTouchMove={
-                                                              handleTouchMove
-                                                          }
-                                                          data-tooltip-id="system-tooltip"
-                                                          data-tooltip-content={
-                                                              collapsed
-                                                                  ? 'Expand group'
-                                                                  : 'Collapse group'
-                                                          }
-                                                      >
-                                                          {collapsed
-                                                              ? '+'
-                                                              : '−'}
-                                                      </button>
-                                                      {/* Dynamic group action buttons */}
-                                                      {ajaxSetting?.groupBySetting?.icons?.map(
-                                                          (
-                                                              iconConfig,
-                                                              index
-                                                          ) => {
-                                                              // Check if this icon should be shown based on show conditions
-                                                              if (
-                                                                  !shouldShowGroupAction(
-                                                                      iconConfig,
-                                                                      groupValue
-                                                                  )
-                                                              ) {
-                                                                  return null;
                                                               }
+                                                          >
+                                                              {collapsed
+                                                                  ? '+'
+                                                                  : '−'}
+                                                          </button>
+                                                          {/* Dynamic group action buttons */}
+                                                          {ajaxSetting?.groupBySetting?.icons?.map(
+                                                              (
+                                                                  iconConfig,
+                                                                  index
+                                                              ) => {
+                                                                  // Check if this icon should be shown based on show conditions
+                                                                  if (
+                                                                      !shouldShowGroupAction(
+                                                                          iconConfig,
+                                                                          groupValue
+                                                                      )
+                                                                  ) {
+                                                                      return null;
+                                                                  }
 
-                                                              const IconComponent =
-                                                                  getGroupIconComponent(
-                                                                      iconConfig.id
-                                                                  );
+                                                                  const IconComponent =
+                                                                      getGroupIconComponent(
+                                                                          iconConfig.id
+                                                                      );
 
-                                                              // Generate different color classes for multiple buttons
-                                                              const colorClasses =
-                                                                  [
-                                                                      'success',
-                                                                      'warning',
-                                                                      'info',
-                                                                      'purple',
-                                                                      'pink',
-                                                                  ];
-                                                              const colorClass =
-                                                                  colorClasses[
-                                                                      index %
-                                                                          colorClasses.length
-                                                                  ];
-
-                                                              return (
-                                                                  <button
-                                                                      key={`group-action-${index}`}
-                                                                      className={`group-action-btn group-${iconConfig.id}-btn ${styles.groupActionBtn} ${styles[colorClass]}`}
-                                                                      onClick={(
-                                                                          e
-                                                                      ) => {
-                                                                          e.stopPropagation();
-                                                                          handleGroupAction(
-                                                                              groupValue,
-                                                                              iconConfig
-                                                                          );
-                                                                      }}
-                                                                      onTouchStart={(
-                                                                          e
-                                                                      ) => {
-                                                                          e.stopPropagation();
-                                                                          handleTouchStart(
-                                                                              e,
-                                                                              `group-${iconConfig.id}-${index}`,
-                                                                              iconConfig.label
-                                                                          );
-                                                                      }}
-                                                                      onTouchEnd={
-                                                                          handleTouchEnd
-                                                                      }
-                                                                      onTouchMove={
-                                                                          handleTouchMove
-                                                                      }
-                                                                      data-tooltip-id="system-tooltip"
-                                                                      data-tooltip-content={
-                                                                          iconConfig.label
-                                                                      }
-                                                                  >
-                                                                      <IconComponent
-                                                                          strokeWidth={
-                                                                              2
+                                                                  // Generate different color classes for multiple buttons
+                                                                  const colorClasses =
+                                                                      [
+                                                                          'success',
+                                                                          'warning',
+                                                                          'info',
+                                                                          'purple',
+                                                                          'pink',
+                                                                      ];
+                                                                  const colorClass =
+                                                                      colorClasses[
+                                                                          index %
+                                                                              colorClasses.length
+                                                                      ];
+
+                                                                  return (
+                                                                      <button
+                                                                          key={`group-action-${index}`}
+                                                                          className={`group-action-btn group-${iconConfig.id}-btn ${styles.groupActionBtn} ${styles[colorClass]}`}
+                                                                          onClick={(
+                                                                              e
+                                                                          ) => {
+                                                                              e.stopPropagation();
+                                                                              handleGroupAction(
+                                                                                  groupValue,
+                                                                                  iconConfig
+                                                                              );
+                                                                          }}
+                                                                          onTouchStart={(
+                                                                              e
+                                                                          ) => {
+                                                                              e.stopPropagation();
+                                                                              handleTouchStart(
+                                                                                  e,
+                                                                                  `group-${iconConfig.id}-${index}`,
+                                                                                  iconConfig.label
+                                                                              );
+                                                                          }}
+                                                                          onTouchEnd={
+                                                                              handleTouchEnd
                                                                           }
-                                                                          size={
-                                                                              14
+                                                                          onTouchMove={
+                                                                              handleTouchMove
                                                                           }
-                                                                      />
-                                                                  </button>
-                                                              );
-                                                          }
-                                                      ) || null}
+                                                                          data-tooltip-id="system-tooltip"
+                                                                          data-tooltip-content={
+                                                                              iconConfig.label
+                                                                          }
+                                                                      >
+                                                                          <IconComponent
+                                                                              strokeWidth={
+                                                                                  2
+                                                                              }
+                                                                              size={
+                                                                                  14
+                                                                              }
+                                                                          />
+                                                                      </button>
+                                                                  );
+                                                              }
+                                                          ) || null}
+                                                      </div>
                                                       <div
                                                           className={
                                                               styles.groupInfo
@@ -5458,7 +5917,9 @@ const DataGrid = forwardRef(
                                                                   styles.groupValue
                                                               }
                                                           >
-                                                              {groupValue}
+                                                              {getGroupDisplayLabel(
+                                                                  groupValue
+                                                              )}
                                                               {/* Important marker */}
                                                               {hasImportantMarker && (
                                                                   <AlertCircle
@@ -5606,7 +6067,7 @@ const DataGrid = forwardRef(
                             onFilterValueChange={(fv) => {
                                 handleFilterChange(fv, filterValue);
                             }}
-                            onLimitChange={setLimit}
+                            onLimitChange={handleLimitChange}
                             onSelectionChange={handleSelectionChange}
                             onSortInfoChange={handleSort}
                             onRenderRow={onRenderRow}