@wavemaker-ai/react-runtime 1.0.0-rc.309

package/components/data/table/hooks/useTableColumns.js

@@ -0,0 +1,360 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTableColumns = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _material = require("@mui/material");
+var _lodashEs = require("lodash-es");
+var _utils = require("../utils");
+var _renderDisplayCell = require("../utils/renderDisplayCell");
+var _columnBuilder = require("../utils/columnBuilder");
+var _columnWidthDistribution = require("../utils/columnWidthDistribution");
+var _useResponsiveColumns = require("./useResponsiveColumns");
+var _tableRowAction = _interopRequireDefault(require("../table-row-action"));
+var _excluded = ["action", "index", "rowData", "rowIndex", "rowId", "listener"],
+  _excluded2 = ["onSave", "onCancel", "rowData", "rowIndex", "rowId", "listener", "deleteRowAction"];
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
+var __jsx = _react["default"].createElement;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/**
+ * Handles row selection for action buttons
+ * Since action buttons are interactive elements, they bypass normal selection logic
+ * This function explicitly triggers the appropriate selection handler
+ */
+var handleActionSelection = function handleActionSelection(rowId, rowData, handlers) {
+  var useMultiSelect = handlers.useMultiSelect,
+    handleMultiSelection = handlers.handleMultiSelection,
+    isRowSelected = handlers.isRowSelected,
+    useRadioSelect = handlers.useRadioSelect,
+    handleRadioSelection = handlers.handleRadioSelection;
+  if (useMultiSelect && handleMultiSelection && isRowSelected) {
+    var currentlySelected = isRowSelected(rowId);
+    handleMultiSelection(rowId, rowData, !currentlySelected);
+  } else if (useRadioSelect && handleRadioSelection) {
+    handleRadioSelection(rowId, rowData);
+  }
+};
+
+/**
+ * Creates a unified click handler for action buttons
+ * Triggers: onRowclick → selection → action-specific onClick
+ */
+var createActionClickHandler = function createActionClickHandler(rowData, rowId, handlers, actionOnClick) {
+  return function (event, widget, newVal) {
+    // 1. Trigger row click handler (includes onRowclick callback)
+    if (handlers.handleRowClick && event) {
+      handlers.handleRowClick(event, rowData, rowId);
+    }
+
+    // 2. Explicitly handle selection (bypasses interactive element check)
+    handleActionSelection(rowId, rowData, handlers);
+
+    // 3. Trigger action-specific onClick
+    actionOnClick === null || actionOnClick === void 0 || actionOnClick(event, widget, newVal);
+  };
+};
+
+/**
+ * Renders a single action button for a table row
+ * Memoized to prevent unnecessary re-renders
+ */
+var ActionButton = /*#__PURE__*/_react["default"].memo(function (_ref) {
+  var action = _ref.action,
+    index = _ref.index,
+    rowData = _ref.rowData,
+    rowIndex = _ref.rowIndex,
+    rowId = _ref.rowId,
+    listener = _ref.listener,
+    selectionHandlers = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var actionKey = action.key || action.name;
+  var btnClass = (0, _utils.getActionButtonClass)(action);
+  var handleClick = createActionClickHandler(rowData, rowId, selectionHandlers, action.onClick);
+  return __jsx(_tableRowAction["default"], {
+    key: "row-action-".concat(index, "-").concat(actionKey),
+    name: action.name || "table-row-action-".concat(index, "-").concat(actionKey),
+    className: btnClass,
+    "data-action-key": actionKey,
+    displayName: action.displayName || "",
+    title: action.title,
+    iconclass: action.iconclass,
+    action: action.action,
+    row: rowData,
+    rowIndex: rowIndex,
+    listener: listener,
+    show: action.show,
+    onClick: handleClick,
+    widgettype: action.widgettype
+  });
+});
+ActionButton.displayName = "ActionButton";
+
+/**
+ * Renders editing mode action buttons (save, cancel, delete)
+ * Memoized to prevent unnecessary re-renders
+ */
+var EditingActionButtons = /*#__PURE__*/_react["default"].memo(function (_ref2) {
+  var onSave = _ref2.onSave,
+    onCancel = _ref2.onCancel,
+    rowData = _ref2.rowData,
+    rowIndex = _ref2.rowIndex,
+    rowId = _ref2.rowId,
+    listener = _ref2.listener,
+    deleteRowAction = _ref2.deleteRowAction,
+    selectionHandlers = (0, _objectWithoutProperties2["default"])(_ref2, _excluded2);
+  var buttons = (0, _columnBuilder.createEditingActionButtons)();
+  var handleButtonClick = (0, _react.useCallback)(function (button, event, widget) {
+    var _deleteRowAction$onCl;
+    event === null || event === void 0 || event.preventDefault();
+    event === null || event === void 0 || event.stopPropagation();
+    var isDeleteButton = button.key === "delete-edit";
+
+    // Trigger row click and selection for delete button only
+    if (isDeleteButton && event) {
+      var _selectionHandlers$ha;
+      (_selectionHandlers$ha = selectionHandlers.handleRowClick) === null || _selectionHandlers$ha === void 0 || _selectionHandlers$ha.call(selectionHandlers, event, rowData, rowId);
+      handleActionSelection(rowId, rowData, selectionHandlers);
+    }
+
+    // Execute button-specific action
+    switch (button.key) {
+      case "save-edit":
+        onSave();
+        break;
+      case "delete-edit":
+        deleteRowAction === null || deleteRowAction === void 0 || (_deleteRowAction$onCl = deleteRowAction.onClick) === null || _deleteRowAction$onCl === void 0 || _deleteRowAction$onCl.call(deleteRowAction, event, rowData);
+        break;
+      default:
+        onCancel();
+    }
+  }, [onSave, onCancel, deleteRowAction, rowData, rowId, selectionHandlers]);
+  return __jsx(_react["default"].Fragment, null, buttons.map(function (button) {
+    return __jsx(_tableRowAction["default"], {
+      key: button.key,
+      name: button.name,
+      className: button.className,
+      "data-action-key": button.dataActionKey,
+      displayName: button.displayName,
+      title: button.title,
+      iconclass: button.iconclass,
+      action: button.action,
+      row: rowData,
+      rowIndex: rowIndex,
+      listener: listener,
+      show: button.show,
+      onClick: function onClick(event, widget) {
+        return handleButtonClick(button, event, widget);
+      },
+      widgettype: button.widgettype
+    });
+  }));
+});
+EditingActionButtons.displayName = "EditingActionButtons";
+var useTableColumns = exports.useTableColumns = function useTableColumns(_ref3) {
+  var wmTableColumns = _ref3.wmTableColumns,
+    _ref3$columnsVersion = _ref3.columnsVersion,
+    columnsVersion = _ref3$columnsVersion === void 0 ? 0 : _ref3$columnsVersion,
+    rowActions = _ref3.rowActions,
+    listener = _ref3.listener,
+    deleteRecord = _ref3.deleteRecord,
+    showrowindex = _ref3.showrowindex,
+    editmode = _ref3.editmode,
+    _ref3$isDynamicTable = _ref3.isDynamicTable,
+    isDynamicTable = _ref3$isDynamicTable === void 0 ? false : _ref3$isDynamicTable,
+    renderEditableCell = _ref3.renderEditableCell,
+    isRowEditing = _ref3.isRowEditing,
+    editingRowId = _ref3.editingRowId,
+    startEditing = _ref3.startEditing,
+    cancelEditing = _ref3.cancelEditing,
+    saveEditing = _ref3.saveEditing,
+    cellState = _ref3.cellState,
+    isResizing = _ref3.isResizing,
+    handleRowClick = _ref3.handleRowClick,
+    handleRadioSelection = _ref3.handleRadioSelection,
+    handleMultiSelection = _ref3.handleMultiSelection,
+    useRadioSelect = _ref3.useRadioSelect,
+    useMultiSelect = _ref3.useMultiSelect,
+    isRowSelected = _ref3.isRowSelected;
+  // Filter columns based on viewport
+  var visibleColumns = (0, _useResponsiveColumns.useResponsiveColumns)(wmTableColumns);
+
+  // Group selection handlers for easier prop passing
+  var selectionHandlers = (0, _react.useMemo)(function () {
+    return {
+      handleRowClick: handleRowClick,
+      handleRadioSelection: handleRadioSelection,
+      handleMultiSelection: handleMultiSelection,
+      useRadioSelect: useRadioSelect,
+      useMultiSelect: useMultiSelect,
+      isRowSelected: isRowSelected
+    };
+  }, [handleRowClick, handleRadioSelection, handleMultiSelection, useRadioSelect, useMultiSelect, isRowSelected]);
+
+  // Memoize the cell render function to prevent re-renders
+  var renderCell = (0, _react.useCallback)(function (wmColumn, row) {
+    var _row$original;
+    var rowId = (row === null || row === void 0 || (_row$original = row.original) === null || _row$original === void 0 ? void 0 : _row$original._wmTableRowId) || (row === null || row === void 0 ? void 0 : row.id);
+    var isEditingThisRow = isRowEditing(rowId);
+    var shouldRenderEditableCell = (editmode === "inline" || editmode === "quickedit") && isEditingThisRow && !wmColumn.readonly;
+    return __jsx(_material.Box, {
+      "data-col-identifier": wmColumn.field
+    }, shouldRenderEditableCell ? renderEditableCell(wmColumn, row.original, rowId) : (0, _renderDisplayCell.renderDisplayCell)(wmColumn, row.original, listener, cellState));
+  }, [editmode, editingRowId, isRowEditing, renderEditableCell, cellState, listener]);
+
+  // Filter row actions based on edit mode
+  var filteredRowActions = (0, _react.useMemo)(function () {
+    if (editmode === "quickedit") {
+      return (0, _lodashEs.filter)(rowActions, function (action) {
+        return action.key === "deleterow" || action.action === "delete";
+      });
+    }
+    return rowActions;
+  }, [rowActions, editmode]);
+
+  // Find delete action once (used in editing mode)
+  var deleteRowAction = (0, _react.useMemo)(function () {
+    return filteredRowActions.find(function (action) {
+      return action.key === "deleterow" || action.action === "delete";
+    });
+  }, [filteredRowActions]);
+
+  // Create action column cell renderer
+  var renderActionCell = (0, _react.useCallback)(function (_ref4) {
+    var _row$original$_wmTabl, _row$original2;
+    var row = _ref4.row;
+    var rowId = (_row$original$_wmTabl = row === null || row === void 0 || (_row$original2 = row.original) === null || _row$original2 === void 0 ? void 0 : _row$original2._wmTableRowId) !== null && _row$original$_wmTabl !== void 0 ? _row$original$_wmTabl : row === null || row === void 0 ? void 0 : row.id;
+    var isEditing = isRowEditing(rowId);
+    var commonProps = _objectSpread({
+      rowData: row.original,
+      rowIndex: row.index,
+      rowId: rowId,
+      listener: listener
+    }, selectionHandlers);
+    return __jsx(_material.Box, {
+      component: "span",
+      className: "actions-column",
+      "data-identifier": "actionButtons"
+    }, isEditing && editmode !== "quickedit" ? __jsx(EditingActionButtons, (0, _extends2["default"])({}, commonProps, {
+      onSave: saveEditing,
+      onCancel: cancelEditing,
+      deleteRowAction: deleteRowAction
+    })) : (0, _lodashEs.map)(filteredRowActions, function (action, index) {
+      return __jsx(ActionButton, (0, _extends2["default"])({
+        key: "".concat(row.id, "-").concat(index)
+      }, commonProps, {
+        action: action,
+        index: index
+      }));
+    }));
+  }, [isRowEditing, editmode, filteredRowActions, saveEditing, cancelEditing, deleteRowAction, listener, selectionHandlers]);
+
+  /**
+   * Creates the action column definition based on configuration
+   */
+  var createActionColumnDef = (0, _react.useCallback)(function (manualActionColumn) {
+    var _getActionColumnSize = (0, _columnBuilder.getActionColumnSize)(editmode),
+      size = _getActionColumnSize.size,
+      minSize = _getActionColumnSize.minSize;
+    if (manualActionColumn) {
+      var _manualActionColumn$s;
+      // Custom action column with manual configuration
+      var columnSize = size;
+      if (manualActionColumn.width) {
+        columnSize = parseInt(manualActionColumn.width);
+      } else if ((_manualActionColumn$s = manualActionColumn.styles) !== null && _manualActionColumn$s !== void 0 && _manualActionColumn$s.width) {
+        columnSize = (0, _utils.parseWidth)(manualActionColumn.styles.width);
+      }
+      return {
+        id: "actions",
+        header: manualActionColumn.caption || "Actions",
+        size: columnSize,
+        minSize: minSize,
+        enableResizing: true,
+        cell: renderActionCell,
+        enableSorting: manualActionColumn.sortable !== false,
+        meta: _objectSpread({
+          textAlign: manualActionColumn.textalignment,
+          backgroundColor: manualActionColumn.backgroundcolor,
+          className: manualActionColumn.colClass
+        }, manualActionColumn.styles)
+      };
+    } else if (rowActions.length > 0 && (isDynamicTable || editmode !== "none")) {
+      // Default action column: show when dynamic table OR editmode allows; hide when editmode="none" and static table
+      return {
+        id: "actions",
+        header: "Actions",
+        size: size,
+        minSize: minSize,
+        maxSize: size,
+        enableResizing: false,
+        cell: renderActionCell
+      };
+    }
+    return null;
+  }, [editmode, isDynamicTable, rowActions.length, renderActionCell]);
+
+  /**
+   * Inserts action column at the specified position among data columns
+   */
+  var insertActionColumnAtPosition = (0, _react.useCallback)(function (columnDefs, dataColumns, actionColumnDef, position) {
+    if (position === 0) {
+      // Right after system columns, before data columns
+      columnDefs.push(actionColumnDef);
+      columnDefs.push.apply(columnDefs, (0, _toConsumableArray2["default"])((0, _columnBuilder.createDataColumns)(dataColumns, renderCell)));
+    } else if (position > 0 && position <= dataColumns.length) {
+      // At specific index among data columns
+      columnDefs.push.apply(columnDefs, (0, _toConsumableArray2["default"])((0, _columnBuilder.createDataColumns)(dataColumns.slice(0, position), renderCell)));
+      columnDefs.push(actionColumnDef);
+      columnDefs.push.apply(columnDefs, (0, _toConsumableArray2["default"])((0, _columnBuilder.createDataColumns)(dataColumns.slice(position), renderCell)));
+    } else {
+      // Default: at the end
+      columnDefs.push.apply(columnDefs, (0, _toConsumableArray2["default"])((0, _columnBuilder.createDataColumns)(dataColumns, renderCell)));
+      columnDefs.push(actionColumnDef);
+    }
+  }, [renderCell]);
+
+  // Create TanStack table column definitions
+  var columns = (0, _react.useMemo)(function () {
+    var columnDefs = [];
+
+    // Separate manual action column from regular data columns
+    var manualActionColumn = visibleColumns.find(function (col) {
+      return col.binding === "rowOperations";
+    });
+    var dataColumns = visibleColumns.filter(function (col) {
+      return col.binding !== "rowOperations";
+    });
+
+    // Add row index column if enabled
+    if (showrowindex) {
+      columnDefs.push((0, _columnBuilder.createRowIndexColumn)());
+    }
+
+    // Create action column definition
+    var actionColumnDef = createActionColumnDef(manualActionColumn);
+    if (actionColumnDef) {
+      // Determine position for action column
+      var position = (manualActionColumn === null || manualActionColumn === void 0 ? void 0 : manualActionColumn.rowactionsposition) !== undefined ? Number(manualActionColumn.rowactionsposition) : -1;
+      insertActionColumnAtPosition(columnDefs, dataColumns, actionColumnDef, position);
+    } else {
+      // No action column, just add data columns
+      columnDefs.push.apply(columnDefs, (0, _toConsumableArray2["default"])((0, _columnBuilder.createDataColumns)(dataColumns, renderCell)));
+    }
+
+    // Apply width distribution (skip during active resizing to prevent loops)
+    return isResizing ? columnDefs : (0, _columnWidthDistribution.distributeColumnWidths)(columnDefs);
+  }, [visibleColumns, columnsVersion, showrowindex, createActionColumnDef, insertActionColumnAtPosition, renderCell, isResizing]);
+  return {
+    columns: columns,
+    wmTableColumns: wmTableColumns,
+    rowActions: rowActions
+  };
+};

package/components/data/table/hooks/useTableData.d.ts

@@ -0,0 +1,2 @@
+import { UseTableDataProps, UseTableDataReturn } from "../props";
+export declare const useTableData: ({ dataset, onRowDelete, deleteoktext, deletecanceltext, confirmdelete, deletemessage, errormessage, showToast, datasource, binddataset, onSuccess, onError, onRowdelete, isServerSidePagination, listener, widgetName, }: UseTableDataProps) => UseTableDataReturn;

package/components/data/table/hooks/useTableData.js

@@ -0,0 +1,199 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof3 = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTableData = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _react = _interopRequireWildcard(require("react"));
+var _lodashEs = require("lodash-es");
+var _utils = require("../utils");
+var _confirmDialog = _interopRequireDefault(require("@wavemaker-ai/react-runtime/components/dialogs/confirm-dialog"));
+var _crudHandlers = require("../utils/crud-handlers");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
+/**
+ * Check if a record is completely empty (all data fields are null/undefined/empty string)
+ * Excludes internal properties from the check
+ */
+var isEmptyRecord = function isEmptyRecord(record) {
+  if (!record || (0, _typeof2["default"])(record) !== "object") {
+    return true;
+  }
+
+  // Get all properties except internal ones
+  var properties = Object.keys(record).filter(function (prop) {
+    return !_utils.INTERNAL_PROPERTIES.includes(prop) && !prop.startsWith("_wm");
+  });
+
+  // Check if ALL data properties are empty
+  return properties.every(function (prop) {
+    var data = record[prop];
+    return data === null || data === undefined || data === "";
+  });
+};
+
+/**
+ * Remove empty records from the dataset
+ * Similar to Angular's removeEmptyRecords functionality
+ */
+var removeEmptyRecords = function removeEmptyRecords(records) {
+  if (!records || !records.length) {
+    return [];
+  }
+
+  // Filter out completely empty records
+  return records.filter(function (record) {
+    return record && !isEmptyRecord(record);
+  });
+};
+var useTableData = exports.useTableData = function useTableData(_ref) {
+  var dataset = _ref.dataset,
+    onRowDelete = _ref.onRowDelete,
+    _ref$deleteoktext = _ref.deleteoktext,
+    deleteoktext = _ref$deleteoktext === void 0 ? _utils.TABLE_MESSAGES.deleteOkText : _ref$deleteoktext,
+    _ref$deletecanceltext = _ref.deletecanceltext,
+    deletecanceltext = _ref$deletecanceltext === void 0 ? _utils.TABLE_MESSAGES.deleteCancelText : _ref$deletecanceltext,
+    _ref$confirmdelete = _ref.confirmdelete,
+    confirmdelete = _ref$confirmdelete === void 0 ? _utils.TABLE_MESSAGES.deleteConfirmMessage : _ref$confirmdelete,
+    _ref$deletemessage = _ref.deletemessage,
+    deletemessage = _ref$deletemessage === void 0 ? _utils.TABLE_MESSAGES.deleteSuccess : _ref$deletemessage,
+    _ref$errormessage = _ref.errormessage,
+    errormessage = _ref$errormessage === void 0 ? _utils.TABLE_MESSAGES.deleteError : _ref$errormessage,
+    showToast = _ref.showToast,
+    datasource = _ref.datasource,
+    binddataset = _ref.binddataset,
+    onSuccess = _ref.onSuccess,
+    onError = _ref.onError,
+    onRowdelete = _ref.onRowdelete,
+    isServerSidePagination = _ref.isServerSidePagination,
+    listener = _ref.listener,
+    widgetName = _ref.widgetName;
+  // Add unique row IDs and filter out empty records
+  var processedDataset = (0, _react.useMemo)(function () {
+    var withIds = (0, _utils.addUniqueRowIds)(dataset || []);
+    // Remove completely empty records from display
+    return removeEmptyRecords(withIds);
+  }, [dataset]);
+  var _useState = (0, _react.useState)(processedDataset),
+    internalDataset = _useState[0],
+    setInternalDataset = _useState[1];
+
+  // Update internalDataset when dataset prop changes
+  (0, _react.useEffect)(function () {
+    if (!(0, _lodashEs.isEqual)(internalDataset, processedDataset)) {
+      setInternalDataset(processedDataset);
+    }
+  }, [processedDataset]);
+  var _useState2 = (0, _react.useState)(false),
+    showDeleteConfirm = _useState2[0],
+    setShowDeleteConfirm = _useState2[1];
+  var pendingDeleteRef = (0, _react.useRef)(null);
+
+  // Handle confirm deletion
+  var handleConfirmDelete = (0, _react.useCallback)(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee() {
+    var _pendingDeleteRef$cur, rowData, tableInstance, resolve, result;
+    return _regenerator["default"].wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          if (!pendingDeleteRef.current) {
+            _context.next = 7;
+            break;
+          }
+          _pendingDeleteRef$cur = pendingDeleteRef.current, rowData = _pendingDeleteRef$cur.rowData, tableInstance = _pendingDeleteRef$cur.tableInstance, resolve = _pendingDeleteRef$cur.resolve;
+          _context.next = 4;
+          return (0, _crudHandlers.handleDeleteOperation)({
+            rowData: rowData,
+            tableInstance: tableInstance,
+            internalDataset: internalDataset,
+            setInternalDataset: setInternalDataset,
+            datasource: datasource,
+            binddataset: binddataset,
+            onRowDelete: onRowDelete,
+            showToast: showToast,
+            onSuccess: onSuccess,
+            onError: onError,
+            onRowdelete: onRowdelete,
+            deletemessage: deletemessage,
+            errormessage: errormessage,
+            isServerSidePagination: isServerSidePagination,
+            listener: listener,
+            widgetName: widgetName
+          });
+        case 4:
+          result = _context.sent;
+          resolve(result);
+          pendingDeleteRef.current = null;
+        case 7:
+          setShowDeleteConfirm(false);
+        case 8:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })), [internalDataset, setInternalDataset, datasource, binddataset, onRowDelete, showToast, onSuccess, onError, onRowdelete, deletemessage, errormessage, isServerSidePagination, listener, widgetName]);
+
+  // Handle cancel deletion
+  var handleCancelDelete = (0, _react.useCallback)(function () {
+    if (pendingDeleteRef.current) {
+      pendingDeleteRef.current.resolve(false);
+      pendingDeleteRef.current = null;
+    }
+    setShowDeleteConfirm(false);
+  }, []);
+
+  // Delete record functionality with confirmation
+  var deleteRecord = (0, _react.useCallback)(/*#__PURE__*/function () {
+    var _ref3 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee2(rowData, tableInstance) {
+      return _regenerator["default"].wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            return _context2.abrupt("return", new Promise(function (resolve) {
+              // Store the delete operation details
+              pendingDeleteRef.current = {
+                rowData: rowData,
+                tableInstance: tableInstance,
+                resolve: resolve
+              };
+
+              // Show the confirmation dialog
+              setShowDeleteConfirm(true);
+            }));
+          case 1:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2);
+    }));
+    return function (_x, _x2) {
+      return _ref3.apply(this, arguments);
+    };
+  }(), []);
+
+  // Render the confirmation dialog component
+  var renderConfirmDialog = (0, _react.useCallback)(function () {
+    if (!showDeleteConfirm) return null;
+    return /*#__PURE__*/_react["default"].createElement(_confirmDialog["default"], {
+      name: "delete-row-confirm",
+      isopen: showDeleteConfirm,
+      title: _utils.TABLE_MESSAGES.deleteConfirmTitle,
+      message: confirmdelete,
+      iconclass: "wi wi-delete",
+      oktext: deleteoktext,
+      canceltext: deletecanceltext,
+      onOk: handleConfirmDelete,
+      onCancel: handleCancelDelete,
+      onClose: handleCancelDelete,
+      listener: {}
+    });
+  }, [showDeleteConfirm, handleConfirmDelete, handleCancelDelete, confirmdelete, deleteoktext, deletecanceltext]);
+  return {
+    internalDataset: internalDataset,
+    setInternalDataset: setInternalDataset,
+    deleteRecord: deleteRecord,
+    renderConfirmDialog: renderConfirmDialog
+  };
+};

package/components/data/table/hooks/useTableEdit.d.ts

@@ -0,0 +1,4 @@
+import { UseFormWidgetReturn, UseTableEditProps, UseTableEditReturn } from "../props";
+export declare const useTableEdit: ({ editMode, internalDataset, setInternalDataset, wmTableColumns, cellState, renderFormWidget, listener, onRowUpdate, onRowDelete, onNewRowAdded, showrowindex, radioselect, multiselect, rowActions, formposition, insertmessage, updatemessage, errormessage, showToast, hasRowExpansion, expansionPosition, datasource, binddataset, onSuccess, onError, onRowinsert, onRowupdate, tableRef, isServerSidePagination, tableName, }: UseTableEditProps & {
+    renderFormWidget: UseFormWidgetReturn["renderFormWidget"];
+}) => UseTableEditReturn;