@visns-studio/visns-components 6.0.1 → 6.0.3

package/src/components/DataGrid.jsx

@@ -73,6 +73,8 @@ import {
     Volume2,
     AlertTriangle,
     AlertCircle,
+    CheckCheck,
+    Plus,
 } from 'lucide-react';
 import styles from './styles/DataGrid.module.scss';
 
@@ -403,6 +405,14 @@ const DataGrid = forwardRef(
         /** Group expansion state */
         const [collapsedGroups, setCollapsedGroups] = useState({});
 
+        /**
+         * Collapse state for treeGroupBy blocks, keyed by group value.
+         * Separate from `collapsedGroups` (which drives the grid's own
+         * grouping) because tree children are hidden by filtering the data
+         * rather than by the grid.
+         */
+        const [collapsedTreeGroups, setCollapsedTreeGroups] = useState({});
+
         /** Track if groups have been initialized to prevent re-initialization */
         const groupsInitializedRef = useRef(false);
 
@@ -604,13 +614,15 @@ const DataGrid = forwardRef(
                     }
 
                     // Opt-in grouped display (ajaxSetting.treeGroupBy {key,
-                    // column, parentFields, countLabel}): consecutive rows
-                    // sharing a non-empty `key` value get a synthetic summary
-                    // parent row inserted above them, always visible — no
-                    // expand/collapse. `parentFields` are lifted from the
-                    // first row onto the parent and blanked on the children,
-                    // so shared details display once; children get an "↳"
-                    // prefix in the display column. Single rows stay plain.
+                    // column, parentFields, countLabel, collapsible,
+                    // defaultCollapsed, icons}): consecutive rows sharing a
+                    // non-empty `key` value get a synthetic summary parent
+                    // row inserted above them. `parentFields` are lifted from
+                    // the first row onto the parent and blanked on the
+                    // children, so shared details display once; children get
+                    // an "↳" prefix in the display column. Single rows stay
+                    // plain — unlike the grid's own groupBy, which forces a
+                    // header row onto every key.
                     // Runs after dataRef is set so selection/group helpers
                     // keep operating on the real rows only.
                     if (
@@ -622,6 +634,8 @@ const DataGrid = forwardRef(
                             column: treeDisplayColumn,
                             parentFields = [],
                             countLabel,
+                            collapsible,
+                            defaultCollapsed,
                         } = ajaxSetting.treeGroupBy;
                         const rows = res.data;
                         const grouped = [];
@@ -689,7 +703,25 @@ const DataGrid = forwardRef(
                                         );
                                 }
 
-                                grouped.push(parent, ...children);
+                                if (collapsible) {
+                                    // Groups the user has never touched sit at
+                                    // the configured default, so an auto-
+                                    // refresh cannot spring them open or shut
+                                    const isCollapsed =
+                                        collapsedTreeGroups[value] ??
+                                        defaultCollapsed === true;
+
+                                    parent.__treeCollapsed = isCollapsed;
+                                    parent.__treeChildCount = children.length;
+
+                                    grouped.push(parent);
+
+                                    if (!isCollapsed) {
+                                        grouped.push(...children);
+                                    }
+                                } else {
+                                    grouped.push(parent, ...children);
+                                }
                             } else {
                                 grouped.push(row);
                             }
@@ -723,7 +755,7 @@ const DataGrid = forwardRef(
                     count: res.count,
                 }));
             },
-            [ajaxSetting, dSearch, collapsedGroups]
+            [ajaxSetting, dSearch, collapsedGroups, collapsedTreeGroups]
         );
         const [filterDataSource, setFilterDataSource] = useState([]);
         const [filterValue, setFilterValue] = useState([]);
@@ -1612,12 +1644,60 @@ const DataGrid = forwardRef(
             }, 50); // Increased delay to ensure proper rendering after reload
         };
 
+        /**
+         * Flip a treeGroupBy block open/shut. The state change re-creates
+         * dataSource, which reloads and re-runs the tree transform with the
+         * new collapse state.
+         */
+        const toggleTreeGroup = (groupValue) => {
+            const defaultCollapsed =
+                ajaxSetting?.treeGroupBy?.defaultCollapsed === true;
+
+            setCollapsedTreeGroups((prev) => ({
+                ...prev,
+                [groupValue]: !(prev[groupValue] ?? defaultCollapsed),
+            }));
+        };
+
+        /** Icon id (groupBySetting.icons[].id / treeGroupBy.icons[].id) → glyph */
+        const getGroupIconComponent = (iconId) => {
+            switch (iconId) {
+                case 'clock':
+                    return Clock;
+                case 'alarm':
+                    return AlarmClock;
+                case 'check':
+                    return Check;
+                case 'checkAll':
+                    return CheckCheck;
+                case 'plus':
+                    return Plus;
+                case 'edit':
+                    return Edit;
+                case 'envelope':
+                    return Mail;
+                case 'file':
+                    return File;
+                case 'image':
+                    return Image;
+                case 'copy':
+                    return Copy;
+                case 'cloudUpload':
+                    return Upload;
+                case 'cloudDownload':
+                    return DownloadIcon;
+                default:
+                    return Clock; // Default fallback
+            }
+        };
+
         const handleGroupAction = async (groupValue, iconConfig) => {
             // Get all rows for this group
             const groupRows = getGroupRows(groupValue);
 
-            // Skip confirmation dialog for edit actions - open modal directly
-            if (iconConfig.id === 'edit' && iconConfig.formModal) {
+            // Skip confirmation dialog for modal actions - the modal itself is
+            // the confirmation step
+            if (iconConfig.formModal) {
                 executeGroupAction(groupValue, iconConfig);
                 return;
             }
@@ -1645,56 +1725,97 @@ const DataGrid = forwardRef(
             });
         };
 
+        // dataRef holds the real rows only (the treeGroupBy transform runs
+        // after it is set), so this resolves a group the same way whether the
+        // view groups via the grid's groupBy or via treeGroupBy.
         const getGroupRows = (groupValue) => {
-            if (!dataRef.current || !ajaxSetting?.groupBy) {
+            const groupField =
+                ajaxSetting?.groupBy?.[0] || ajaxSetting?.treeGroupBy?.key;
+
+            if (!dataRef.current || !groupField) {
                 return [];
             }
 
-            const groupField = ajaxSetting.groupBy[0];
             return dataRef.current.filter(
                 (row) => row[groupField] === groupValue
             );
         };
 
+        /**
+         * The show-condition grammar shared by group action icons and row
+         * action icons:
+         *   {id}                        field must be set (non-empty)
+         *   {id, value}                 strict match ({value: null} = empty)
+         *   {id, operator: 'empty'}     field must be empty
+         *   {id, operator: 'notEmpty'}  field must be set
+         */
+        const matchesRowCondition = (row, condition) => {
+            if (!condition || !condition.id) {
+                return true;
+            }
+
+            const { id, value, operator } = condition;
+            const rowValue = row?.[id];
+            const isEmpty =
+                rowValue === null || rowValue === undefined || rowValue === '';
+
+            if (operator === 'empty') {
+                return isEmpty;
+            }
+
+            if (operator === 'notEmpty') {
+                return !isEmpty;
+            }
+
+            // No value prop → field must be truthy (set/non-empty)
+            if (!Object.prototype.hasOwnProperty.call(condition, 'value')) {
+                return !isEmpty;
+            }
+
+            // Handle null value condition
+            if (value === null) {
+                return isEmpty;
+            }
+
+            // Handle other value conditions
+            return rowValue === value;
+        };
+
+        /** True when the signed-in user holds any of the listed role names */
+        const userHasAnyRole = (roleNames) =>
+            Array.isArray(roleNames) &&
+            roleNames.some((requiredRole) =>
+                userProfile?.roles?.some(
+                    (userRole) => userRole.name === requiredRole
+                )
+            );
+
         const shouldShowGroupAction = (iconConfig, groupValue) => {
+            // `showAll` is the every-row form of `show`: the icon appears only
+            // when the condition holds for the whole group (e.g. close a tag
+            // out only once every header on it is finished)
+            const requireAll = Array.isArray(iconConfig.showAll);
+            const conditions = requireAll ? iconConfig.showAll : iconConfig.show;
+
             // If no show conditions, always show the icon
-            if (!iconConfig.show || !Array.isArray(iconConfig.show)) {
+            if (!conditions || !Array.isArray(conditions)) {
                 return true;
             }
 
             // Get all rows for this group
             const groupRows = getGroupRows(groupValue);
 
-            // Check if all show conditions are met
-            return iconConfig.show.every((condition) => {
-                const { id, value } = condition;
-                const hasValueProp = condition.hasOwnProperty('value');
-
-                // Check if any row in the group matches the condition
-                return groupRows.some((row) => {
-                    const rowValue = row[id];
-
-                    // No value prop → field must be truthy (set/non-empty)
-                    if (!hasValueProp) {
-                        return (
-                            rowValue !== null &&
-                            rowValue !== undefined &&
-                            rowValue !== ''
-                        );
-                    }
+            if (requireAll && groupRows.length === 0) {
+                return false;
+            }
 
-                    // Handle null value condition
-                    if (value === null) {
-                        return (
-                            rowValue === null ||
-                            rowValue === undefined ||
-                            rowValue === ''
-                        );
-                    }
+            // Check if all show conditions are met
+            return conditions.every((condition) => {
+                const matches = (row) => matchesRowCondition(row, condition);
 
-                    // Handle other value conditions
-                    return rowValue === value;
-                });
+                return requireAll
+                    ? groupRows.every(matches)
+                    : groupRows.some(matches);
             });
         };
 
@@ -1707,18 +1828,40 @@ const DataGrid = forwardRef(
                         groupLabel: groupValue,
                     };
 
+                    // `dataFromRow` {payloadKey: rowField} carries an id the
+                    // endpoint needs but the group label does not hold (e.g.
+                    // split_group_id behind a tag). Every member row of a
+                    // group shares the value, so the first one answers.
+                    if (iconConfig.fetch.dataFromRow) {
+                        const sourceRow = getGroupRows(groupValue)[0];
+
+                        Object.entries(iconConfig.fetch.dataFromRow).forEach(
+                            ([payloadKey, rowField]) => {
+                                payload[payloadKey] = sourceRow?.[rowField];
+                            }
+                        );
+                    }
+
                     const result = await CustomFetch(
                         iconConfig.fetch.url,
                         iconConfig.fetch.method || 'POST',
                         payload
                     );
 
-                    if (result.error) {
-                        throw new Error(result.error);
+                    // These endpoints answer 200 with an `error` string rather
+                    // than an HTTP error, so the body is what decides
+                    const responseError = result?.data?.error || result?.error;
+
+                    if (responseError) {
+                        // CustomFetch has already toasted the message
+                        return;
                     }
 
                     toast.success(
-                        `${iconConfig.label} - Group: ${groupValue} completed successfully`
+                        iconConfig.fetch.messageFromResponse &&
+                            result?.data?.message
+                            ? result.data.message
+                            : `${iconConfig.label} - Group: ${groupValue} completed successfully`
                     );
 
                     // Reload grid data if needed
@@ -1738,6 +1881,23 @@ const DataGrid = forwardRef(
                         `${iconConfig.label} - Group: ${groupValue} failed: ${error.message}`
                     );
                 }
+            } else if (iconConfig.formModal) {
+                // Open the group form modal. Any icon may carry a formModal,
+                // not just 'edit' — the config decides what the modal does.
+                const groupRows = getGroupRows(groupValue);
+                const groupRowIds = groupRows.map(
+                    (row) => row[form?.primaryKey || 'id']
+                );
+
+                setBulkEditMode(true);
+                setBulkEditGroupData({
+                    groupValue: groupValue,
+                    groupRows: groupRows,
+                    groupRowIds: groupRowIds,
+                    iconConfig: iconConfig,
+                });
+
+                modalOpen('update', null);
             } else {
                 // Fallback to existing switch logic if no fetch config
                 // Skip toast notification for edit actions
@@ -1762,30 +1922,7 @@ const DataGrid = forwardRef(
                         );
                         break;
                     case 'edit':
-                        // Handle bulk edit action
-                        if (iconConfig.formModal) {
-                            // Get all rows in the group for bulk editing
-                            const groupRows = getGroupRows(groupValue);
-                            const groupRowIds = groupRows.map(
-                                (row) => row[form?.primaryKey || 'id']
-                            );
-
-                            // Set bulk edit data
-                            setBulkEditMode(true);
-                            setBulkEditGroupData({
-                                groupValue: groupValue,
-                                groupRows: groupRows,
-                                groupRowIds: groupRowIds,
-                                iconConfig: iconConfig,
-                            });
-
-                            // Open modal for bulk editing
-                            modalOpen('update', null);
-                        } else {
-                            debugLog(
-                                `Bulk edit action for group: ${groupValue}`
-                            );
-                        }
+                        debugLog(`Bulk edit action for group: ${groupValue}`);
                         break;
                     case 'envelope':
                         debugLog(
@@ -1801,6 +1938,175 @@ const DataGrid = forwardRef(
             }
         };
 
+        /**
+         * An `action` column's `settings` entry is either the id of a shared
+         * setting (rendered by renderSetting) or an inline row action config
+         * declared on the column itself.
+         */
+        const isRowActionConfig = (entry) =>
+            entry !== null && typeof entry === 'object';
+
+        /** Lucide icons an inline row action may name via `icon` */
+        const rowActionIcons = {
+            check: Check,
+            copy: Copy,
+            delete: Trash2,
+            edit: Edit,
+            envelope: Mail,
+            plus: Plus,
+            trash: Trash2,
+            undo: RotateCcw,
+        };
+
+        /**
+         * Row action visibility, in three parts:
+         *  - `show` must hold for the row (the hard rule: what the action is
+         *    even about, e.g. only split rows carry a header to remove)
+         *  - `removableWhen`, when present, must hold as well (the soft rule:
+         *    the state in which anyone may do it)
+         *  - unless the user holds one of `overrideRoles`, which bypasses the
+         *    soft rule only
+         *
+         * Synthetic tree parent rows are group summaries and never carry row
+         * actions, and a row missing a field simply fails its condition.
+         */
+        const shouldShowRowAction = (config, row) => {
+            if (!row || row.__treeParent) {
+                return false;
+            }
+
+            if (
+                Array.isArray(config.show) &&
+                !config.show.every((condition) =>
+                    matchesRowCondition(row, condition)
+                )
+            ) {
+                return false;
+            }
+
+            if (
+                Array.isArray(config.removableWhen) &&
+                !config.removableWhen.every((condition) =>
+                    matchesRowCondition(row, condition)
+                )
+            ) {
+                return userHasAnyRole(config.overrideRoles);
+            }
+
+            return true;
+        };
+
+        /** Fill {field} placeholders in a config string from the row */
+        const interpolateRowText = (text, row) =>
+            String(text ?? '').replace(/{(\w+)}/g, (match, field) => {
+                const value = row?.[field];
+
+                return value === null || value === undefined
+                    ? ''
+                    : String(value);
+            });
+
+        const executeRowAction = async (config, row) => {
+            const fetchConfig = config.fetch;
+
+            if (!fetchConfig?.url) {
+                console.warn(
+                    `Row action "${config.id}" has no fetch configuration`
+                );
+
+                return;
+            }
+
+            // `pathKey` names the row field that completes a RESTful url
+            // (/ajax/jobGoods + row.id)
+            const url = fetchConfig.pathKey
+                ? `${fetchConfig.url}/${row?.[fetchConfig.pathKey]}`
+                : fetchConfig.url;
+
+            try {
+                const result = await CustomFetch(
+                    url,
+                    fetchConfig.method || 'POST',
+                    { ...fetchConfig.data }
+                );
+
+                // These endpoints answer 200 with an `error` string rather
+                // than an HTTP error, so the body is what decides. CustomFetch
+                // has already toasted the message.
+                if (result?.data?.error || result?.error) {
+                    return;
+                }
+
+                toast.success(
+                    fetchConfig.messageFromResponse && result?.data?.message
+                        ? result.data.message
+                        : `${config.label || 'Action'} completed successfully`
+                );
+
+                handleReload();
+            } catch (error) {
+                console.error('Row action fetch error:', error);
+                toast.error(
+                    `${config.label || 'Action'} failed: ${error.message}`
+                );
+            }
+        };
+
+        const handleRowAction = (config, row) => {
+            if (!config.confirm) {
+                executeRowAction(config, row);
+
+                return;
+            }
+
+            confirmDialog({
+                title: config.label || 'Confirm Action',
+                message: interpolateRowText(config.confirm, row),
+                buttons: [
+                    {
+                        label: 'Yes',
+                        onClick: () => {
+                            executeRowAction(config, row);
+                        },
+                    },
+                    {
+                        label: 'No',
+                        onClick: () => {
+                            // User cancelled
+                        },
+                    },
+                ],
+            });
+        };
+
+        const renderRowAction = (config, row) => {
+            const IconComponent = rowActionIcons[config.icon];
+
+            if (!IconComponent || !shouldShowRowAction(config, row)) {
+                return null;
+            }
+
+            return (
+                <span
+                    key={`row-action-${config.id}`}
+                    onClick={(e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        handleRowAction(config, row);
+                    }}
+                >
+                    <IconComponent
+                        data-tooltip-id="system-tooltip"
+                        data-tooltip-content={config.label || ''}
+                        strokeWidth={2}
+                        size={18}
+                        className={styles.tdaction}
+                        style={config.colour ? { color: config.colour } : {}}
+                    />
+                </span>
+            );
+        };
+
         // Touch handlers for tooltips
         const handleTouchStart = (e, buttonId, label) => {
             // Clear any existing timer
@@ -2403,23 +2709,68 @@ const DataGrid = forwardRef(
                     }
                 }, '');
 
-                const iconData = config.icons.find(
+                let iconData = config.icons.find(
                     (icon) => icon.value === fieldValue
                 );
 
+                // An icon marked fallback: true matches any non-empty value
+                // that no explicit entry matched (e.g. "any country other
+                // than Australia" → international icon).
+                if (
+                    !iconData &&
+                    fieldValue !== '' &&
+                    fieldValue != null &&
+                    fieldValue !== 0
+                ) {
+                    iconData = config.icons.find(
+                        (icon) => icon.fallback === true
+                    );
+                }
+
                 if (
                     iconData &&
                     (iconData.src || iconData.icon) &&
                     iconData.alt &&
                     iconData.tooltipContent
                 ) {
+                    // tooltipFrom: path into the row data whose value (when
+                    // present) replaces the static tooltip — e.g. show the
+                    // actual country name on the international icon. Optional
+                    // tooltipPrefix is prepended to the resolved value.
+                    let tooltipContent = iconData.tooltipContent;
+                    if (Array.isArray(iconData.tooltipFrom)) {
+                        const resolved = iconData.tooltipFrom.reduce(
+                            (acc, id) => (acc == null ? acc : acc[id]),
+                            data
+                        );
+                        if (resolved != null && resolved !== '') {
+                            tooltipContent = `${
+                                iconData.tooltipPrefix || ''
+                            }${resolved}`;
+                        }
+                    }
+
                     addIcon(
                         iconData.src ? iconData.src : null,
                         iconData.icon ? iconData.icon : null,
                         iconData.alt,
-                        iconData.tooltipContent,
+                        tooltipContent,
                         `coding-${config.id[0]}-${configKey}`
                     );
+                } else {
+                    // Empty placeholder slot so every config group occupies a
+                    // fixed position — icons align vertically across rows.
+                    icons.push(
+                        <div
+                            key={`coding-slot-${config.id[0]}-${configKey}`}
+                            style={{
+                                display: 'inline-flex',
+                                width: '28px',
+                                height: '28px',
+                                margin: '0 1px',
+                            }}
+                        />
+                    );
                 }
             });
 
@@ -2545,13 +2896,7 @@ const DataGrid = forwardRef(
             // Check role-based permissions if roles are specified
             if (s.roles && Array.isArray(s.roles) && s.roles.length > 0) {
                 // Check if user has any of the required roles
-                const hasRequiredRole = s.roles.some((requiredRole) =>
-                    userProfile?.roles?.some(
-                        (userRole) => userRole.name === requiredRole
-                    )
-                );
-
-                if (!hasRequiredRole) {
+                if (!userHasAnyRole(s.roles)) {
                     allow = false;
                 }
             }
@@ -3022,6 +3367,8 @@ const DataGrid = forwardRef(
 
                     // Settings that an 'action' column renders inline render there
                     // instead of the trailing Action column (avoids duplication).
+                    // (Inline row action configs are declared on the column
+                    // itself, so they never name a shared setting.)
                     const actionColumnSettingIds = new Set(
                         (columns || [])
                             .filter(
@@ -3030,6 +3377,7 @@ const DataGrid = forwardRef(
                                     Array.isArray(c.settings)
                             )
                             .flatMap((c) => c.settings)
+                            .filter((entry) => !isRowActionConfig(entry))
                     );
 
                     // Width to fit N action icons: tablet-mode icons have a larger
@@ -3193,15 +3541,26 @@ const DataGrid = forwardRef(
 
                         switch (column.type) {
                             case 'action': {
-                                const actionSettings = (column.settings || [])
+                                // A string entry names a shared setting; an
+                                // object entry is an inline row action the
+                                // column declares itself
+                                const entries = column.settings || [];
+                                const actionSettings = entries
+                                    .filter(
+                                        (entry) => !isRowActionConfig(entry)
+                                    )
                                     .map((id) =>
                                         memoizedSettings.find(
                                             (s) => s.id === id
                                         )
                                     )
                                     .filter(Boolean);
+                                const rowActions =
+                                    entries.filter(isRowActionConfig);
+                                // Per-row conditions may hide row actions at
+                                // runtime, but the column must fit the maximum
                                 const width = actionColumnWidthFor(
-                                    actionSettings.length
+                                    actionSettings.length + rowActions.length
                                 );
                                 return {
                                     ...commonProps,
@@ -3219,6 +3578,9 @@ const DataGrid = forwardRef(
                                             {actionSettings.map((setting) =>
                                                 renderSetting(setting, data)
                                             )}
+                                            {rowActions.map((rowAction) =>
+                                                renderRowAction(rowAction, data)
+                                            )}
                                         </div>
                                     ),
                                 };
@@ -3596,8 +3958,188 @@ const DataGrid = forwardRef(
                         };
                     };
 
+                    // The tree parent's display column doubles as the group's
+                    // header line: expand/collapse plus any treeGroupBy.icons
+                    // whose show/showAll conditions the group's rows satisfy.
+                    const decorateTreeParentActions = (
+                        gridColumn,
+                        columnDef
+                    ) => {
+                        const tree = ajaxSetting?.treeGroupBy;
+                        const columnId = Array.isArray(columnDef?.id)
+                            ? columnDef.id.join('-')
+                            : columnDef?.id;
+
+                        if (
+                            !tree?.key ||
+                            !tree.column ||
+                            tree.column !== columnId ||
+                            !(tree.collapsible || tree.icons?.length)
+                        ) {
+                            return gridColumn;
+                        }
+
+                        const originalRender = gridColumn.render;
+
+                        return {
+                            ...gridColumn,
+                            render: (arg) => {
+                                const data = arg?.data;
+
+                                if (!data?.__treeParent) {
+                                    return originalRender
+                                        ? originalRender(arg)
+                                        : null;
+                                }
+
+                                const groupValue = data[tree.key];
+                                const collapsed = data.__treeCollapsed === true;
+
+                                return (
+                                    <div
+                                        className={styles.treeParentHeader}
+                                        onClick={(e) => e.stopPropagation()}
+                                    >
+                                        {tree.collapsible && (
+                                            <button
+                                                className={`group-expand-btn ${styles.groupExpandBtn}`}
+                                                onClick={(e) => {
+                                                    e.stopPropagation();
+                                                    toggleTreeGroup(groupValue);
+                                                }}
+                                                data-tooltip-id="system-tooltip"
+                                                data-tooltip-content={
+                                                    collapsed
+                                                        ? 'Expand group'
+                                                        : 'Collapse group'
+                                                }
+                                            >
+                                                {collapsed ? '+' : '−'}
+                                            </button>
+                                        )}
+                                        <strong
+                                            className={styles.treeParentLabel}
+                                        >
+                                            {groupValue}
+                                            {data.__treeChildCount
+                                                ? ` (${data.__treeChildCount})`
+                                                : ''}
+                                        </strong>
+                                        {(tree.icons || []).map(
+                                            (iconConfig, index) => {
+                                                if (
+                                                    !shouldShowGroupAction(
+                                                        iconConfig,
+                                                        groupValue
+                                                    )
+                                                ) {
+                                                    return null;
+                                                }
+
+                                                const IconComponent =
+                                                    getGroupIconComponent(
+                                                        iconConfig.id
+                                                    );
+
+                                                return (
+                                                    <button
+                                                        key={`tree-action-${index}`}
+                                                        className={`group-action-btn ${
+                                                            styles.groupActionBtn
+                                                        } ${
+                                                            styles[
+                                                                iconConfig.colour ||
+                                                                    'success'
+                                                            ] || ''
+                                                        }`}
+                                                        onClick={(e) => {
+                                                            e.stopPropagation();
+                                                            handleGroupAction(
+                                                                groupValue,
+                                                                iconConfig
+                                                            );
+                                                        }}
+                                                        data-tooltip-id="system-tooltip"
+                                                        data-tooltip-content={
+                                                            iconConfig.label
+                                                        }
+                                                    >
+                                                        <IconComponent
+                                                            strokeWidth={2}
+                                                            size={14}
+                                                        />
+                                                    </button>
+                                                );
+                                            }
+                                        )}
+                                    </div>
+                                );
+                            },
+                        };
+                    };
+
+                    // Any column may carry `rowActions` (same config objects
+                    // as an 'action' column's settings): the icons render
+                    // after the cell's normal content. Useful for cells that
+                    // are blank on tree-child rows (e.g. a parentFields-
+                    // lifted column) so the action reuses the empty space.
+                    const decorateColumnRowActions = (gridColumn, columnDef) => {
+                        if (!Array.isArray(columnDef?.rowActions)) {
+                            return gridColumn;
+                        }
+
+                        const originalRender = gridColumn.render;
+
+                        return {
+                            ...gridColumn,
+                            render: (arg) => {
+                                const base = originalRender
+                                    ? originalRender(arg)
+                                    : null;
+                                const row = arg?.data;
+
+                                if (!row || row.__treeParent) {
+                                    return base;
+                                }
+
+                                const icons = columnDef.rowActions
+                                    .map((config) =>
+                                        renderRowAction(config, row)
+                                    )
+                                    .filter(Boolean);
+
+                                if (!icons.length) {
+                                    return base;
+                                }
+
+                                return (
+                                    <div
+                                        style={{
+                                            display: 'flex',
+                                            alignItems: 'center',
+                                            gap: '4px',
+                                        }}
+                                        onClick={(e) => e.stopPropagation()}
+                                    >
+                                        {base}
+                                        {icons}
+                                    </div>
+                                );
+                            },
+                        };
+                    };
+
                     const newColumns = columns.map((column) =>
-                        guardTreeParentRender(renderColumn(column), column)
+                        decorateColumnRowActions(
+                            decorateTreeParentActions(
+                                guardTreeParentRender(
+                                    renderColumn(column),
+                                    column
+                                ),
+                                column
+                            ),
+                            column
+                        )
                     );
 
                     // Count settings that could render in the trailing Action
@@ -4348,37 +4890,6 @@ const DataGrid = forwardRef(
                                                               iconConfig,
                                                               index
                                                           ) => {
-                                                              // Get the icon component based on the id
-                                                              const getIconComponent =
-                                                                  (iconId) => {
-                                                                      switch (
-                                                                          iconId
-                                                                      ) {
-                                                                          case 'clock':
-                                                                              return Clock;
-                                                                          case 'alarm':
-                                                                              return AlarmClock;
-                                                                          case 'check':
-                                                                              return Check;
-                                                                          case 'edit':
-                                                                              return Edit;
-                                                                          case 'envelope':
-                                                                              return Mail;
-                                                                          case 'file':
-                                                                              return File;
-                                                                          case 'image':
-                                                                              return Image;
-                                                                          case 'copy':
-                                                                              return Copy;
-                                                                          case 'cloudUpload':
-                                                                              return Upload;
-                                                                          case 'cloudDownload':
-                                                                              return DownloadIcon;
-                                                                          default:
-                                                                              return Clock; // Default fallback
-                                                                      }
-                                                                  };
-
                                                               // Check if this icon should be shown based on show conditions
                                                               if (
                                                                   !shouldShowGroupAction(
@@ -4390,7 +4901,7 @@ const DataGrid = forwardRef(
                                                               }
 
                                                               const IconComponent =
-                                                                  getIconComponent(
+                                                                  getGroupIconComponent(
                                                                       iconConfig.id
                                                                   );