@wavemaker/react-runtime 11.14.2-rc.6311 → 12.0.0-next.28533

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

@@ -7,7 +7,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 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");
@@ -17,26 +19,71 @@ 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; }
-// Extract action button rendering to reduce re-renders
+/**
+ * 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;
+    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"] || "",
+    displayName: action.displayName || "",
     title: action.title,
     iconclass: action.iconclass,
     action: action.action,
@@ -44,20 +91,51 @@ var ActionButton = /*#__PURE__*/_react["default"].memo(function (_ref) {
     rowIndex: rowIndex,
     listener: listener,
     show: action.show,
-    onClick: action.onClick,
+    onClick: handleClick,
     widgettype: action.widgettype
   });
 });
 ActionButton.displayName = "ActionButton";
 
-// Extract editing action buttons
+/**
+ * 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,
-    listener = _ref2.listener;
+    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,
@@ -73,9 +151,7 @@ var EditingActionButtons = /*#__PURE__*/_react["default"].memo(function (_ref2)
       listener: listener,
       show: button.show,
       onClick: function onClick(event, widget) {
-        event === null || event === void 0 || event.preventDefault();
-        event === null || event === void 0 || event.stopPropagation();
-        button.key === "save-edit" ? onSave() : onCancel();
+        return handleButtonClick(button, event, widget);
       },
       widgettype: button.widgettype
     });
@@ -91,23 +167,45 @@ var useTableColumns = exports.useTableColumns = function useTableColumns(_ref3)
     editmode = _ref3.editmode,
     renderEditableCell = _ref3.renderEditableCell,
     isRowEditing = _ref3.isRowEditing,
+    editingRowId = _ref3.editingRowId,
     startEditing = _ref3.startEditing,
     cancelEditing = _ref3.cancelEditing,
     saveEditing = _ref3.saveEditing,
     cellState = _ref3.cellState,
-    isResizing = _ref3.isResizing;
+    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 rowId = row.original._wmTableRowId || row.id;
+    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
-    }, (editmode === "inline" || editmode === "quickedit") && isRowEditing(rowId) && !wmColumn.readonly ? renderEditableCell(wmColumn, row.original, rowId) : (0, _renderDisplayCell.renderDisplayCell)(wmColumn, row.original, listener, cellState));
-  }, [editmode, isRowEditing, renderEditableCell, cellState, listener]);
+    }, shouldRenderEditableCell ? renderEditableCell(wmColumn, row.original, rowId) : (0, _renderDisplayCell.renderDisplayCell)(wmColumn, row.original, listener, cellState));
+  }, [editmode, editingRowId, isRowEditing, renderEditableCell, cellState, listener]);
 
-  // Filter row actions once
+  // Filter row actions based on edit mode
   var filteredRowActions = (0, _react.useMemo)(function () {
     if (editmode === "quickedit") {
       return (0, _lodashEs.filter)(rowActions, function (action) {
@@ -117,39 +215,113 @@ var useTableColumns = exports.useTableColumns = function useTableColumns(_ref3)
     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._wmTableRowId || row.id;
+    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, {
+    }, isEditing && editmode !== "quickedit" ? __jsx(EditingActionButtons, (0, _extends2["default"])({}, commonProps, {
       onSave: saveEditing,
       onCancel: cancelEditing,
-      rowData: row.original,
-      rowIndex: row.index,
-      listener: listener
-    }) : (0, _lodashEs.map)(filteredRowActions, function (action, index) {
-      return __jsx(ActionButton, {
-        key: "".concat(row.id, "-").concat(index),
+      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,
-        rowData: row.original,
-        rowIndex: row.index,
-        rowId: rowId,
-        listener: listener
-      });
+        index: index
+      }));
     }));
-  }, [isRowEditing, editmode, filteredRowActions, saveEditing, cancelEditing, listener]);
+  }, [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 && editmode !== "none") {
+      // Default action column
+      return {
+        id: "actions",
+        header: "Actions",
+        size: size,
+        minSize: minSize,
+        maxSize: size,
+        enableResizing: false,
+        cell: renderActionCell
+      };
+    }
+    return null;
+  }, [editmode, 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 (binding="rowOperations") from regular columns
+    // Separate manual action column from regular data columns
     var manualActionColumn = visibleColumns.find(function (col) {
       return col.binding === "rowOperations";
     });
@@ -157,104 +329,25 @@ var useTableColumns = exports.useTableColumns = function useTableColumns(_ref3)
       return col.binding !== "rowOperations";
     });
 
-    // Add row index column if showrowindex is true
+    // Add row index column if enabled
     if (showrowindex) {
       columnDefs.push((0, _columnBuilder.createRowIndexColumn)());
     }
 
-    // Determine where to insert the actions column
-    var insertActionColumn = function insertActionColumn() {
-      // If we have a manual action column, create a custom action column with its properties
-      if (manualActionColumn) {
-        var _manualActionColumn$s;
-        var _getActionColumnSize = (0, _columnBuilder.getActionColumnSize)(editmode),
-          size = _getActionColumnSize.size,
-          minSize = _getActionColumnSize.minSize;
-
-        // Extract width from manual action column styles or width prop
-        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);
-        }
-        columnDefs.push({
-          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)
-        });
-      }
-      // If no manual action column but we have row actions and editmode is not 'none'
-      else if (rowActions.length > 0 && editmode !== "none") {
-        var _getActionColumnSize2 = (0, _columnBuilder.getActionColumnSize)(editmode),
-          _size = _getActionColumnSize2.size,
-          _minSize = _getActionColumnSize2.minSize;
-        columnDefs.push({
-          id: "actions",
-          header: "Actions",
-          size: _size,
-          minSize: _minSize,
-          maxSize: _size,
-          // Fix the width for default action columns
-          enableResizing: false,
-          // Disable resizing for default action columns
-          cell: renderActionCell
-        });
-      }
-    };
-
-    // Handle action column positioning
-    if (manualActionColumn || rowActions.length > 0 && editmode !== "none") {
-      // For manual action column, use its rowactionsposition property
+    // 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;
-
-      // Position 0 means right after system columns (row index, selection) but before data columns
-      if (position === 0) {
-        // Insert action column immediately after system columns
-        insertActionColumn();
-        // Then add all data columns
-        columnDefs.push.apply(columnDefs, (0, _toConsumableArray2["default"])((0, _columnBuilder.createDataColumns)(dataColumns, renderCell)));
-      }
-      // Positive position means insert at specific index among data columns
-      else if (position > 0 && position <= dataColumns.length) {
-        // Add data columns before position
-        var columnsBeforePosition = dataColumns.slice(0, position);
-        columnDefs.push.apply(columnDefs, (0, _toConsumableArray2["default"])((0, _columnBuilder.createDataColumns)(columnsBeforePosition, renderCell)));
-
-        // Insert action column
-        insertActionColumn();
-
-        // Add remaining data columns
-        var columnsAfterPosition = dataColumns.slice(position);
-        columnDefs.push.apply(columnDefs, (0, _toConsumableArray2["default"])((0, _columnBuilder.createDataColumns)(columnsAfterPosition, renderCell)));
-      }
-      // Default or -1: add action column at the end
-      else {
-        // Add all data columns first
-        columnDefs.push.apply(columnDefs, (0, _toConsumableArray2["default"])((0, _columnBuilder.createDataColumns)(dataColumns, renderCell)));
-        // Then add action column
-        insertActionColumn();
-      }
+      insertActionColumnAtPosition(columnDefs, dataColumns, actionColumnDef, position);
     } else {
-      // No actions column needed, just add data columns
+      // No action column, just add data columns
       columnDefs.push.apply(columnDefs, (0, _toConsumableArray2["default"])((0, _columnBuilder.createDataColumns)(dataColumns, renderCell)));
     }
 
-    // Apply equal width distribution for data columns without explicit widths
-    // This ensures non-data columns (S.No, Actions, MultiSelect, RadioSelect) take minimum space
-    // while data columns without explicit widths share the remaining space equally
-    // Skip width distribution during active resizing to prevent infinite loops
+    // Apply width distribution (skip during active resizing to prevent loops)
     return isResizing ? columnDefs : (0, _columnWidthDistribution.distributeColumnWidths)(columnDefs);
-  }, [visibleColumns, rowActions, showrowindex, editmode, renderCell, renderActionCell, isResizing]);
+  }, [visibleColumns, showrowindex, createActionColumnDef, insertActionColumnAtPosition, renderCell, isResizing]);
   return {
     columns: columns,
     wmTableColumns: wmTableColumns,

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

@@ -1,18 +1,55 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
+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("../../../dialogs/confirm-dialog"));
+var _confirmDialog = _interopRequireDefault(require("@wavemaker/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" != _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); }
+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,
@@ -32,10 +69,14 @@ var useTableData = exports.useTableData = function useTableData(_ref) {
     onSuccess = _ref.onSuccess,
     onError = _ref.onError,
     onRowdelete = _ref.onRowdelete,
-    isServerSidePagination = _ref.isServerSidePagination;
-  // Add unique row IDs to the dataset if they don't already have them
+    isServerSidePagination = _ref.isServerSidePagination,
+    listener = _ref.listener,
+    widgetName = _ref.widgetName;
+  // Add unique row IDs and filter out empty records
   var processedDataset = (0, _react.useMemo)(function () {
-    return (0, _utils.addUniqueRowIds)(dataset || []);
+    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],
@@ -43,7 +84,9 @@ var useTableData = exports.useTableData = function useTableData(_ref) {
 
   // Update internalDataset when dataset prop changes
   (0, _react.useEffect)(function () {
-    setInternalDataset(processedDataset);
+    if (!(0, _lodashEs.isEqual)(internalDataset, processedDataset)) {
+      setInternalDataset(processedDataset);
+    }
   }, [processedDataset]);
   var _useState2 = (0, _react.useState)(false),
     showDeleteConfirm = _useState2[0],
@@ -76,7 +119,9 @@ var useTableData = exports.useTableData = function useTableData(_ref) {
             onRowdelete: onRowdelete,
             deletemessage: deletemessage,
             errormessage: errormessage,
-            isServerSidePagination: isServerSidePagination
+            isServerSidePagination: isServerSidePagination,
+            listener: listener,
+            widgetName: widgetName
           });
         case 4:
           result = _context.sent;
@@ -89,7 +134,7 @@ var useTableData = exports.useTableData = function useTableData(_ref) {
           return _context.stop();
       }
     }, _callee);
-  })), [internalDataset, setInternalDataset, datasource, binddataset, onRowDelete, showToast, onSuccess, onError, onRowdelete, deletemessage, errormessage, isServerSidePagination]);
+  })), [internalDataset, setInternalDataset, datasource, binddataset, onRowDelete, showToast, onSuccess, onError, onRowdelete, deletemessage, errormessage, isServerSidePagination, listener, widgetName]);
 
   // Handle cancel deletion
   var handleCancelDelete = (0, _react.useCallback)(function () {