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

package/components/data/table/index.js

@@ -9,129 +9,160 @@ exports["default"] = exports.WmTableComponent = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactTable = require("@tanstack/react-table");
 var _material = require("@mui/material");
 var _lodashEs = require("lodash-es");
-var _withBaseWrapper = _interopRequireDefault(require("../../../higherOrder/withBaseWrapper"));
-var _pagination = _interopRequireDefault(require("../pagination"));
+var _withBaseWrapper = _interopRequireDefault(require("@wavemaker/react-runtime/higherOrder/withBaseWrapper"));
+var _pagination = _interopRequireDefault(require("@wavemaker/react-runtime/components/data/pagination"));
 var _hooks = require("./hooks");
 var _utils = require("./utils");
+var _groupHeaderUtils = require("./utils/groupHeaderUtils");
 var _components = require("./components");
 var _buildSelectionColumns = require("./utils/buildSelectionColumns");
-var _LoadingComponent = _interopRequireDefault(require("../pagination/components/LoadingComponent"));
+var _LoadingComponent = _interopRequireDefault(require("@wavemaker/react-runtime/components/data/pagination/components/LoadingComponent"));
 var _columnProxy = require("./utils/columnProxy");
-var _useDataSourceSubscription = require("../../../hooks/useDataSourceSubscription");
+var _useDataSourceSubscription = require("@wavemaker/react-runtime/hooks/useDataSourceSubscription");
 var _crudHandlers = require("./utils/crud-handlers");
-var _types = require("../types");
-var _excluded = ["name", "dataset", "navigation", "children", "listener", "pagesize", "navigationalign", "showrecordcount", "maxsize", "boundarylinks", "allowpagesizechange", "pagesizeoptions", "formposition", "editmode", "spacing", "title", "subheading", "iconclass", "exportOptions", "shownavigation", "onDemandLoad", "showrowindex", "showheader", "enablesort", "radioselect", "radioselecttitle", "radioselectarialabel", "multiselect", "multiselecttitle", "multiselectarialabel", "gridfirstrowselect", "rowClass", "deleteoktext", "deletecanceltext", "confirmdelete", "errormessage", "nodatamessage", "loadingdatamsg", "insertmessage", "updatemessage", "deletemessage", "onRowDelete", "onRowUpdate", "datasource", "binddataset", "onSuccess", "onError", "onRowinsert", "onRowupdate", "onRowdelete", "onRowclick", "statehandler", "formName", "filtermode", "searchlabel", "onBeforedatarender", "onDatarender", "className"]; // Import custom hooks and utilities
+var _types = require("@wavemaker/react-runtime/components/data/types");
+var _useEditedRows = require("./hooks/use-edited-rows");
+var _excluded = ["name", "dataset", "navigation", "children", "listener", "pagesize", "navigationalign", "showrecordcount", "maxsize", "boundarylinks", "allowpagesizechange", "pagesizeoptions", "formposition", "editmode", "spacing", "title", "subheading", "iconclass", "exportOptions", "shownavigation", "onDemandLoad", "showrowindex", "showheader", "enablesort", "enablecolumnselection", "onColumnselect", "onColumndeselect", "radioselect", "radioselecttitle", "radioselectarialabel", "multiselect", "multiselecttitle", "multiselectarialabel", "gridfirstrowselect", "isrowselectable", "rowClass", "deleteoktext", "deletecanceltext", "confirmdelete", "errormessage", "nodatamessage", "loadingdatamsg", "insertmessage", "updatemessage", "deletemessage", "ondemandmessage", "viewlessmessage", "showviewlessbutton", "onRowDelete", "onRowUpdate", "datasource", "binddataset", "onSuccess", "onError", "onRowinsert", "onRowupdate", "onRowdelete", "onRowclick", "onSort", "onBeforerowdelete", "onBeforefilter", "onHeaderclick", "onRowselect", "onRowdeselect", "onSetrecord", "statehandler", "formName", "parentForm", "filtermode", "filteronkeypress", "searchlabel", "onBeforedatarender", "onDatarender", "className", "exportformat", "exportdatasize", "onBeforeexport", "onAfterexport"];
 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; }
-var WmTableComponent = exports.WmTableComponent = /*#__PURE__*/(0, _react.memo)(function (_ref) {
-  var _datasource$paginatio2, _datasource$paginatio4;
-  var name = _ref.name,
-    _ref$dataset = _ref.dataset,
-    dataset = _ref$dataset === void 0 ? [] : _ref$dataset,
-    _ref$navigation = _ref.navigation,
-    navigation = _ref$navigation === void 0 ? "Pager" : _ref$navigation,
-    children = _ref.children,
-    listener = _ref.listener,
-    _ref$pagesize = _ref.pagesize,
-    pagesize = _ref$pagesize === void 0 ? 5 : _ref$pagesize,
-    _ref$navigationalign = _ref.navigationalign,
-    navigationalign = _ref$navigationalign === void 0 ? "left" : _ref$navigationalign,
-    _ref$showrecordcount = _ref.showrecordcount,
-    showrecordcount = _ref$showrecordcount === void 0 ? false : _ref$showrecordcount,
-    _ref$maxsize = _ref.maxsize,
-    maxsize = _ref$maxsize === void 0 ? 5 : _ref$maxsize,
-    _ref$boundarylinks = _ref.boundarylinks,
-    boundarylinks = _ref$boundarylinks === void 0 ? false : _ref$boundarylinks,
-    _ref$allowpagesizecha = _ref.allowpagesizechange,
-    allowpagesizechange = _ref$allowpagesizecha === void 0 ? false : _ref$allowpagesizecha,
-    _ref$pagesizeoptions = _ref.pagesizeoptions,
-    pagesizeoptions = _ref$pagesizeoptions === void 0 ? "5,10,20,50,100" : _ref$pagesizeoptions,
-    _ref$formposition = _ref.formposition,
-    formposition = _ref$formposition === void 0 ? "bottom" : _ref$formposition,
-    _ref$editmode = _ref.editmode,
-    editmode = _ref$editmode === void 0 ? "none" : _ref$editmode,
-    _ref$spacing = _ref.spacing,
-    spacing = _ref$spacing === void 0 ? "normal" : _ref$spacing,
-    title = _ref.title,
-    subheading = _ref.subheading,
-    iconclass = _ref.iconclass,
-    _ref$exportOptions = _ref.exportOptions,
-    exportOptions = _ref$exportOptions === void 0 ? [] : _ref$exportOptions,
-    _ref$shownavigation = _ref.shownavigation,
-    shownavigation = _ref$shownavigation === void 0 ? true : _ref$shownavigation,
-    _ref$onDemandLoad = _ref.onDemandLoad,
-    onDemandLoad = _ref$onDemandLoad === void 0 ? false : _ref$onDemandLoad,
-    _ref$showrowindex = _ref.showrowindex,
-    showrowindex = _ref$showrowindex === void 0 ? false : _ref$showrowindex,
-    _ref$showheader = _ref.showheader,
-    showheader = _ref$showheader === void 0 ? true : _ref$showheader,
-    _ref$enablesort = _ref.enablesort,
-    enablesort = _ref$enablesort === void 0 ? true : _ref$enablesort,
-    _ref$radioselect = _ref.radioselect,
-    radioselect = _ref$radioselect === void 0 ? false : _ref$radioselect,
-    _ref$radioselecttitle = _ref.radioselecttitle,
-    radioselecttitle = _ref$radioselecttitle === void 0 ? "" : _ref$radioselecttitle,
-    _ref$radioselectarial = _ref.radioselectarialabel,
-    radioselectarialabel = _ref$radioselectarial === void 0 ? _utils.TABLE_MESSAGES.radioSelectAriaLabel : _ref$radioselectarial,
-    _ref$multiselect = _ref.multiselect,
-    multiselect = _ref$multiselect === void 0 ? false : _ref$multiselect,
-    _ref$multiselecttitle = _ref.multiselecttitle,
-    multiselecttitle = _ref$multiselecttitle === void 0 ? "" : _ref$multiselecttitle,
-    _ref$multiselectarial = _ref.multiselectarialabel,
-    multiselectarialabel = _ref$multiselectarial === void 0 ? _utils.TABLE_MESSAGES.multiSelectAriaLabel : _ref$multiselectarial,
-    _ref$gridfirstrowsele = _ref.gridfirstrowselect,
-    gridfirstrowselect = _ref$gridfirstrowsele === void 0 ? false : _ref$gridfirstrowsele,
-    _ref$rowClass = _ref.rowClass,
-    rowClass = _ref$rowClass === void 0 ? "" : _ref$rowClass,
-    _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$errormessage = _ref.errormessage,
-    errormessage = _ref$errormessage === void 0 ? _utils.TABLE_MESSAGES.operationError : _ref$errormessage,
-    _ref$nodatamessage = _ref.nodatamessage,
-    nodatamessage = _ref$nodatamessage === void 0 ? _utils.TABLE_MESSAGES.noDataMessage : _ref$nodatamessage,
-    _ref$loadingdatamsg = _ref.loadingdatamsg,
-    loadingdatamsg = _ref$loadingdatamsg === void 0 ? _utils.TABLE_MESSAGES.loadingMessage : _ref$loadingdatamsg,
-    _ref$insertmessage = _ref.insertmessage,
-    insertmessage = _ref$insertmessage === void 0 ? _utils.TABLE_MESSAGES.insertSuccess : _ref$insertmessage,
-    _ref$updatemessage = _ref.updatemessage,
-    updatemessage = _ref$updatemessage === void 0 ? _utils.TABLE_MESSAGES.updateSuccess : _ref$updatemessage,
-    _ref$deletemessage = _ref.deletemessage,
-    deletemessage = _ref$deletemessage === void 0 ? _utils.TABLE_MESSAGES.deleteSuccess : _ref$deletemessage,
-    onRowDelete = _ref.onRowDelete,
-    onRowUpdate = _ref.onRowUpdate,
-    datasource = _ref.datasource,
-    binddataset = _ref.binddataset,
-    onSuccess = _ref.onSuccess,
-    onError = _ref.onError,
-    onRowinsert = _ref.onRowinsert,
-    onRowupdate = _ref.onRowupdate,
-    onRowdelete = _ref.onRowdelete,
-    onRowclick = _ref.onRowclick,
-    statehandler = _ref.statehandler,
-    formName = _ref.formName,
-    filtermode = _ref.filtermode,
-    _ref$searchlabel = _ref.searchlabel,
-    searchlabel = _ref$searchlabel === void 0 ? "Search" : _ref$searchlabel,
-    onBeforedatarender = _ref.onBeforedatarender,
-    onDatarender = _ref.onDatarender,
-    className = _ref.className,
-    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+var WmTableComponent = exports.WmTableComponent = /*#__PURE__*/(0, _react.memo)(function (props) {
+  var _listener$Widgets, _datasource$paginatio2, _datasource$paginatio4;
+  var name = props.name,
+    _props$dataset = props.dataset,
+    dataset = _props$dataset === void 0 ? [] : _props$dataset,
+    _props$navigation = props.navigation,
+    navigation = _props$navigation === void 0 ? "Basic" : _props$navigation,
+    children = props.children,
+    listener = props.listener,
+    _props$pagesize = props.pagesize,
+    pagesize = _props$pagesize === void 0 ? 5 : _props$pagesize,
+    _props$navigationalig = props.navigationalign,
+    navigationalign = _props$navigationalig === void 0 ? "left" : _props$navigationalig,
+    _props$showrecordcoun = props.showrecordcount,
+    showrecordcount = _props$showrecordcoun === void 0 ? false : _props$showrecordcoun,
+    _props$maxsize = props.maxsize,
+    maxsize = _props$maxsize === void 0 ? 5 : _props$maxsize,
+    _props$boundarylinks = props.boundarylinks,
+    boundarylinks = _props$boundarylinks === void 0 ? false : _props$boundarylinks,
+    _props$allowpagesizec = props.allowpagesizechange,
+    allowpagesizechange = _props$allowpagesizec === void 0 ? false : _props$allowpagesizec,
+    _props$pagesizeoption = props.pagesizeoptions,
+    pagesizeoptions = _props$pagesizeoption === void 0 ? "5,10,20,50,100" : _props$pagesizeoption,
+    _props$formposition = props.formposition,
+    formposition = _props$formposition === void 0 ? "bottom" : _props$formposition,
+    _props$editmode = props.editmode,
+    editmode = _props$editmode === void 0 ? "none" : _props$editmode,
+    _props$spacing = props.spacing,
+    spacing = _props$spacing === void 0 ? "normal" : _props$spacing,
+    title = props.title,
+    subheading = props.subheading,
+    iconclass = props.iconclass,
+    _props$exportOptions = props.exportOptions,
+    exportOptions = _props$exportOptions === void 0 ? [] : _props$exportOptions,
+    _props$shownavigation = props.shownavigation,
+    shownavigation = _props$shownavigation === void 0 ? true : _props$shownavigation,
+    _props$onDemandLoad = props.onDemandLoad,
+    onDemandLoad = _props$onDemandLoad === void 0 ? false : _props$onDemandLoad,
+    _props$showrowindex = props.showrowindex,
+    showrowindex = _props$showrowindex === void 0 ? false : _props$showrowindex,
+    _props$showheader = props.showheader,
+    showheader = _props$showheader === void 0 ? true : _props$showheader,
+    _props$enablesort = props.enablesort,
+    enablesort = _props$enablesort === void 0 ? true : _props$enablesort,
+    _props$enablecolumnse = props.enablecolumnselection,
+    enablecolumnselection = _props$enablecolumnse === void 0 ? false : _props$enablecolumnse,
+    onColumnselect = props.onColumnselect,
+    onColumndeselect = props.onColumndeselect,
+    _props$radioselect = props.radioselect,
+    radioselect = _props$radioselect === void 0 ? false : _props$radioselect,
+    _props$radioselecttit = props.radioselecttitle,
+    radioselecttitle = _props$radioselecttit === void 0 ? "" : _props$radioselecttit,
+    _props$radioselectari = props.radioselectarialabel,
+    radioselectarialabel = _props$radioselectari === void 0 ? _utils.TABLE_MESSAGES.radioSelectAriaLabel : _props$radioselectari,
+    _props$multiselect = props.multiselect,
+    multiselect = _props$multiselect === void 0 ? false : _props$multiselect,
+    _props$multiselecttit = props.multiselecttitle,
+    multiselecttitle = _props$multiselecttit === void 0 ? "" : _props$multiselecttit,
+    _props$multiselectari = props.multiselectarialabel,
+    multiselectarialabel = _props$multiselectari === void 0 ? _utils.TABLE_MESSAGES.multiSelectAriaLabel : _props$multiselectari,
+    _props$gridfirstrowse = props.gridfirstrowselect,
+    gridfirstrowselect = _props$gridfirstrowse === void 0 ? false : _props$gridfirstrowse,
+    _props$isrowselectabl = props.isrowselectable,
+    isrowselectable = _props$isrowselectabl === void 0 ? false : _props$isrowselectabl,
+    _props$rowClass = props.rowClass,
+    rowClass = _props$rowClass === void 0 ? "" : _props$rowClass,
+    _props$deleteoktext = props.deleteoktext,
+    deleteoktext = _props$deleteoktext === void 0 ? _utils.TABLE_MESSAGES.deleteOkText : _props$deleteoktext,
+    _props$deletecancelte = props.deletecanceltext,
+    deletecanceltext = _props$deletecancelte === void 0 ? _utils.TABLE_MESSAGES.deleteCancelText : _props$deletecancelte,
+    _props$confirmdelete = props.confirmdelete,
+    confirmdelete = _props$confirmdelete === void 0 ? _utils.TABLE_MESSAGES.deleteConfirmMessage : _props$confirmdelete,
+    _props$errormessage = props.errormessage,
+    errormessage = _props$errormessage === void 0 ? _utils.TABLE_MESSAGES.operationError : _props$errormessage,
+    _props$nodatamessage = props.nodatamessage,
+    nodatamessage = _props$nodatamessage === void 0 ? _utils.TABLE_MESSAGES.noDataMessage : _props$nodatamessage,
+    _props$loadingdatamsg = props.loadingdatamsg,
+    loadingdatamsg = _props$loadingdatamsg === void 0 ? _utils.TABLE_MESSAGES.loadingMessage : _props$loadingdatamsg,
+    _props$insertmessage = props.insertmessage,
+    insertmessage = _props$insertmessage === void 0 ? _utils.TABLE_MESSAGES.insertSuccess : _props$insertmessage,
+    _props$updatemessage = props.updatemessage,
+    updatemessage = _props$updatemessage === void 0 ? _utils.TABLE_MESSAGES.updateSuccess : _props$updatemessage,
+    _props$deletemessage = props.deletemessage,
+    deletemessage = _props$deletemessage === void 0 ? _utils.TABLE_MESSAGES.deleteSuccess : _props$deletemessage,
+    _props$ondemandmessag = props.ondemandmessage,
+    ondemandmessage = _props$ondemandmessag === void 0 ? "Load More" : _props$ondemandmessag,
+    _props$viewlessmessag = props.viewlessmessage,
+    viewlessmessage = _props$viewlessmessag === void 0 ? "View Less" : _props$viewlessmessag,
+    _props$showviewlessbu = props.showviewlessbutton,
+    showviewlessbutton = _props$showviewlessbu === void 0 ? false : _props$showviewlessbu,
+    onRowDelete = props.onRowDelete,
+    onRowUpdate = props.onRowUpdate,
+    datasource = props.datasource,
+    binddataset = props.binddataset,
+    onSuccess = props.onSuccess,
+    onError = props.onError,
+    onRowinsert = props.onRowinsert,
+    onRowupdate = props.onRowupdate,
+    onRowdelete = props.onRowdelete,
+    onRowclick = props.onRowclick,
+    onSort = props.onSort,
+    onBeforerowdelete = props.onBeforerowdelete,
+    onBeforefilter = props.onBeforefilter,
+    onHeaderclick = props.onHeaderclick,
+    onRowselect = props.onRowselect,
+    onRowdeselect = props.onRowdeselect,
+    onSetrecord = props.onSetrecord,
+    statehandler = props.statehandler,
+    formName = props.formName,
+    parentForm = props.parentForm,
+    filtermode = props.filtermode,
+    _props$filteronkeypre = props.filteronkeypress,
+    filteronkeypress = _props$filteronkeypre === void 0 ? false : _props$filteronkeypre,
+    _props$searchlabel = props.searchlabel,
+    searchlabel = _props$searchlabel === void 0 ? "Search" : _props$searchlabel,
+    onBeforedatarender = props.onBeforedatarender,
+    onDatarender = props.onDatarender,
+    className = props.className,
+    exportformat = props.exportformat,
+    exportdatasize = props.exportdatasize,
+    onBeforeexport = props.onBeforeexport,
+    onAfterexport = props.onAfterexport,
+    rest = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var _useState = (0, _react.useState)((datasource === null || datasource === void 0 ? void 0 : datasource.loading) || false),
     loading = _useState[0],
     setLoading = _useState[1];
+  var prevDatasetRef = (0, _react.useRef)(dataset);
+  var prevSelectedRow = (0, _react.useRef)(null);
+  var tableApisRegistered = (0, _react.useRef)(false);
   (0, _react.useEffect)(function () {
     // Sync local loading state with datasource loading
     if ((datasource === null || datasource === void 0 ? void 0 : datasource.loading) !== undefined) {
@@ -139,15 +170,15 @@ var WmTableComponent = exports.WmTableComponent = /*#__PURE__*/(0, _react.memo)(
     }
   }, [datasource === null || datasource === void 0 ? void 0 : datasource.loading]);
 
-  // State for accumulated data in Scroll navigation mode
+  // State for accumulated data in Scroll and On-Demand navigation modes
   var _useState2 = (0, _react.useState)([]),
-    scrollAccumulatedData = _useState2[0],
-    setScrollAccumulatedData = _useState2[1];
+    accumulatedData = _useState2[0],
+    setAccumulatedData = _useState2[1];
 
-  // Callback to receive accumulated data from pagination
-  var handleScrollDataUpdate = (0, _react.useCallback)(function (data) {
+  // Callback to receive accumulated data from pagination (for Scroll and On-Demand)
+  var handleAccumulatedDataUpdate = (0, _react.useCallback)(function (data) {
     // Only update if data has actually changed to prevent unnecessary re-renders
-    setScrollAccumulatedData(function (prevData) {
+    setAccumulatedData(function (prevData) {
       // If lengths are different, it's definitely new data
       if (prevData.length !== data.length) {
         return data;
@@ -157,10 +188,10 @@ var WmTableComponent = exports.WmTableComponent = /*#__PURE__*/(0, _react.memo)(
     });
   }, []);
 
-  // Reset accumulated data when navigation changes or dataset changes
+  // Reset accumulated data when navigation changes
   (0, _react.useEffect)(function () {
-    if (navigation !== "Scroll") {
-      setScrollAccumulatedData([]);
+    if (navigation !== "Scroll" && navigation !== "On-Demand") {
+      setAccumulatedData([]);
     }
   }, [navigation]);
 
@@ -173,9 +204,12 @@ var WmTableComponent = exports.WmTableComponent = /*#__PURE__*/(0, _react.memo)(
 
   // Determine if we're using server-side pagination
   // Check if datasource is API-aware (server-side) rather than checking runtime pagination data
-  var isServerSidePagination = (0, _react.useMemo)(function () {
+  var isServerSidePagination = (0, _react.useCallback)(function () {
+    if (navigation === "None") {
+      return false;
+    }
     return !!(datasource && datasource.execute && datasource.execute(_types.DataSource.Operation.IS_PAGEABLE));
-  }, [datasource]);
+  }, [datasource, navigation]);
 
   // Disable state management for Scroll navigation
   var effectiveStateHandler = navigation === "Scroll" ? "none" : statehandler;
@@ -208,7 +242,9 @@ var WmTableComponent = exports.WmTableComponent = /*#__PURE__*/(0, _react.memo)(
       onSuccess: onSuccess,
       onError: onError,
       onRowdelete: onRowdelete,
-      isServerSidePagination: isServerSidePagination
+      isServerSidePagination: isServerSidePagination(),
+      listener: listener,
+      widgetName: name
     }),
     internalDataset = _useTableData.internalDataset,
     setInternalDataset = _useTableData.setInternalDataset,
@@ -240,7 +276,7 @@ var WmTableComponent = exports.WmTableComponent = /*#__PURE__*/(0, _react.memo)(
       var persisted = (0, _utils.getTableState)(name, effectiveStateHandler);
 
       // Determine the actual page size (original datasource page size)
-      var actualPageSize;
+      var actualPageSize = 0;
       if ((persisted === null || persisted === void 0 ? void 0 : persisted.actualpagesize) !== undefined) {
         // If we have a persisted actualPageSize, use it (it should never change)
         actualPageSize = persisted.actualpagesize;
@@ -263,7 +299,7 @@ var WmTableComponent = exports.WmTableComponent = /*#__PURE__*/(0, _react.memo)(
         var persistedPageSize = persisted.pagesize || pagesize;
 
         // Set datasource maxResults if we have a persisted pageSize and datasource
-        if (persisted.pagesize && isServerSidePagination && datasource && datasource.maxResults !== undefined) {
+        if (persisted.pagesize && isServerSidePagination() && datasource && datasource.maxResults !== undefined) {
           datasource.maxResults = persistedPageSize;
         }
         return {
@@ -276,12 +312,12 @@ var WmTableComponent = exports.WmTableComponent = /*#__PURE__*/(0, _react.memo)(
       }
       return {
         initialPage: 1,
-        initialPageSize: pagesize,
-        initialActualPageSize: actualPageSize,
+        initialPageSize: actualPageSize,
+        initialActualPageSize: pagesize,
         initialSearchState: undefined,
         initialSortState: undefined
       };
-    }, [name, effectiveStateHandler, pagesize, isServerSidePagination, datasource, navigation]),
+    }, [name, effectiveStateHandler, pagesize, isServerSidePagination(), datasource, navigation]),
     initialPage = _useMemo.initialPage,
     initialPageSize = _useMemo.initialPageSize,
     initialActualPageSize = _useMemo.initialActualPageSize,
@@ -294,10 +330,27 @@ var WmTableComponent = exports.WmTableComponent = /*#__PURE__*/(0, _react.memo)(
   // Track previous page index to detect actual page changes
   var prevPageIndexRef = (0, _react.useRef)(-1);
 
+  // Use pagination state hook - manages controlled pagination state
+  var _usePaginationState = (0, _hooks.usePaginationState)({
+      initialPage: initialPage,
+      initialPageSize: initialPageSize,
+      editmode: editmode,
+      internalDataset: internalDataset,
+      datasource: datasource,
+      isServerSidePagination: isServerSidePagination()
+    }),
+    paginationState = _usePaginationState.paginationState,
+    setPaginationState = _usePaginationState.setPaginationState,
+    handlePaginationChange = _usePaginationState.handlePaginationChange,
+    handlePageSizeChangeBase = _usePaginationState.handlePageSizeChange;
+
+  // Multiselect is only valid when editmode is "quickedit" or "inline"
+  var effectiveMultiselect = multiselect;
+
   // Use row selection hook
   var _useRowSelection = (0, _hooks.useRowSelection)({
       radioselect: radioselect,
-      multiselect: multiselect,
+      multiselect: effectiveMultiselect,
       gridfirstrowselect: gridfirstrowselect,
       internalDataset: internalDataset,
       cellState: cellState,
@@ -312,9 +365,12 @@ var WmTableComponent = exports.WmTableComponent = /*#__PURE__*/(0, _react.memo)(
           currentPage: 1,
           currentPageSize: pagesize
         };
-      }
+      },
+      onRowselect: onRowselect,
+      onRowdeselect: onRowdeselect,
+      listener: listener,
+      navigation: navigation
     }),
-    selectedRowId = _useRowSelection.selectedRowId,
     selectedRowIds = _useRowSelection.selectedRowIds,
     useMultiSelect = _useRowSelection.useMultiSelect,
     useRadioSelect = _useRowSelection.useRadioSelect,
@@ -328,13 +384,21 @@ var WmTableComponent = exports.WmTableComponent = /*#__PURE__*/(0, _react.memo)(
   var _useTableState = (0, _hooks.useTableState)({
       editMode: editmode,
       radioselect: radioselect,
-      multiselect: multiselect
+      multiselect: effectiveMultiselect
     }),
     activeRowIds = _useTableState.activeRowIds,
     setActiveRow = _useTableState.setActiveRow,
     handleRowActiveClick = _useTableState.handleRowActiveClick,
     isRowActive = _useTableState.isRowActive;
 
+  // Sync activeRowIds with selectedRowIds when selection modes are active
+  // This ensures that when rows are selected/deselected, the active state follows
+  (0, _react.useEffect)(function () {
+    if (useRadioSelect || useMultiSelect) {
+      setActiveRow(selectedRowIds);
+    }
+  }, [selectedRowIds, useRadioSelect, useMultiSelect, setActiveRow]);
+
   // Use dynamic columns hook to generate columns from data when no children are provided
   var _useDynamicColumns = (0, _hooks.useDynamicColumns)({
       dataset: internalDataset,
@@ -363,22 +427,34 @@ var WmTableComponent = exports.WmTableComponent = /*#__PURE__*/(0, _react.memo)(
         return position === "footer" || position.includes("footer") || !action.position;
       });
 
+      // Parse table structure with groups support
+      var structure = (0, _utils.parseTableStructureWithGroups)(children);
+      var flatColumns = (0, _utils.flattenTableStructure)(structure);
+
       // Get static columns from children
-      var staticColumns = (0, _utils.parseTableColumns)(children);
+      var staticColumns = (0, _utils.parseTableColumns)(children, internalDataset);
 
-      // Use dynamic columns if no static columns are provided
-      // For dynamic tables, prefer dynamic columns even if they're empty initially (data loading)
-      var finalColumns = staticColumns.length > 0 ? staticColumns : isDynamicTable ? dynamicColumns : staticColumns;
+      // Check if we have groups in the structure
+      var hasGroups = structure.some(function (item) {
+        return "isGroup" in item && item.isGroup;
+      });
+
+      // Determine final columns:
+      // - If groups exist, use flatColumns (from structure) to preserve group structure
+      // - Otherwise, prefer static columns, then dynamic columns, then flat columns from structure
+      var finalColumns = hasGroups && flatColumns.length > 0 ? flatColumns : staticColumns.length > 0 ? staticColumns : isDynamicTable && dynamicColumns.length > 0 ? dynamicColumns : flatColumns;
       return {
         wmTableColumns: finalColumns,
+        tableStructure: structure,
         rowActions: (0, _utils.parseTableRowActions)(children),
         tableActions: filteredActions,
         headerActions: headerActions,
         footerActions: footerActions,
         rowExpansionConfig: (0, _utils.parseTableRowExpansion)(children)
       };
-    }, [children, editmode, dynamicColumns]),
+    }, [children, editmode, internalDataset, isDynamicTable, dynamicColumns]),
     wmTableColumns = _useMemo2.wmTableColumns,
+    tableStructure = _useMemo2.tableStructure,
     rowActions = _useMemo2.rowActions,
     headerActions = _useMemo2.headerActions,
     footerActions = _useMemo2.footerActions,
@@ -401,7 +477,7 @@ var WmTableComponent = exports.WmTableComponent = /*#__PURE__*/(0, _react.memo)(
       },
       showrowindex: showrowindex,
       radioselect: radioselect,
-      multiselect: multiselect,
+      multiselect: effectiveMultiselect,
       rowActions: rowActions,
       formposition: formposition,
       insertmessage: insertmessage,
@@ -418,7 +494,8 @@ var WmTableComponent = exports.WmTableComponent = /*#__PURE__*/(0, _react.memo)(
       onRowupdate: onRowupdate,
       onRowdelete: onRowdelete,
       tableRef: tableRef,
-      isServerSidePagination: isServerSidePagination
+      isServerSidePagination: isServerSidePagination(),
+      tableName: name
     }),
     editingRowId = _useTableEdit.editingRowId,
     isRowEditing = _useTableEdit.isRowEditing,
@@ -439,10 +516,26 @@ var WmTableComponent = exports.WmTableComponent = /*#__PURE__*/(0, _react.memo)(
       handleRowSelectionClick: handleRowSelectionClick,
       handleTableEditRowClick: handleTableEditRowClick,
       handleRowActiveClick: handleRowActiveClick,
-      onRowclick: onRowclick
+      onRowclick: onRowclick,
+      useRadioSelect: useRadioSelect,
+      useMultiSelect: useMultiSelect,
+      isrowselectable: isrowselectable,
+      listener: listener,
+      name: name
     }),
     handleRowClick = _useRowHandlers.handleRowClick;
 
+  // Effect to cancel editing when page changes
+  (0, _react.useEffect)(function () {
+    var currentPage = paginationState.pageIndex;
+    // Skip on initial render (when prevPageIndexRef is still -1)
+    // The ref is initialized to -1 and only updated after first data render
+    if (prevPageIndexRef.current !== -1 && currentPage !== prevPageIndexRef.current && isAddingNewRow) {
+      cancelEditing();
+    }
+    // Don't update the ref here - it's updated in the data render effect
+  }, [paginationState.pageIndex, isAddingNewRow, cancelEditing]);
+
   // Track sorting and column sizing states
   var _useState3 = (0, _react.useState)(function () {
       // Convert initialSortState to TanStack Table sorting format
@@ -463,14 +556,47 @@ var WmTableComponent = exports.WmTableComponent = /*#__PURE__*/(0, _react.memo)(
     isResizing = _useState5[0],
     setIsResizing = _useState5[1];
 
+  // Column selection handlers - just call the external callbacks
+  // The class toggling is handled directly in TableHeaderComponent
+  var handleColumnSelect = (0, _react.useCallback)(function (event, columnId, colDef, columnData) {
+    if (onColumnselect) {
+      onColumnselect(event, {
+        field: columnId,
+        colDef: colDef,
+        data: columnData
+      });
+    }
+  }, [onColumnselect]);
+  var handleColumnDeselect = (0, _react.useCallback)(function (event, columnId, colDef, columnData) {
+    if (onColumndeselect) {
+      onColumndeselect(event, {
+        field: columnId,
+        colDef: colDef,
+        data: columnData
+      });
+    }
+  }, [onColumndeselect]);
+
   // Custom sorting change handler that resets page to 1 when sorting changes
   var handleSortingChange = (0, _react.useCallback)(function (updaterOrValue) {
+    var newSorting = typeof updaterOrValue === "function" ? updaterOrValue(sorting) : updaterOrValue;
     setSorting(updaterOrValue);
     // Reset to first page when sorting changes
-    if (tableRef.current) {
-      tableRef.current.setPageIndex(0);
+    setPaginationState(function (prev) {
+      return _objectSpread(_objectSpread({}, prev), {}, {
+        pageIndex: 0
+      });
+    });
+
+    // Trigger onSort callback if provided
+    if (onSort && newSorting.length > 0) {
+      var sortData = {
+        field: newSorting[0].id,
+        direction: newSorting[0].desc ? "desc" : "asc"
+      };
+      onSort(null, listener === null || listener === void 0 ? void 0 : listener.Widgets[name], sortData);
     }
-  }, []);
+  }, [sorting, name]);
 
   // Use row expansion hook
   var _useRowExpansion = (0, _hooks.useRowExpansion)({
@@ -480,6 +606,20 @@ var WmTableComponent = exports.WmTableComponent = /*#__PURE__*/(0, _react.memo)(
     expandedRows = _useRowExpansion.expandedRows,
     toggleRowExpansion = _useRowExpansion.toggleRowExpansion,
     isRowExpanded = _useRowExpansion.isRowExpanded;
+  var handleToggleRowExpansion = (0, _react.useCallback)(function (rowId, rowData) {
+    if (listener !== null && listener !== void 0 && listener.onChange) {
+      var selecteditem = (0, _utils.cleanRowData)(rowData);
+      if (!(0, _lodashEs.isEqual)(prevSelectedRow.current, selecteditem)) {
+        prevSelectedRow.current = selecteditem;
+        listener.onChange(name, {
+          selecteditem: selecteditem
+        });
+      }
+    }
+    setTimeout(function () {
+      return toggleRowExpansion(rowId, rowData);
+    }, 0);
+  }, [name]);
 
   // Use table columns hook to get column definitions
   var _useTableColumns = (0, _hooks.useTableColumns)({
@@ -498,7 +638,13 @@ var WmTableComponent = exports.WmTableComponent = /*#__PURE__*/(0, _react.memo)(
       saveEditing: saveEditing,
       editingRowId: editingRowId,
       cellState: cellState,
-      isResizing: isResizing
+      isResizing: isResizing,
+      handleRowClick: handleRowClick,
+      handleRadioSelection: handleRadioSelection,
+      handleMultiSelection: handleMultiSelection,
+      useRadioSelect: useRadioSelect,
+      useMultiSelect: useMultiSelect,
+      isRowSelected: isRowSelected
     }),
     baseColumns = _useTableColumns.columns;
 
@@ -507,8 +653,6 @@ var WmTableComponent = exports.WmTableComponent = /*#__PURE__*/(0, _react.memo)(
     var selectionColumn = (0, _buildSelectionColumns.buildSelectionColumns)({
       useRadioSelect: useRadioSelect,
       useMultiSelect: useMultiSelect,
-      selectedRowId: selectedRowId,
-      // Keep these for interface compatibility but they're not used in column structure
       selectedRowIds: selectedRowIds,
       handleRadioSelection: handleRadioSelection,
       handleMultiSelection: handleMultiSelection,
@@ -524,13 +668,14 @@ var WmTableComponent = exports.WmTableComponent = /*#__PURE__*/(0, _react.memo)(
       return [selectionColumn].concat((0, _toConsumableArray2["default"])(baseColumns));
     }
     return baseColumns;
-  }, [baseColumns, useRadioSelect, useMultiSelect, handleRadioSelection, handleMultiSelection, handleSelectAll, radioselecttitle, radioselectarialabel, multiselecttitle, multiselectarialabel, name]);
+  }, [baseColumns, useRadioSelect, useMultiSelect, selectedRowIds, internalDataset, handleRadioSelection, handleMultiSelection, handleSelectAll, radioselecttitle, radioselectarialabel, multiselecttitle, multiselectarialabel, name]);
 
   //column proxy changes
   var columnsStateRef = (0, _react.useRef)(columns);
   var _useState6 = (0, _react.useState)(0),
     columnsVersion = _useState6[0],
     setColumnsVersion = _useState6[1];
+  var parentFormColumns = (listener === null || listener === void 0 || (_listener$Widgets = listener.Widgets) === null || _listener$Widgets === void 0 || (_listener$Widgets = _listener$Widgets[parentForm]) === null || _listener$Widgets === void 0 ? void 0 : _listener$Widgets.dataoutput) || {};
   var _useState7 = (0, _react.useState)({}),
     columnOverrides = _useState7[0],
     setColumnOverrides = _useState7[1];
@@ -539,9 +684,46 @@ var WmTableComponent = exports.WmTableComponent = /*#__PURE__*/(0, _react.memo)(
       return _objectSpread(_objectSpread({}, prev), {}, (0, _defineProperty2["default"])({}, index, _objectSpread(_objectSpread({}, prev[index] || {}), {}, (0, _defineProperty2["default"])({}, key, value))));
     });
   }, []);
+  var _useState8 = (0, _react.useState)([]),
+    summaryRowDefs = _useState8[0],
+    setSummaryRowDefs = _useState8[1];
+  var _useState9 = (0, _react.useState)(false),
+    summaryRowEnabled = _useState9[0],
+    setSummaryRowEnabled = _useState9[1];
+  var _useState0 = (0, _react.useState)([]),
+    summaryRowDefObjects = _useState0[0],
+    setSummaryRowDefObjects = _useState0[1];
+  // Store column show property for summary rows: [rowIndex][columnKey] => show boolean
+  var _useState1 = (0, _react.useState)({}),
+    summaryRowColumnShow = _useState1[0],
+    setSummaryRowColumnShow = _useState1[1];
+  var setSummaryRowDef = (0, _react.useCallback)(function (columnKey, data, rowIndex, refresh, show) {
+    setSummaryRowDefs(function (prev) {
+      var newDefs = (0, _toConsumableArray2["default"])(prev);
+      newDefs[rowIndex] = _objectSpread(_objectSpread({}, newDefs[rowIndex]), {}, (0, _defineProperty2["default"])({}, columnKey, data));
+      return newDefs;
+    });
+    setSummaryRowDefObjects(function (prev) {
+      var newObjs = (0, _toConsumableArray2["default"])(prev);
+      newObjs[rowIndex] = _objectSpread(_objectSpread({}, newObjs[rowIndex]), {}, (0, _defineProperty2["default"])({}, columnKey, data));
+      return newObjs;
+    });
+    // Store column's show property
+    if (show !== undefined) {
+      setSummaryRowColumnShow(function (prev) {
+        var newShow = _objectSpread({}, prev);
+        if (!newShow[rowIndex]) {
+          newShow[rowIndex] = {};
+        }
+        newShow[rowIndex] = _objectSpread(_objectSpread({}, newShow[rowIndex]), {}, (0, _defineProperty2["default"])({}, columnKey, show));
+        return newShow;
+      });
+    }
+    setSummaryRowEnabled(true);
+  }, []);
   var columnsProxy = (0, _react.useMemo)(function () {
-    return (0, _columnProxy.createColumnsProxy)(wmTableColumns, applyOverride, setColumnsVersion);
-  }, [wmTableColumns, applyOverride, setColumnsVersion]);
+    return (0, _columnProxy.createColumnsProxy)(wmTableColumns, applyOverride, setColumnsVersion, setSummaryRowDef);
+  }, [wmTableColumns, applyOverride, setColumnsVersion, setSummaryRowDef]);
   columnsStateRef.current = columns;
   var columnsForTable = (0, _react.useMemo)(function () {
     var base = columnsStateRef.current || [];
@@ -566,7 +748,7 @@ var WmTableComponent = exports.WmTableComponent = /*#__PURE__*/(0, _react.memo)(
   var _useTableFilter = (0, _hooks.useTableFilter)({
       filterMode: filtermode,
       columns: columnsForTable,
-      dataset: navigation === "Scroll" && scrollAccumulatedData.length > 0 ? scrollAccumulatedData : internalDataset,
+      dataset: (navigation === "Scroll" || navigation === "On-Demand") && accumulatedData.length > 0 ? accumulatedData : internalDataset,
       initialSearchState: initialSearchState
     }),
     globalFilter = _useTableFilter.globalFilter,
@@ -583,16 +765,20 @@ var WmTableComponent = exports.WmTableComponent = /*#__PURE__*/(0, _react.memo)(
   var setGlobalFilter = (0, _react.useCallback)(function (value) {
     setGlobalFilterOriginal(value);
     // Reset to first page when filter changes
-    if (tableRef.current) {
-      tableRef.current.setPageIndex(0);
-    }
+    setPaginationState(function (prev) {
+      return _objectSpread(_objectSpread({}, prev), {}, {
+        pageIndex: 0
+      });
+    });
   }, [setGlobalFilterOriginal]);
   var setColumnFilter = (0, _react.useCallback)(function (columnId, value, matchMode) {
     setColumnFilterOriginal(columnId, value, matchMode);
     // Reset to first page when filter changes
-    if (tableRef.current) {
-      tableRef.current.setPageIndex(0);
-    }
+    setPaginationState(function (prev) {
+      return _objectSpread(_objectSpread({}, prev), {}, {
+        pageIndex: 0
+      });
+    });
   }, [setColumnFilterOriginal]);
 
   // Use refs to track resizing state and debounce timer
@@ -619,43 +805,53 @@ var WmTableComponent = exports.WmTableComponent = /*#__PURE__*/(0, _react.memo)(
   }, []);
 
   // Create custom row selection state for TanStack Table
+  // Uses unified selectedRowIds array - works for both radio select (1 item) and multiselect (multiple items)
   var rowSelection = (0, _react.useMemo)(function () {
     var selection = {};
-    if (useMultiSelect) {
-      selectedRowIds.forEach(function (id) {
-        selection[id] = true;
-      });
-    } else if (useRadioSelect && selectedRowId) {
-      selection[selectedRowId] = true;
-    }
+    selectedRowIds.forEach(function (id) {
+      selection[id] = true;
+    });
     return selection;
-  }, [useMultiSelect, useRadioSelect, selectedRowIds, selectedRowId]);
+  }, [selectedRowIds]);
 
   // Determine if we're using server-side sorting (same as server-side pagination)
-  var isServerSideSorting = isServerSidePagination;
+  var isServerSideSorting = isServerSidePagination();
 
-  // Use accumulated data for Scroll navigation, otherwise use normal dataset
+  // Use accumulated data for Scroll and On-Demand navigation, otherwise use normal dataset
   var tableData = (0, _react.useMemo)(function () {
-    if (navigation === "Scroll" && scrollAccumulatedData.length > 0) {
-      return filtermode ? filteredData : scrollAccumulatedData;
+    // For Scroll and On-Demand, use accumulated data from pagination
+    if ((navigation === "Scroll" || navigation === "On-Demand") && accumulatedData.length > 0) {
+      // For server-side pagination, don't apply client-side filtering as server already filters
+      return filtermode && !isServerSidePagination() ? filteredData : accumulatedData;
     }
-    return filtermode ? filteredData : internalDataset;
-  }, [navigation, scrollAccumulatedData, filteredData, internalDataset, filtermode]);
-
-  // Create the table with columns
+    // For server-side pagination, use internalDataset directly (already filtered by server)
+    // Client-side filtering should only be applied for client-side pagination
+    return filtermode && !isServerSidePagination() ? filteredData : internalDataset;
+  }, [navigation, accumulatedData, filteredData, internalDataset, filtermode, isServerSidePagination]);
+
+  // Memoize pagination options to prevent unnecessary re-renders
+  var memoizedPagination = (0, _react.useMemo)(function () {
+    return {
+      pageSize: navigation === "None" ? (tableData === null || tableData === void 0 ? void 0 : tableData.length) || 0 : paginationState.pageSize,
+      pageIndex: paginationState.pageIndex
+    };
+  }, [navigation, tableData === null || tableData === void 0 ? void 0 : tableData.length, paginationState.pageSize, paginationState.pageIndex]);
   var table = (0, _reactTable.useReactTable)({
     data: tableData,
     columns: columnsForTable,
     state: {
       sorting: sorting,
       columnSizing: columnSizing,
-      rowSelection: rowSelection // Add row selection state
+      rowSelection: rowSelection,
+      // Add row selection state
+      pagination: memoizedPagination
     },
     onSortingChange: handleSortingChange,
     onColumnSizingChange: handleColumnSizingChange,
+    onPaginationChange: setPaginationState,
     getCoreRowModel: (0, _reactTable.getCoreRowModel)(),
     // Only use pagination model for client-side pagination
-    getPaginationRowModel: isServerSidePagination ? undefined : (0, _reactTable.getPaginationRowModel)(),
+    getPaginationRowModel: isServerSidePagination() ? undefined : (0, _reactTable.getPaginationRowModel)(),
     // Use sorted row model only for client-side sorting
     getSortedRowModel: isServerSideSorting ? undefined : (0, _reactTable.getSortedRowModel)(),
     enableSorting: enablesort,
@@ -667,15 +863,9 @@ var WmTableComponent = exports.WmTableComponent = /*#__PURE__*/(0, _react.memo)(
     enableRowSelection: true,
     // Enable row selection
     // Use manual pagination and sorting for server-side operations
-    manualPagination: isServerSidePagination,
+    manualPagination: isServerSidePagination(),
     manualSorting: isServerSideSorting,
-    pageCount: isServerSidePagination && datasource !== null && datasource !== void 0 && (_datasource$paginatio2 = datasource.pagination) !== null && _datasource$paginatio2 !== void 0 && _datasource$paginatio2.totalPages ? datasource.pagination.totalPages : undefined,
-    initialState: {
-      pagination: {
-        pageSize: initialPageSize,
-        pageIndex: initialPage - 1 // Convert to 0-based index
-      }
-    },
+    pageCount: isServerSidePagination() && datasource !== null && datasource !== void 0 && (_datasource$paginatio2 = datasource.pagination) !== null && _datasource$paginatio2 !== void 0 && _datasource$paginatio2.totalPages ? datasource.pagination.totalPages : undefined,
     getRowId: function getRowId(row) {
       return row._wmTableRowId || String(row.id) || (0, _lodashEs.uniqueId)("row_");
     }
@@ -707,12 +897,15 @@ var WmTableComponent = exports.WmTableComponent = /*#__PURE__*/(0, _react.memo)(
     sorting: sorting,
     setInternalDataset: setInternalDataset,
     showToast: showToast,
-    isServerSidePagination: isServerSidePagination,
+    isServerSidePagination: isServerSidePagination(),
     pageIndex: table.getState().pagination.pageIndex,
     onError: onError,
+    onBeforefilter: onBeforefilter,
     setLoading: setLoading,
     filterFields: memoizedFilterFields,
-    logicalOp: memoizedLogicalOp
+    logicalOp: memoizedLogicalOp,
+    listener: listener,
+    name: name
   });
 
   // Panel structure management
@@ -720,7 +913,7 @@ var WmTableComponent = exports.WmTableComponent = /*#__PURE__*/(0, _react.memo)(
       title: title,
       subheading: subheading,
       iconclass: iconclass,
-      exportOptions: exportOptions,
+      exportformat: exportformat,
       headerActions: headerActions,
       footerActions: footerActions,
       shownavigation: shownavigation,
@@ -733,6 +926,25 @@ var WmTableComponent = exports.WmTableComponent = /*#__PURE__*/(0, _react.memo)(
     showPanelHeading = _usePanelStructure.showPanelHeading,
     showPagination = _usePanelStructure.showPagination;
 
+  // Callback: when pagination widget is ready, set table.dataNavigator = pagination widget proxy
+  var handlePaginationWidgetReady = (0, _react.useCallback)(function (paginationWidget) {
+    var _listener$Widgets2;
+    if (name && listener !== null && listener !== void 0 && (_listener$Widgets2 = listener.Widgets) !== null && _listener$Widgets2 !== void 0 && _listener$Widgets2[name]) {
+      listener.Widgets[name].dataNavigator = paginationWidget;
+    }
+  }, [name, listener]);
+
+  // Memoize sortInfo for export to prevent unnecessary re-renders
+  var sortInfoForExport = (0, _react.useMemo)(function () {
+    if (sorting.length > 0) {
+      return {
+        field: sorting[0].id,
+        direction: sorting[0].desc ? "desc" : "asc"
+      };
+    }
+    return undefined;
+  }, [sorting]);
+
   // Update grid edit mode (includes inline editing and add new row)
   var isGridEditModeComplete = isAddingNewRow || editingRowId !== null;
 
@@ -761,15 +973,15 @@ var WmTableComponent = exports.WmTableComponent = /*#__PURE__*/(0, _react.memo)(
         }];
       }
     } else if (filtermode === "multicolumn") {
-      var activeFilters = Object.entries(columnFilters).filter(function (_ref2) {
-        var _ref3 = (0, _slicedToArray2["default"])(_ref2, 2),
-          _ = _ref3[0],
-          filter = _ref3[1];
+      var activeFilters = Object.entries(columnFilters).filter(function (_ref) {
+        var _ref2 = (0, _slicedToArray2["default"])(_ref, 2),
+          _ = _ref2[0],
+          filter = _ref2[1];
         return filter.value;
-      }).map(function (_ref4) {
-        var _ref5 = (0, _slicedToArray2["default"])(_ref4, 2),
-          field = _ref5[0],
-          filter = _ref5[1];
+      }).map(function (_ref3) {
+        var _ref4 = (0, _slicedToArray2["default"])(_ref3, 2),
+          field = _ref4[0],
+          filter = _ref4[1];
         // Find column type for each field
         var columnType = function (_col$meta4, _col$meta5) {
           var col = (0, _lodashEs.find)(columnsForTable, function (c) {
@@ -806,12 +1018,11 @@ var WmTableComponent = exports.WmTableComponent = /*#__PURE__*/(0, _react.memo)(
     storage: effectiveStateHandler,
     currentPage: table.getState().pagination.pageIndex + 1,
     currentPageSize: table.getState().pagination.pageSize,
-    selectedRowId: selectedRowId,
     selectedRowIds: selectedRowIds,
     internalDataset: internalDataset,
     initialActualPageSize: initialActualPageSize,
     datasource: datasource,
-    multiselect: multiselect,
+    multiselect: effectiveMultiselect,
     filterData: filterDataForState,
     sortData: sortDataForState,
     navigation: navigation,
@@ -822,22 +1033,12 @@ var WmTableComponent = exports.WmTableComponent = /*#__PURE__*/(0, _react.memo)(
     initialFilterState: initialSearchState
   });
 
-  // Use pagination state hook
-  var _usePaginationState = (0, _hooks.usePaginationState)({
-      table: table,
-      editmode: editmode,
-      internalDataset: internalDataset,
-      isAddingNewRow: isAddingNewRow,
-      cancelEditing: cancelEditing,
-      datasource: datasource,
-      isServerSidePagination: isServerSidePagination
-    }),
-    handlePaginationChange = _usePaginationState.handlePaginationChange,
-    handlePageSizeChangeBase = _usePaginationState.handlePageSizeChange;
-
   // Enhanced page size change handler with state persistence
   var handlePageSizeChange = (0, _react.useCallback)(function (newPageSize) {
-    // Call base handler
+    // Get old page size before updating for state persistence
+    var oldPageSize = paginationState.pageSize;
+
+    // Call base handler from hook
     handlePageSizeChangeBase(newPageSize);
 
     // Skip state persistence for Scroll navigation
@@ -846,7 +1047,7 @@ var WmTableComponent = exports.WmTableComponent = /*#__PURE__*/(0, _react.memo)(
       var currentPersistedState = (0, _utils.getTableState)(name, effectiveStateHandler);
 
       // Build the state for page size change
-      var newState = stateManager.getStateForPageSizeChange(newPageSize, currentPersistedState === null || currentPersistedState === void 0 ? void 0 : currentPersistedState.selectedItem, table.getState().pagination.pageSize // Pass the old page size
+      var newState = stateManager.getStateForPageSizeChange(newPageSize, currentPersistedState === null || currentPersistedState === void 0 ? void 0 : currentPersistedState.selectedItem, oldPageSize // Pass the old page size
       );
 
       // Clear the existing state first to avoid merge issues with setWidgetState
@@ -865,7 +1066,23 @@ var WmTableComponent = exports.WmTableComponent = /*#__PURE__*/(0, _react.memo)(
         }
       }
     }
-  }, [handlePageSizeChangeBase, name, effectiveStateHandler, stateManager, pagesize, table, navigation]);
+  }, [handlePageSizeChangeBase, name, effectiveStateHandler, stateManager, pagesize, navigation]);
+
+  // slectPageSize callback fix
+  var selectPageSize = (0, _react.useCallback)(function (pagesize) {
+    if (!allowpagesizechange && !pagesize) return;
+    var pageSizeOptions = (pagesizeoptions || "5,10,20,50,100").split(",").map(function (v) {
+      return Number(v.trim());
+    }).filter(function (n) {
+      return !Number.isNaN(n);
+    }).sort(function (a, b) {
+      return a - b;
+    });
+    if (pageSizeOptions.length === 0) return;
+    var nv = Number(pagesize);
+    var clamped = nv < pageSizeOptions[0] || nv > pageSizeOptions[pageSizeOptions.length - 1] || !pageSizeOptions.includes(nv) ? pageSizeOptions[0] : nv;
+    handlePageSizeChange(clamped);
+  }, [allowpagesizechange, pagesizeoptions, handlePageSizeChange]);
 
   // Call data render callbacks for dynamic tables or when data changes
   (0, _react.useEffect)(function () {
@@ -875,12 +1092,12 @@ var WmTableComponent = exports.WmTableComponent = /*#__PURE__*/(0, _react.memo)(
     if (shouldCallCallbacks) {
       var currentPageIndex = table.getState().pagination.pageIndex;
 
-      // Only call callbacks if it's initial render or page actually changed
-      var isInitialRender = prevPageIndexRef.current === -1;
-      var hasPageChanged = prevPageIndexRef.current !== currentPageIndex;
-      if (isInitialRender || hasPageChanged) {
-        // Update the tracked page index
-        prevPageIndexRef.current = currentPageIndex;
+      // Update the tracked page index
+      prevPageIndexRef.current = currentPageIndex;
+
+      // Only call callbacks if data has actually changed
+      if (!(0, _lodashEs.isEqual)(prevDatasetRef.current, internalDataset)) {
+        prevDatasetRef.current = internalDataset;
 
         // Call onBeforedatarender callback
         if (onBeforedatarender) {
@@ -888,7 +1105,7 @@ var WmTableComponent = exports.WmTableComponent = /*#__PURE__*/(0, _react.memo)(
           // widget reference
           internalDataset,
           // data
-          wmTableColumns // columns (including dynamic ones)
+          columnsProxy // columns (including dynamic ones)
           );
         }
 
@@ -908,7 +1125,6 @@ var WmTableComponent = exports.WmTableComponent = /*#__PURE__*/(0, _react.memo)(
       }
     }
   }, [internalDataset, wmTableColumns, onBeforedatarender, onDatarender, name, isDynamicTable, table.getState().pagination.pageIndex]);
-
   // Use table initialization hook
   (0, _hooks.useTableInitialization)({
     internalDataset: internalDataset,
@@ -918,7 +1134,6 @@ var WmTableComponent = exports.WmTableComponent = /*#__PURE__*/(0, _react.memo)(
     useRadioSelect: useRadioSelect,
     useMultiSelect: useMultiSelect,
     setActiveRow: setActiveRow,
-    selectedRowId: selectedRowId,
     selectedRowIds: selectedRowIds,
     formName: formName,
     editmode: editmode,
@@ -933,7 +1148,6 @@ var WmTableComponent = exports.WmTableComponent = /*#__PURE__*/(0, _react.memo)(
       datasource: datasource,
       internalDataset: internalDataset,
       statehandler: effectiveStateHandler,
-      selectedRowId: selectedRowId,
       selectedRowIds: selectedRowIds,
       currentPage: table.getState().pagination.pageIndex + 1,
       // Convert to 1-based
@@ -1021,16 +1235,54 @@ var WmTableComponent = exports.WmTableComponent = /*#__PURE__*/(0, _react.memo)(
     }
     startEditing(row, row._wmTableRowId);
   }, [startEditing]);
-  var deleteRow = (0, _react.useCallback)(function (event, widget, row) {
-    if (!row) {
-      console.warn("Invalid row data provided to deleteRow");
-      return;
-    }
-    _deleteRecord(row, tableRef.current);
-  }, [_deleteRecord]);
+  var deleteRow = (0, _react.useCallback)(/*#__PURE__*/function () {
+    var _ref5 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(event, widget, row) {
+      var _listener$Widgets3, cleanedRow, rowIndex, result;
+      return _regenerator["default"].wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (row) {
+              _context.next = 3;
+              break;
+            }
+            console.warn("Invalid row data provided to deleteRow");
+            return _context.abrupt("return");
+          case 3:
+            if (!onBeforerowdelete) {
+              _context.next = 11;
+              break;
+            }
+            cleanedRow = (0, _utils.cleanRowData)([row])[0];
+            rowIndex = internalDataset.findIndex(function (r) {
+              return r._wmTableRowId === row._wmTableRowId || r.id !== undefined && r.id === row.id;
+            });
+            _context.next = 8;
+            return onBeforerowdelete(event, listener === null || listener === void 0 || (_listener$Widgets3 = listener.Widgets) === null || _listener$Widgets3 === void 0 ? void 0 : _listener$Widgets3[name], cleanedRow, {
+              rowIndex: rowIndex,
+              data: cleanedRow
+            });
+          case 8:
+            result = _context.sent;
+            if (!(result === false)) {
+              _context.next = 11;
+              break;
+            }
+            return _context.abrupt("return");
+          case 11:
+            _deleteRecord(row, tableRef.current);
+          case 12:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function (_x, _x2, _x3) {
+      return _ref5.apply(this, arguments);
+    };
+  }(), [_deleteRecord, onBeforerowdelete, listener, name, internalDataset]);
 
   // Refresh table data
-  var refresh = (0, _react.useCallback)(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee() {
+  var refresh = (0, _react.useCallback)(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee2() {
     var newData,
       _datasource$paginatio3,
       currentTable,
@@ -1042,27 +1294,28 @@ var WmTableComponent = exports.WmTableComponent = /*#__PURE__*/(0, _react.memo)(
       lastPage,
       response,
       dataWithIds,
-      _args = arguments;
-    return _regenerator["default"].wrap(function _callee$(_context) {
-      while (1) switch (_context.prev = _context.next) {
+      _listener$Widgets4,
+      _args2 = arguments;
+    return _regenerator["default"].wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
         case 0:
-          newData = _args.length > 0 && _args[0] !== undefined ? _args[0] : false;
+          newData = _args2.length > 0 && _args2[0] !== undefined ? _args2[0] : false;
           if (datasource) {
-            _context.next = 4;
+            _context2.next = 4;
             break;
           }
           console.warn("No datasource available for refresh");
-          return _context.abrupt("return");
+          return _context2.abrupt("return");
         case 4:
-          _context.prev = 4;
+          _context2.prev = 4;
           // Use tableRef.current to access the latest table instance
           currentTable = tableRef.current;
           if (currentTable) {
-            _context.next = 9;
+            _context2.next = 9;
             break;
           }
           console.warn("Table instance not available");
-          return _context.abrupt("return");
+          return _context2.abrupt("return");
         case 9:
           targetPage = currentTable.getState().pagination.pageIndex + 1;
           currentPageSize = ((_datasource$paginatio3 = datasource.pagination) === null || _datasource$paginatio3 === void 0 ? void 0 : _datasource$paginatio3.size) || currentTable.getState().pagination.pageSize;
@@ -1081,11 +1334,11 @@ var WmTableComponent = exports.WmTableComponent = /*#__PURE__*/(0, _react.memo)(
           }
 
           // For server-side pagination, use datasource invoke
-          if (!isServerSidePagination) {
-            _context.next = 20;
+          if (!isServerSidePagination()) {
+            _context2.next = 20;
             break;
           }
-          _context.next = 16;
+          _context2.next = 16;
           return (0, _crudHandlers.refreshDataSource)(datasource, {
             page: targetPage,
             pagesize: currentPageSize,
@@ -1093,7 +1346,7 @@ var WmTableComponent = exports.WmTableComponent = /*#__PURE__*/(0, _react.memo)(
             condition: memoizedLogicalOp
           });
         case 16:
-          response = _context.sent;
+          response = _context2.sent;
           // The datasource should update its data property automatically
           // which will trigger a re-render through the dataset prop
           if (response && response.data) {
@@ -1108,7 +1361,7 @@ var WmTableComponent = exports.WmTableComponent = /*#__PURE__*/(0, _react.memo)(
               });
             }
           }
-          _context.next = 21;
+          _context2.next = 21;
           break;
         case 20:
           // For client-side pagination, just set the page index
@@ -1116,43 +1369,111 @@ var WmTableComponent = exports.WmTableComponent = /*#__PURE__*/(0, _react.memo)(
             currentTable.setPageIndex(targetPage);
           }
         case 21:
-          // Show success notification
-          if (showToast) {
-            showToast("Table refreshed successfully", "Success");
-          }
-          _context.next = 29;
+          _context2.next = 28;
           break;
-        case 24:
-          _context.prev = 24;
-          _context.t0 = _context["catch"](4);
-          console.error("Error refreshing table data:", _context.t0);
+        case 23:
+          _context2.prev = 23;
+          _context2.t0 = _context2["catch"](4);
+          console.error("Error refreshing table data:", _context2.t0);
           if (showToast) {
             showToast("Failed to refresh table data", "Error");
           }
           if (onError) {
-            onError("refresh", _context.t0);
+            onError(null, listener === null || listener === void 0 || (_listener$Widgets4 = listener.Widgets) === null || _listener$Widgets4 === void 0 ? void 0 : _listener$Widgets4[name], _context2.t0, "refresh");
           }
-        case 29:
+        case 28:
         case "end":
-          return _context.stop();
+          return _context2.stop();
       }
-    }, _callee, null, [[4, 24]]);
-  })), [datasource, isServerSidePagination, setInternalDataset, showToast, onError]); // Removed 'table' from dependencies to prevent recreation
+    }, _callee2, null, [[4, 23]]);
+  })), [datasource, isServerSidePagination(), setInternalDataset, showToast, onError, listener, name]); // Removed 'table' from dependencies to prevent recreation
+
+  var tableApis = {
+    columns: columnsProxy,
+    addNewRow: handleAddNewRowClick,
+    editRow: editRow,
+    deleteRow: deleteRow,
+    refresh: refresh,
+    datasource: datasource,
+    dataset: dataset,
+    selectPageSize: selectPageSize
+  };
 
   // Expose table API through listener
   (0, _react.useEffect)(function () {
-    if (listener && listener.onChange) {
-      listener.onChange(name, {
-        columns: columnsProxy,
-        addNewRow: handleAddNewRowClick,
-        editRow: editRow,
-        deleteRow: deleteRow,
-        refresh: refresh,
-        datasource: datasource
-      });
+    if (listener && listener.onChange && !tableApisRegistered.current) {
+      listener.onChange(name, tableApis);
+      tableApisRegistered.current = true;
     }
   }, []);
+
+  // Register table with parent form's formWidgets when parentForm is present
+  (0, _react.useEffect)(function () {
+    var _listener$Widgets5;
+    if (parentForm && name && listener !== null && listener !== void 0 && (_listener$Widgets5 = listener.Widgets) !== null && _listener$Widgets5 !== void 0 && _listener$Widgets5[parentForm]) {
+      var _listener$Widgets6;
+      var _columns = listener === null || listener === void 0 || (_listener$Widgets6 = listener.Widgets) === null || _listener$Widgets6 === void 0 || (_listener$Widgets6 = _listener$Widgets6[name]) === null || _listener$Widgets6 === void 0 ? void 0 : _listener$Widgets6.columns;
+      var defaultValues = Object.entries(_columns || {}).reduce(function (acc, _ref7) {
+        var _ref8 = (0, _slicedToArray2["default"])(_ref7, 2),
+          key = _ref8[0],
+          value = _ref8[1];
+        if ((value === null || value === void 0 ? void 0 : value.defaultValue) !== undefined) {
+          acc[key] = value;
+        }
+        return acc;
+      }, {});
+
+      // If all values are undefined, pass empty array, else pass object of default values
+      var valuesToPass = Object.keys(defaultValues).length === 0 ? [] : defaultValues;
+      if (parentFormColumns) {
+        listener === null || listener === void 0 || listener.onChange(parentForm, {
+          dataoutput: _objectSpread(_objectSpread({}, parentFormColumns), {}, (0, _defineProperty2["default"])({}, name, valuesToPass))
+        });
+      }
+    }
+  }, [parentForm, parentFormColumns]);
+  var updateSelectedItem = function updateSelectedItem() {
+    if (!(listener !== null && listener !== void 0 && listener.onChange)) return;
+
+    // Helper to get row ID
+    var getRowId = function getRowId(row) {
+      return row._wmTableRowId || String(row.id);
+    };
+
+    // Get selected rows based on selection mode
+    var selectedRows = [];
+    if ((useRadioSelect || useMultiSelect) && selectedRowIds.length > 0) {
+      selectedRows = internalDataset.filter(function (row) {
+        return selectedRowIds.includes(getRowId(row));
+      });
+    } else if (activeRowIds.length > 0) {
+      selectedRows = internalDataset.filter(function (row) {
+        return activeRowIds.includes(getRowId(row));
+      });
+    }
+
+    // Clean and format selecteditem - always return as array
+    var cleanedRows = (0, _utils.cleanRowData)(selectedRows);
+
+    // Always return selecteditem as an array (empty array if nothing selected)
+    var selecteditem = cleanedRows.length > 0 ? cleanedRows : [];
+
+    // Update only if changed
+    if (!(0, _lodashEs.isEqual)(prevSelectedRow.current, selecteditem)) {
+      prevSelectedRow.current = selecteditem;
+      listener.onChange(name, _objectSpread(_objectSpread({}, tableApis), {}, {
+        selecteditem: selecteditem
+      }));
+    }
+  };
+
+  // Expose active/selected row data through listener
+  // This updates whenever the active/selected row changes (when user clicks on a row)
+  (0, _react.useEffect)(function () {
+    updateSelectedItem();
+  }, [activeRowIds, selectedRowIds, useRadioSelect, useMultiSelect, internalDataset, name]);
   return __jsx(_material.Box, {
+    hidden: props.hidden,
     className: "app-livegrid",
     name: name
   }, __jsx(_material.Box, {
@@ -1166,24 +1487,33 @@ var WmTableComponent = exports.WmTableComponent = /*#__PURE__*/(0, _react.memo)(
     title: title,
     subheading: subheading,
     iconclass: iconclass,
-    exportOptions: exportOptions,
+    exportformat: exportformat,
     headerActions: headerActions,
     spacing: spacing,
     isGridEditMode: isGridEditModeComplete,
     isLoading: datasource === null || datasource === void 0 ? void 0 : datasource.loading,
-    listener: listener
+    listener: listener,
+    datasource: datasource,
+    columns: wmTableColumns,
+    sortInfo: sortInfoForExport,
+    filterInfo: filterDataForState,
+    exportdatasize: exportdatasize,
+    onBeforeExport: onBeforeexport
   }), __jsx(_material.Box, {
     className: "app-datagrid",
     onKeyDown: function onKeyDown(e) {
       return handleTableEditKeyDown(e);
     }
   }, filtermode === "search" && __jsx(_components.GlobalSearchFilter, {
+    filteronkeypress: filteronkeypress,
     value: globalFilter,
     onChange: setGlobalFilter,
     selectedColumn: globalSearchColumn,
     onColumnChange: setGlobalSearchColumn,
     columns: columnsForTable,
-    searchLabel: searchlabel
+    searchLabel: searchlabel,
+    name: name,
+    listener: listener
   }), __jsx(_material.Box, {
     className: "table-container table-responsive"
   }, __jsx(_material.Box, {
@@ -1195,19 +1525,23 @@ var WmTableComponent = exports.WmTableComponent = /*#__PURE__*/(0, _react.memo)(
       overflow: "auto",
       position: "relative"
     }
-  }, loading && __jsx(_LoadingComponent["default"], {
+  }, loading && navigation !== "On-Demand" && __jsx(_LoadingComponent["default"], {
     message: loadingdatamsg
   }), __jsx(_material.Table, {
     key: "table-".concat(isDynamicTable ? "dynamic" : "static", "-").concat(wmTableColumns.length, "-page-").concat(table.getState().pagination.pageIndex) // Force complete rebuild on pagination
     ,
     className: "".concat(_utils.TABLE_CSS_CLASSES.gridDefault, " table-striped table-hover ").concat(spacingClasses).trim(),
-    sx: {
+    sx: _objectSpread({
       width: props.width || "100%"
-    },
+    }, tableStructure && (0, _groupHeaderUtils.hasTableGroups)(tableStructure) ? {
+      tableLayout: "fixed",
+      minWidth: table.getTotalSize()
+    } : {}),
     name: name
   }, showheader && wmTableColumns.length > 0 && __jsx(_components.TableHeaderComponent, {
     table: table,
     enablesort: enablesort,
+    enablecolumnselection: enablecolumnselection,
     rowClass: rowClass,
     ColClassSignature: ColClassSignature,
     sorting: sorting,
@@ -1219,7 +1553,12 @@ var WmTableComponent = exports.WmTableComponent = /*#__PURE__*/(0, _react.memo)(
     columnFilters: columnFilters,
     onColumnFilterChange: setColumnFilter,
     renderFormWidget: renderFormWidget,
-    listener: listener
+    listener: listener,
+    tableStructure: tableStructure,
+    onColumnSelect: handleColumnSelect,
+    onColumnDeselect: handleColumnDeselect,
+    onHeaderclick: onHeaderclick,
+    tableName: name
   }), __jsx(_components.TableBodyComponent, {
     table: table,
     columns: columns,
@@ -1234,17 +1573,27 @@ var WmTableComponent = exports.WmTableComponent = /*#__PURE__*/(0, _react.memo)(
     isLoading: datasource === null || datasource === void 0 ? void 0 : datasource.loading,
     rowExpansionConfig: rowExpansionConfig,
     expandedRows: expandedRows,
-    toggleRowExpansion: toggleRowExpansion,
+    toggleRowExpansion: handleToggleRowExpansion,
     isRowExpanded: isRowExpanded,
     rowsVersion: tableData.length,
     ColClassSignature: ColClassSignature,
-    tableData: tableData
+    tableData: tableData,
+    editingRowId: editingRowId,
+    activeRowIds: activeRowIds,
+    selectedRowIds: selectedRowIds,
+    isAddingNewRow: isAddingNewRow
+  }), summaryRowEnabled && summaryRowDefs.length > 0 && __jsx(_components.SummaryRowFooter, {
+    summaryRowDefs: summaryRowDefs,
+    summaryRowDefObjects: summaryRowDefObjects,
+    columns: wmTableColumns,
+    tableName: name,
+    summaryRowColumnShow: summaryRowColumnShow
   })))))), __jsx(_material.Box, {
     className: "panel-footer clearfix"
   }, showPagination && __jsx(_material.Box, {
     className: "app-datagrid-paginator"
   }, __jsx(_pagination["default"], {
-    name: "".concat(name || "table", "_pagination"),
+    name: name,
     dataset: filtermode ? filteredData : internalDataset,
     maxResults: pagesize,
     currentPage: table.getState().pagination.pageIndex + 1,
@@ -1258,8 +1607,10 @@ var WmTableComponent = exports.WmTableComponent = /*#__PURE__*/(0, _react.memo)(
     pagesizeoptions: pagesizeoptions,
     listener: listener,
     onPaginationChange: handlePaginationChange,
+    onSetRecord: onSetrecord,
     onPageSizeChange: handlePageSizeChange,
-    onDataUpdate: handleScrollDataUpdate
+    onDataUpdate: handleAccumulatedDataUpdate,
+    onPaginationWidgetReady: handlePaginationWidgetReady
     // Pass pagination metadata from datasource if available
     ,
     paginationMeta: datasource === null || datasource === void 0 ? void 0 : datasource.pagination,
@@ -1269,16 +1620,21 @@ var WmTableComponent = exports.WmTableComponent = /*#__PURE__*/(0, _react.memo)(
     datasource: datasource
     // Pass server-side pagination flag
     ,
-    isServerSidePagination: isServerSidePagination
+    isServerSidePagination: isServerSidePagination()
     // Pass additional invoke options for server-side operations
     ,
-    datasourceInvokeOptions: isServerSidePagination ? {
+    datasourceInvokeOptions: isServerSidePagination() ? {
       orderBy: sorting.length > 0 ? sorting.map(function (s) {
         return "".concat(s.id, " ").concat(s.desc ? "desc" : "asc");
       }).join(", ") : undefined,
       filterFields: memoizedFilterFields,
       condition: memoizedLogicalOp
     } : undefined
+    // On-Demand navigation props
+    ,
+    ondemandmessage: ondemandmessage,
+    viewlessmessage: viewlessmessage,
+    showviewlessbutton: showviewlessbutton
   })), __jsx(_components.TableFooterActions, {
     footerActions: footerActions,
     spacing: spacing,
@@ -1288,7 +1644,7 @@ var WmTableComponent = exports.WmTableComponent = /*#__PURE__*/(0, _react.memo)(
   }))));
 }, function (prev, current) {
   // Check if core data and configuration props are the same
-  var keys = ["dataset", "editmode", "navigation", "pagesize", "showrowindex", "showheader", "enablesort", "radioselect", "radioselecttitle", "radioselectarialabel", "multiselect", "multiselecttitle", "multiselectarialabel", "gridfirstrowselect", "rowClass", "deleteoktext", "deletecanceltext", "confirmdelete", "errormessage", "nodatamessage", "loadingdatamsg", "insertmessage", "updatemessage", "deletemessage", "spacing", "title", "subheading", "iconclass", "allowpagesizechange", "pagesizeoptions", "datasource", "binddataset", "onSuccess", "onError", "onRowinsert", "onRowupdate", "onRowdelete", "statehandler", "filtermode", "children", "listener"];
+  var keys = ["dataset", "editmode", "navigation", "pagesize", "showrowindex", "showheader", "enablesort", "radioselect", "radioselecttitle", "radioselectarialabel", "multiselect", "multiselecttitle", "multiselectarialabel", "gridfirstrowselect", "rowClass", "deleteoktext", "deletecanceltext", "confirmdelete", "errormessage", "nodatamessage", "loadingdatamsg", "insertmessage", "updatemessage", "deletemessage", "spacing", "title", "subheading", "iconclass", "allowpagesizechange", "pagesizeoptions", "datasource", "binddataset", "onSuccess", "onError", "onRowinsert", "onRowupdate", "onRowdelete", "onSort", "onBeforerowdelete", "onHeaderclick", "onRowselect", "onRowdeselect", "statehandler", "filtermode", "children", "listener", "hidden"];
 
   // First check the simple props
   var simplePropsEqual = keys.every(function (key) {
@@ -1305,7 +1661,14 @@ var WmTableComponent = exports.WmTableComponent = /*#__PURE__*/(0, _react.memo)(
   return true;
 });
 WmTableComponent.displayName = "WmTableComponent";
-var WmTable = (0, _withBaseWrapper["default"])(WmTableComponent);
+
+// Wrapper component that provides EditedRowsContext to WmTableComponent
+var WmTableWithProvider = function WmTableWithProvider(props) {
+  return __jsx(_useEditedRows.EditedRowsProvider, null, __jsx(WmTableComponent, props));
+};
+
+// @ts-ignore
+var WmTable = (0, _withBaseWrapper["default"])(WmTableWithProvider);
 // Override the displayName set by withBaseWrapper
 WmTable.displayName = "WmTable";
 var _default = exports["default"] = WmTable;