@pega/sdk 0.0.13 → 0.0.15

package/templates/react-sdk-reference/src/components/template/DataReference/SearchForm.tsx

@@ -41,9 +41,9 @@ const checkIfSelectionsExist = (getPConnect) => {
 };
 
 const SearchForm = (props) => {
-  const { children, getPConnect, searchSelectCacheKey } = props;
+  const { children, getPConnect, searchSelectCacheKey, type, label } = props;
 
-  const deferLoadedTabs = children[2];
+  const deferLoadedTabs = type === 'ObjectReference' ? { props: { getPConnect } } : children[2];
   const cache: any = PCore.getNavigationUtils().getComponentCache(searchSelectCacheKey) ?? {};
   const { selectedCategory } = cache;
   const firstTabId = getFirstVisibleTabId(deferLoadedTabs, selectedCategory);
@@ -115,8 +115,8 @@ const SearchForm = (props) => {
   }
 
   return (
-    <Box display="flex" flexDirection="column" gap={2}>
-      <Typography variant="h5">{propsToUse.label}</Typography>
+    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+      <Typography variant="h5">{label ?? propsToUse.label}</Typography>
       {searchCategoriesComp}
       <TabContext value={currentTabId}>
         <Tabs style={{ display: 'none' }} value={currentTabId} onChange={(e, newValue) => setCurrentTabId(newValue)}>

package/templates/react-sdk-reference/src/components/template/HierarchicalForm/HierarchicalForm.tsx

@@ -12,9 +12,9 @@ export default function HierarchicalForm(props: PropsWithChildren<HierarchicalFo
   }
 
   return (
-    <Box display="flex" flexDirection="column">
+    <Box sx={{ display: 'flex', flexDirection: 'column' }}>
       {instructions && (
-        <Box mb={2}>
+        <Box sx={{ mb: 2 }}>
           <div dangerouslySetInnerHTML={{ __html: instructions }} />
         </Box>
       )}

package/templates/react-sdk-reference/src/components/template/InlineDashboard/InlineDashboard.tsx

@@ -50,7 +50,7 @@ export default function InlineDashboard(props: PropsWithChildren<InlineDashboard
       </Typography>
 
       {filterPosition === 'block-start' && (
-        <Grid container spacing={2} direction="column-reverse" className={classes.containerStyles}>
+        <Grid container spacing={2} sx={{ flexDirection: 'column-reverse' }} className={classes.containerStyles}>
           <Grid size={{ xs: 12 }} className={classes.colStyles}>
             {childrenToRender[0]}
           </Grid>

package/templates/react-sdk-reference/src/components/template/ListView/ListView.tsx

@@ -56,6 +56,7 @@ interface ListViewProps extends PConnProps {
   compositeKeys?: any;
   showDynamicFields?: boolean;
   readonlyContextList?: any;
+  selectedValues?: any;
   value: any;
   viewName?: string;
   showRecords?: boolean;
@@ -88,11 +89,14 @@ export default function ListView(props: ListViewProps) {
     compositeKeys,
     showDynamicFields,
     viewName,
-    readonlyContextList: selectedValues,
+    readonlyContextList,
+    selectedValues: selectedValuesProp,
     value,
     displayAs,
     localeReference,
   } = props;
+  // SimpleTableSelect passes selectedValues; other callers only set readonlyContextList
+  const selectedValues = selectedValuesProp ?? readonlyContextList;
   let { showRecords } = props;
   const ref = useRef({}).current;
   const cosmosTableRef = useRef();
@@ -1132,12 +1136,12 @@ export default function ListView(props: ListViewProps) {
     <>
       {arColumns && arColumns.length > 0 && (
         <Paper className={classes.paper}>
-          <Grid container justifyContent="space-between">
+          <Grid container sx={{ justifyContent: 'space-between' }}>
             <Typography variant="h6" color="textPrimary" gutterBottom>
               {_listTitle()}
             </Typography>
             {globalSearch && (
-              <Grid container spacing={1} alignItems="flex-end">
+              <Grid container spacing={1} sx={{ alignItems: 'flex-end' }}>
                 <Grid>
                   <SearchIcon />
                 </Grid>

package/templates/react-sdk-reference/src/components/template/SimpleTable/SimpleTableManual/SimpleTableManual.tsx

@@ -55,6 +55,9 @@ interface SimpleTableManualProps extends PConnProps {
   viewForEditModal: any;
   validatemessage?: string;
   required?: boolean;
+  targetClassLabel?: string;
+  uniqueField?: string;
+  hideEditRow?: boolean;
 }
 
 const useStyles = makeStyles((/* theme */) => ({
@@ -101,9 +104,6 @@ let menuColumnId = '';
 let menuColumnType = '';
 let menuColumnLabel = '';
 
-const filterByColumns: any[] = [];
-let myRows: any[];
-
 export default function SimpleTableManual(props: PropsWithChildren<SimpleTableManualProps>) {
   const classes = useStyles();
   const {
@@ -118,6 +118,7 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
     contextClass,
     hideAddRow,
     hideDeleteRow,
+    hideEditRow,
     propertyLabel,
     fieldMetadata,
     editMode,
@@ -129,7 +130,10 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
     viewForEditModal,
     required,
     validatemessage,
+    targetClassLabel,
+    uniqueField,
   } = props;
+  const normalizedUniqueField = uniqueField?.charAt(0) === '.' ? uniqueField.substring(1) : uniqueField;
   const pConn = getPConnect();
   const [rowData, setRowData] = useState([]);
   const [elements, setElementsData] = useState([]);
@@ -148,6 +152,8 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
   const [displayDialogDateFilter, setDisplayDialogDateFilter] = useState<string>('notequal');
   const [displayDialogDateValue, setDisplayDialogDateValue] = useState<string>('');
   const selectedRowIndex: any = useRef(null);
+  const myRowsRef = useRef<any[]>([]);
+  const filterByColumnsRef = useRef<any[]>([]);
   const localizedVal = PCore.getLocaleUtils().getLocaleValue;
   const localeCategory = 'SimpleTable';
   const parameters = fieldMetadata?.datasource?.parameters;
@@ -163,8 +169,17 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
   pConn.setReferenceList(resolvedList);
   const menuIconOverride$ = Utils.getImageSrc('trash', Utils.getSDKStaticConentUrl());
 
-  const resolvedFields = children?.[0]?.children || presets?.[0].children?.[0].children;
-  const primaryFieldsViewIndex = resolvedFields.findIndex((field) => field.config.value === 'pyPrimaryFields');
+  // sdk-react's `children` prop is React elements, so resolved columns come from the config props instead.
+  const resolvedFields =
+    children?.[0]?.children ||
+    presets?.[0].children?.[0].children ||
+    (pConn.getConfigProps() as any)?.children?.[0]?.children;
+  // @ts-ignore
+  const qualifiedPrimaryFields = PCore.getNameSpaceUtils?.()?.getDefaultQualifiedName('pyPrimaryFields');
+  const primaryFieldsViewIndex = resolvedFields?.findIndex((field) => {
+    const value = field.config.value;
+    return value === 'pyPrimaryFields' || value === qualifiedPrimaryFields;
+  });
   // NOTE: props has each child.config with datasource and value undefined
   //  but getRawMetadata() has each child.config with datasource and value showing their unresolved values (ex: "@P thePropName")
   //  We need to use the prop name as the "glue" to tie the table dataSource, displayColumns and data together.
@@ -188,22 +203,51 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
     (editMode ? editMode === 'modal' : addAndEditRowsWithin === 'modal') &&
     !(renderMode === 'ReadOnly' || isDisplayModeEnabled);
   const showDeleteButton = editableMode && !hideDeleteRow;
+  const showEditButton = allowEditingInModal && !hideEditRow;
+  const { allowRowDelete: allowRowDeleteConfig } = pConn.getComponentConfig?.() ?? {};
+
+  const isDeleteAllowedForRow = (index: number): boolean => {
+    if (!showDeleteButton) return false;
+    if (allowRowDeleteConfig === undefined || allowRowDeleteConfig === true) return true;
+    if (typeof allowRowDeleteConfig === 'string' && allowRowDeleteConfig.startsWith('@E ')) {
+      try {
+        const expression = allowRowDeleteConfig.replace('@E ', '');
+        // @ts-expect-error - options param is optional per corejs docs
+        return PCore.getExpressionEngine().evaluate(expression, referenceList[index]);
+      } catch {
+        return true;
+      }
+    }
+    return false;
+  };
   const defaultView = editModeConfig ? editModeConfig.defaultView : viewForAddAndEditModal;
   const bUseSeparateViewForEdit = editModeConfig ? editModeConfig.useSeparateViewForEdit : useSeparateViewForEdit;
   const editView = editModeConfig ? editModeConfig.editView : viewForEditModal;
-
+  const editType = editModeConfig?.editType;
+  const defaultActionId = editType === 'action' ? editModeConfig?.defaultAction : undefined;
+  const editActionId =
+    editType === 'action' && editModeConfig?.useSeparateActionForEdit
+      ? editModeConfig?.editAction
+      : editModeConfig?.defaultAction;
   const configFields = getConfigFields(rawFields, contextClass, primaryFieldsViewIndex);
-
-  const fieldsWithPropNames = rawFields.map((field, index) => {
-    return {
-      ...resolvedFields[index],
-      propName: field.config.value.replace('@P .', ''),
-    };
+  const addLabel = targetClassLabel
+    ? localizedVal('Add {0}', 'SimpleTable').replace('{0}', targetClassLabel)
+    : localizedVal('Add', 'SimpleTable');
+
+  const fieldsWithPropNames = configFields.map((field) => {
+    let propName = field.config.value;
+    if (propName.startsWith('@')) {
+      propName = propName.substring(propName.indexOf(' ') + 1);
+    }
+    if (propName.startsWith('.')) {
+      propName = propName.substring(1);
+    }
+    return { ...field, propName };
   });
 
   useEffect(() => {
     buildElementsForTable();
-    if (readOnlyMode || allowEditingInModal) {
+    if (readOnlyMode || allowEditingInModal || hideEditRow) {
       generateRowsData();
     }
   }, [referenceList]);
@@ -220,7 +264,7 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
       isDisplayModeEnabled || readOnlyMode
         ? initializeColumns(configFields, undefined)
         : // For inline edit table
-          buildFieldsForTable(rawFields, getPConnect(), showDeleteButton, {
+          buildFieldsForTable(configFields, getPConnect(), showDeleteButton, {
             primaryFieldsViewIndex,
             fields: resolvedFields,
           }),
@@ -233,11 +277,14 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
         .getListActions()
         .initDefaultPageInstructions(
           getPConnect().getReferenceList(),
-          fieldDefs.filter((item) => item.name).map((item) => item.name),
+          // Temporary filter for attachments to align with constellation payload behavior.
+          fieldDefs.filter((item) => item.name && item.meta?.type !== 'Attachment').map((item) => item.name),
         );
     } else {
-      // @ts-expect-error - An argument for 'fields' was not provided
-      getPConnect().getListActions().initDefaultPageInstructions(getPConnect().getReferenceList());
+      // @ts-ignore - fields param is optional, uniqueField passed as 3rd arg for page instructions
+      getPConnect()
+        .getListActions()
+        .initDefaultPageInstructions(getPConnect().getReferenceList(), undefined, uniqueField);
     }
   }, []);
 
@@ -267,8 +314,10 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
     // See what data (if any) we have to display
     const refKeys: string[] = inColKey?.split('.');
     let valBuilder = inRowData;
+    let index = 0;
     for (const key of refKeys) {
-      valBuilder = valBuilder[key];
+      index += 1;
+      valBuilder = valBuilder[key] !== undefined || index === refKeys.length ? valBuilder[key] : valBuilder;
     }
     return getFormattedValue(valBuilder, inColKey);
   }
@@ -276,21 +325,25 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
   const formatRowsData = (data) => {
     if (!data) return {};
 
-    return data.map((item) => {
-      return displayedColumns.reduce((dataForRow, colKey) => {
-        dataForRow[colKey] = getRowValue(item, colKey);
-        return dataForRow;
-      }, {});
+    return data.map((item, idx) => {
+      const dataForRow = displayedColumns.reduce((acc, colKey) => {
+        acc[colKey] = getRowValue(item, colKey);
+        return acc;
+      }, {} as any);
+      dataForRow.__originalIndex = idx;
+      return dataForRow;
     });
   };
 
   function generateRowsData() {
+    myRowsRef.current = [];
+
     // if referenceList is empty and dataPageName property value exists then make a datapage fetch call and get the list of data.
     if (!referenceList.length && dataPageName) {
       getDataPage(dataPageName, parameters, context)
         .then((listData) => {
           const data = formatRowsData(listData);
-          myRows = data;
+          myRowsRef.current = data || [];
           setRowData(data);
         })
         .catch((e) => {
@@ -301,16 +354,19 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
       //  in the table. So, iterate over referenceList to create the dataRows that
       //  we're using as the table's dataSource
       const data: any = [];
-      for (const row of referenceList) {
-        const dataForRow: object = {};
+      referenceList.forEach((row, idx) => {
+        const dataForRow: any = {};
         for (const col of displayedColumns) {
           const colKey: string = col;
           const theVal = getRowValue(row, colKey);
           dataForRow[colKey] = theVal || '';
         }
+        // Preserve the original position so stableSort can look up the right
+        // entry in `elements` even after filtering shrinks rowData.
+        dataForRow.__originalIndex = idx;
         data.push(dataForRow);
-        myRows = data;
-      }
+      });
+      myRowsRef.current = data;
       setRowData(data);
     }
   }
@@ -331,19 +387,27 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
   // console.log(JSON.stringify(rowData));
 
   const addRecord = () => {
-    if (allowEditingInModal && defaultView) {
+    if (allowEditingInModal && (defaultView || defaultActionId)) {
       pConn
         .getActionsApi()
-        // @ts-expect-error
+
         .openEmbeddedDataModal(
           defaultView,
+          // @ts-expect-error
           pConn,
           referenceListStr,
           referenceList.length,
           PCore.getConstants().RESOURCE_STATUS.CREATE,
+          targetClassLabel,
+          editType,
+          defaultActionId,
         );
     } else {
-      pConn.getListActions().insert({ classID: contextClass }, referenceList.length);
+      const payload: any = { classID: contextClass };
+      if (normalizedUniqueField) {
+        payload[normalizedUniqueField] = crypto.randomUUID();
+      }
+      pConn.getListActions().insert(payload, referenceList.length);
     }
 
     getPConnect().clearErrorMessages({
@@ -356,13 +420,17 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
     if (typeof selectedRowIndex.current === 'number') {
       pConn
         .getActionsApi()
-        // @ts-expect-error
+
         .openEmbeddedDataModal(
           bUseSeparateViewForEdit ? editView : defaultView,
+          // @ts-expect-error
           pConn,
           referenceListStr,
           selectedRowIndex.current,
           PCore.getConstants().RESOURCE_STATUS.UPDATE,
+          targetClassLabel,
+          editType,
+          editActionId,
         );
     }
   };
@@ -380,7 +448,7 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
     const eleData: any = [];
     referenceList.forEach((element, index) => {
       const data: any = [];
-      rawFields.forEach((item) => {
+      configFields.forEach((item) => {
         // removing label field from config to hide title in the table cell
         if (!item.config.hide) {
           item = {
@@ -388,14 +456,14 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
             config: {
               ...item.config,
               label: '',
-              displayMode: readOnlyMode || allowEditingInModal ? 'DISPLAY_ONLY' : undefined,
+              displayMode: readOnlyMode || allowEditingInModal || hideEditRow ? 'DISPLAY_ONLY' : undefined,
             },
           };
           const referenceListData = getReferenceList(pConn);
           const isDatapage = referenceListData.startsWith('D_');
           const pageReferenceValue = isDatapage
             ? `${referenceListData}[${index}]`
-            : `${pConn.getPageReference()}${referenceListData.substring(referenceListData.lastIndexOf('.'))}[${index}]`;
+            : `${pConn.getPageReference()}${referenceListData}[${index}]`;
           const config = {
             meta: item,
             options: {
@@ -460,11 +528,7 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
       return a[1] - b[1];
     });
 
-    const newElements = new Array(stabilizedThis.length);
-    stabilizedThis.forEach((el, index) => {
-      newElements[index] = elements[el[1]];
-    });
-    return newElements;
+    return stabilizedThis.map(([el]) => el);
   }
 
   function _menuClick(event, columnId: string, columnType: string, labelValue: string) {
@@ -490,7 +554,7 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
 
     let bFound = false;
 
-    for (const filterObj of filterByColumns) {
+    for (const filterObj of filterByColumnsRef.current) {
       if (filterObj.ref === menuColumnId) {
         setFilterBy(menuColumnLabel);
         if (filterObj.type === 'Date' || filterObj.type === 'DateTime' || filterObj.type === 'Time') {
@@ -556,10 +620,10 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
 
   function filterSortGroupBy() {
     // get original data set
-    let theData: any = myRows.slice();
+    let theData: any = myRowsRef.current?.slice();
 
     // last filter config data is global
-    theData = theData.filter(filterData(filterByColumns));
+    theData = theData?.filter(filterData(filterByColumnsRef.current));
 
     // move data to array and then sort
     setRowData(theData);
@@ -567,7 +631,7 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
 
   function updateFilterWithInfo() {
     let bFound = false;
-    for (const filterObj of filterByColumns) {
+    for (const filterObj of filterByColumnsRef.current) {
       if (filterObj.ref === menuColumnId) {
         filterObj.type = filterType;
         if (containsDateOrTime) {
@@ -595,7 +659,7 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
         filterObj.containsFilterValue = displayDialogContainsValue;
       }
 
-      filterByColumns.push(filterObj);
+      filterByColumnsRef.current.push(filterObj);
     }
   }
 
@@ -607,7 +671,7 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
   }
 
   function _showFilteredIcon(columnId) {
-    for (const filterObj of filterByColumns) {
+    for (const filterObj of filterByColumnsRef.current) {
       if (filterObj.ref === columnId) {
         if (filterObj.containsFilterValue !== '') {
           return true;
@@ -620,7 +684,7 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
   }
 
   function results() {
-    const len = editableMode ? elements.length : rowData.length;
+    const len = editableMode ? elements?.length : rowData?.length;
 
     return len ? (
       <span style={{ fontSize: '0.9em', opacity: '0.7' }}>
@@ -629,6 +693,10 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
     ) : null;
   }
 
+  if (!rawFields) {
+    return null;
+  }
+
   return (
     <>
       <TableContainer component={Paper} style={{ margin: '4px 0px' }} id="simple-table-manual">
@@ -647,7 +715,7 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
                 }
                 return (
                   <TableCell key={`head-${displayedColumns[index]}`} className={classes.tableCell}>
-                    {(readOnlyMode || allowEditingInModal) && field.cellRenderer !== 'DeleteIcon' ? (
+                    {(readOnlyMode || allowEditingInModal || hideEditRow) && field.cellRenderer !== 'DeleteIcon' ? (
                       <div style={{ display: 'flex' }}>
                         <TableSortLabel
                           style={{ width: '75%' }}
@@ -682,11 +750,12 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
           <TableBody>
             {editableMode &&
               !allowEditingInModal &&
+              !hideEditRow &&
               elements.map((row: any, index) => {
                 const theKey = `row-${index}`;
                 return (
                   <TableRow key={theKey}>
-                    {row.map((item, childIndex) => {
+                    {row?.map((item, childIndex) => {
                       const theColKey = `data-${index}-${childIndex}`;
                       return (
                         <TableCell key={theColKey} className={classes.tableCell}>
@@ -696,66 +765,71 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
                     })}
                     {showDeleteButton && (
                       <TableCell>
-                        <button
-                          type="button"
-                          className="psdk-utility-button"
-                          id="delete-button"
-                          aria-label="Delete Cell"
-                          onClick={() => deleteRecordFromInlineEditable(index)}
-                        >
-                          <img className="psdk-utility-card-action-svg-icon" src={menuIconOverride$} />
-                        </button>
+                        {isDeleteAllowedForRow(index) && (
+                          <button
+                            type="button"
+                            className="psdk-utility-button"
+                            id="delete-button"
+                            aria-label="Delete Cell"
+                            onClick={() => deleteRecordFromInlineEditable(index)}
+                          >
+                            <img className="psdk-utility-card-action-svg-icon" src={menuIconOverride$} />
+                          </button>
+                        )}
                       </TableCell>
                     )}
                   </TableRow>
                 );
               })}
-            {(readOnlyMode || allowEditingInModal) &&
+            {(readOnlyMode || allowEditingInModal || hideEditRow) &&
               rowData &&
               rowData.length > 0 &&
-              stableSort(rowData, getComparator(order, orderBy))
-                .slice(0)
-                .map((row, index) => {
-                  return (
-                    <TableRow key={index}>
-                      {row.map((item, childIndex) => {
-                        const theColKey = displayedColumns[childIndex];
-                        return (
-                          <TableCell key={theColKey} className={classes.tableCell}>
-                            {item}
-                          </TableCell>
-                        );
-                      })}
-                      {showDeleteButton && (
-                        <TableCell key="DeleteIcon" className={classes.tableCell}>
-                          <div>
-                            <MoreIcon
-                              id="table-edit-menu-icon"
-                              className={classes.moreIcon}
-                              onClick={(event) => {
-                                editMenuClick(event, index);
-                              }}
-                            />
-                            <Menu
-                              id="table-edit-menu"
-                              anchorEl={editAnchorEl}
-                              keepMounted
-                              open={Boolean(editAnchorEl)}
-                              onClose={_menuClose}
-                            >
-                              <MenuItem onClick={() => editRecord()}>Edit</MenuItem>
-                              <MenuItem onClick={() => deleteRecord()}>Delete</MenuItem>
-                            </Menu>
-                          </div>
+              stableSort(rowData, getComparator(order, orderBy)).map((row: any, displayIndex) => {
+                const originalIndex = row.__originalIndex;
+                return (
+                  <TableRow key={displayIndex}>
+                    {(elements as any[])[originalIndex]?.map((item, childIndex) => {
+                      const theColKey = displayedColumns[childIndex];
+                      return (
+                        <TableCell key={theColKey} className={classes.tableCell}>
+                          {item}
                         </TableCell>
-                      )}
-                    </TableRow>
-                  );
-                })}
+                      );
+                    })}
+                    {(showDeleteButton || showEditButton) && (
+                      <TableCell key="DeleteIcon" className={classes.tableCell}>
+                        <div>
+                          <MoreIcon
+                            id="table-edit-menu-icon"
+                            className={classes.moreIcon}
+                            onClick={(event) => {
+                              editMenuClick(event, originalIndex);
+                            }}
+                          />
+                          <Menu
+                            id="table-edit-menu"
+                            anchorEl={editAnchorEl}
+                            keepMounted
+                            open={Boolean(editAnchorEl)}
+                            onClose={_menuClose}
+                          >
+                            {showEditButton && <MenuItem onClick={() => editRecord()}>Edit</MenuItem>}
+                            {isDeleteAllowedForRow(originalIndex) && (
+                              <MenuItem onClick={() => deleteRecord()}>Delete</MenuItem>
+                            )}
+                          </Menu>
+                        </div>
+                      </TableCell>
+                    )}
+                  </TableRow>
+                );
+              })}
           </TableBody>
         </Table>
         {((readOnlyMode && (!rowData || rowData?.length === 0)) ||
-          (editableMode && (!referenceList || referenceList?.length === 0))) && (
+          (editableMode && !hideEditRow && (!referenceList || referenceList?.length === 0)) ||
+          (allowEditingInModal && (!rowData || rowData?.length === 0)) ||
+          (hideEditRow && (!rowData || rowData?.length === 0))) && (
           <div className="no-records" id="no-records">
             {getGenericFieldsLocalizedValue('COSMOSFIELDS.lists', 'No records found.')}
           </div>
@@ -764,7 +838,7 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
       {showAddRowButton && (
         <div style={{ fontSize: '1rem' }}>
           <Link style={{ cursor: 'pointer' }} onClick={addRecord} underline="hover">
-            + {localizedVal('Add', localeCategory)}
+            + {localizedVal(addLabel, localeCategory)}
           </Link>
         </div>
       )}