@wavemaker-ai/react-runtime 1.0.0-rc.312 → 1.0.0-rc.317

package/components/data/table/index.js

@@ -1,1830 +1,1673 @@
-"use strict";
 "use client";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof3 = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = exports.WmTableComponent = exports.WmTable = 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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-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("@wavemaker-ai/react-runtime/higherOrder/withBaseWrapper"));
-var _pagination = _interopRequireDefault(require("@wavemaker-ai/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("@wavemaker-ai/react-runtime/components/data/pagination/components/LoadingComponent"));
-var _columnProxy = require("./utils/columnProxy");
-var _useDataSourceSubscription = require("@wavemaker-ai/react-runtime/hooks/useDataSourceSubscription");
-var _crudHandlers = require("./utils/crud-handlers");
-var _types = require("@wavemaker-ai/react-runtime/components/data/types");
-var _useEditedRows = require("./hooks/use-edited-rows");
-var _scriptPageSizeBroadcast = require("./utils/script-page-size-broadcast");
-var _withStandalone = _interopRequireDefault(require("@wavemaker-ai/react-runtime/higherOrder/withStandalone"));
-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", "styles"];
-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); }
-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 (props) {
-  var _listener$App, _listener$Widgets2, _datasource$paginatio2, _table$getState$pagin, _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,
-    styles = props.styles,
-    rest = (0, _objectWithoutProperties2["default"])(props, _excluded);
-  // When same partial is used multiple times (e.g. in tabs), use unique storage key to prevent state collision
-  var effectiveStorageKey = (0, _react.useMemo)(function () {
-    return name + (listener !== null && listener !== void 0 && listener.partialName ? "__".concat(listener === null || listener === void 0 ? void 0 : listener.partialName) : "");
-  }, [name, listener === null || listener === void 0 ? void 0 : listener.partialName]);
-  var widgetRegistrationKey = props["item-id"] || name;
-  var listenerRef = (0, _react.useRef)(listener);
-  listenerRef.current = listener;
-  var loading = (datasource === null || datasource === void 0 ? void 0 : datasource.loading) || false;
-  var prevDatasetRef = (0, _react.useRef)(dataset);
-  var prevSelectedRow = (0, _react.useRef)(null);
-  var tableApisRegistered = (0, _react.useRef)(false);
-
-  // State for accumulated data in Scroll and On-Demand navigation modes
-  var _useState = (0, _react.useState)([]),
-    accumulatedData = _useState[0],
-    setAccumulatedData = _useState[1];
-
-  // 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
-    setAccumulatedData(function (prevData) {
-      // If lengths are different, it's definitely new data
-      if (prevData.length !== data.length) {
-        return data;
-      }
-      // Otherwise keep the previous reference to avoid re-render
-      return prevData;
-    });
-  }, []);
-
-  // Reset accumulated data when navigation changes
-  (0, _react.useEffect)(function () {
-    if (navigation !== "Scroll" && navigation !== "On-Demand") {
-      setAccumulatedData([]);
-    }
-  }, [navigation]);
-  var notifyApp = listener === null || listener === void 0 || (_listener$App = listener.App) === null || _listener$App === void 0 ? void 0 : _listener$App.notifyApp;
-
-  // Create a centralized toast notification function
-  var showToast = (0, _react.useCallback)(function (message, type) {
-    if (notifyApp) {
-      notifyApp(message, type);
-    }
-  }, [notifyApp]);
-
-  // 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.useCallback)(function () {
-    if (navigation === "None") {
-      return false;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
     }
-    return !!(datasource && datasource.execute && datasource.execute(_types.DataSource.Operation.IS_PAGEABLE));
-  }, [datasource, navigation]);
-
-  // Disable state management for Scroll navigation
-  var effectiveStateHandler = navigation === "Scroll" ? "none" : statehandler;
-
-  // Use datasource subscription for SSP state restoration - RUN FIRST
-  // This hook must run before other hooks to ensure datasource state is properly initialized
-  (0, _useDataSourceSubscription.useDataSourceSubscription)({
-    datasource: datasource,
-    statehandler: effectiveStateHandler,
-    name: name,
-    widgetType: "table",
-    onPageRestored: function onPageRestored() {
-      // This will be called when datasource loads with restored page
-      // The page is already set in datasource options, so we don't need to do anything here
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
     }
-  });
-
-  // Use custom hooks for organized functionality
-  var _useTableData = (0, _hooks.useTableData)({
-      dataset: dataset,
-      onRowDelete: onRowDelete,
-      deleteoktext: deleteoktext,
-      deletecanceltext: deletecanceltext,
-      confirmdelete: confirmdelete,
-      deletemessage: deletemessage,
-      errormessage: errormessage,
-      showToast: showToast,
-      datasource: datasource,
-      binddataset: binddataset,
-      onSuccess: onSuccess,
-      onError: onError,
-      onRowdelete: onRowdelete,
-      isServerSidePagination: isServerSidePagination(),
-      listener: listener,
-      widgetName: name
-    }),
-    internalDataset = _useTableData.internalDataset,
-    setInternalDataset = _useTableData.setInternalDataset,
-    _deleteRecord = _useTableData.deleteRecord,
-    renderConfirmDialog = _useTableData.renderConfirmDialog;
-  var _useFormWidget = (0, _hooks.useFormWidget)({
-      listener: listener
-    }),
-    renderFormWidget = _useFormWidget.renderFormWidget;
-
-  // Use generic cell state hook for managing cell values and selections
-  // Use the table name as unique ID to prevent collisions between multiple tables
-  var cellState = (0, _hooks.useCellState)(name);
-
-  // Ref holding the "sync selectedItems" implementation, assigned each render after
-  // tableApis is defined.  A stable wrapper is passed to useRowSelection so it can
-  // call the latest version without being in its dependency array.
-  var syncSelectedItemsImplRef = (0, _react.useRef)(null);
-  var onSyncSelectedItems = (0, _react.useCallback)(function (ids) {
-    var _syncSelectedItemsImp;
-    return (_syncSelectedItemsImp = syncSelectedItemsImplRef.current) === null || _syncSelectedItemsImp === void 0 ? void 0 : _syncSelectedItemsImp.call(syncSelectedItemsImplRef, ids);
-  }, []);
-
-  // ==================== STATE PERSISTENCE ====================
-  // Restore persisted state before initializing table
-  var _useMemo = (0, _react.useMemo)(function () {
-      var _datasource$paginatio;
-      // Skip state restoration for Scroll navigation
+  return target;
+};
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import React, {
+  memo,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+  useRef
+} from "react";
+import {
+  useReactTable,
+  getCoreRowModel,
+  getPaginationRowModel,
+  getSortedRowModel
+} from "@tanstack/react-table";
+import { Box, Table } from "@mui/material";
+import { uniqueId, find, isEqual } from "lodash-es";
+import withBaseWrapper from "../../../higherOrder/withBaseWrapper";
+import WmPagination from "../pagination";
+import {
+  useTableData,
+  useFormWidget,
+  usePanelStructure,
+  useTableEdit,
+  useTableColumns,
+  useRowSelection,
+  useTableState,
+  useCellState,
+  useRowHandlers,
+  usePaginationState,
+  useTableInitialization,
+  useRowExpansion,
+  useServerSideSorting,
+  useTableEffects,
+  useTableStateManager,
+  useTableFilter,
+  useDynamicColumns,
+  useCustomExpressionColumns
+} from "./hooks";
+import {
+  parseTableColumns,
+  parseTableStructureWithGroups,
+  flattenTableStructure,
+  parseTableRowActions,
+  parseTableActions,
+  parseTableRowExpansion,
+  getSpacingClasses,
+  TABLE_CSS_CLASSES,
+  TABLE_MESSAGES,
+  getTableState,
+  saveTableState,
+  clearTableState,
+  addUniqueRowIds,
+  cleanRowData
+} from "./utils";
+import { hasTableGroups } from "./utils/groupHeaderUtils";
+import { handleNewRowNavigation } from "./utils";
+import {
+  TablePanelHeading,
+  TableFooterActions,
+  TableBodyComponent,
+  TableHeaderComponent,
+  GlobalSearchFilter,
+  SummaryRowFooter
+} from "./components";
+import { buildSelectionColumns } from "./utils/buildSelectionColumns";
+import LoadingComponent from "../pagination/components/LoadingComponent";
+import { createColumnsProxy } from "./utils/columnProxy";
+import { useDataSourceSubscription } from "../../../hooks/useDataSourceSubscription";
+import { refreshDataSource } from "./utils/crud-handlers";
+import { DataSource } from "../types";
+import { EditedRowsProvider } from "./hooks/use-edited-rows";
+import {
+  subscribeToScriptPageSizeBroadcast,
+  broadcastScriptPageSize
+} from "./utils/script-page-size-broadcast";
+import withStandalone from "../../../higherOrder/withStandalone";
+const WmTableComponent = memo(
+  (props) => {
+    var _a, _b, _d, _e, _f, _g, _h, _i;
+    const _c = props, {
+      name,
+      dataset = [],
+      navigation = "Basic",
+      children,
+      listener,
+      pagesize = 5,
+      navigationalign = "left",
+      showrecordcount = false,
+      maxsize = 5,
+      boundarylinks = false,
+      allowpagesizechange = false,
+      pagesizeoptions = "5,10,20,50,100",
+      formposition = "bottom",
+      editmode = "none",
+      spacing = "normal",
+      title,
+      subheading,
+      iconclass,
+      exportOptions = [],
+      shownavigation = true,
+      onDemandLoad = false,
+      showrowindex = false,
+      showheader = true,
+      enablesort = true,
+      enablecolumnselection = false,
+      onColumnselect,
+      onColumndeselect,
+      radioselect = false,
+      radioselecttitle = "",
+      radioselectarialabel = (_a = TABLE_MESSAGES) == null ? void 0 : _a.radioSelectAriaLabel,
+      multiselect = false,
+      multiselecttitle = "",
+      multiselectarialabel = (_b = TABLE_MESSAGES) == null ? void 0 : _b.multiSelectAriaLabel,
+      gridfirstrowselect = false,
+      isrowselectable = false,
+      rowClass = "",
+      deleteoktext = TABLE_MESSAGES.deleteOkText,
+      deletecanceltext = TABLE_MESSAGES.deleteCancelText,
+      confirmdelete = TABLE_MESSAGES.deleteConfirmMessage,
+      errormessage = TABLE_MESSAGES.operationError,
+      nodatamessage = TABLE_MESSAGES.noDataMessage,
+      loadingdatamsg = TABLE_MESSAGES.loadingMessage,
+      insertmessage = TABLE_MESSAGES.insertSuccess,
+      updatemessage = TABLE_MESSAGES.updateSuccess,
+      deletemessage = TABLE_MESSAGES.deleteSuccess,
+      ondemandmessage = "Load More",
+      viewlessmessage = "View Less",
+      showviewlessbutton = false,
+      onRowDelete,
+      onRowUpdate,
+      datasource,
+      binddataset,
+      onSuccess,
+      onError,
+      onRowinsert,
+      onRowupdate,
+      onRowdelete,
+      onRowclick,
+      onSort,
+      onBeforerowdelete,
+      onBeforefilter,
+      onHeaderclick,
+      onRowselect,
+      onRowdeselect,
+      onSetrecord,
+      statehandler,
+      formName,
+      parentForm,
+      filtermode,
+      filteronkeypress = false,
+      searchlabel = "Search",
+      onBeforedatarender,
+      onDatarender,
+      className,
+      exportformat,
+      exportdatasize,
+      onBeforeexport,
+      onAfterexport,
+      styles
+    } = _c, rest = __objRest(_c, [
+      "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",
+      "styles"
+    ]);
+    const effectiveStorageKey = useMemo(
+      () => name + ((listener == null ? void 0 : listener.partialName) ? `__${listener == null ? void 0 : listener.partialName}` : ""),
+      [name, listener == null ? void 0 : listener.partialName]
+    );
+    const widgetRegistrationKey = props["item-id"] || name;
+    const listenerRef = useRef(listener);
+    listenerRef.current = listener;
+    const loading = (datasource == null ? void 0 : datasource.loading) || false;
+    const prevDatasetRef = useRef(dataset);
+    const prevSelectedRow = useRef(null);
+    const tableApisRegistered = useRef(false);
+    const [accumulatedData, setAccumulatedData] = useState([]);
+    const handleAccumulatedDataUpdate = useCallback((data) => {
+      setAccumulatedData((prevData) => {
+        if (prevData.length !== data.length) {
+          return data;
+        }
+        return prevData;
+      });
+    }, []);
+    useEffect(() => {
+      if (navigation !== "Scroll" && navigation !== "On-Demand") {
+        setAccumulatedData([]);
+      }
+    }, [navigation]);
+    const notifyApp = (_d = listener == null ? void 0 : listener.App) == null ? void 0 : _d.notifyApp;
+    const showToast = useCallback(
+      (message, type) => {
+        if (notifyApp) {
+          notifyApp(message, type);
+        }
+      },
+      [notifyApp]
+    );
+    const isServerSidePagination = useCallback(() => {
+      if (navigation === "None") {
+        return false;
+      }
+      return !!(datasource && datasource.execute && datasource.execute(DataSource.Operation.IS_PAGEABLE));
+    }, [datasource, navigation]);
+    const effectiveStateHandler = navigation === "Scroll" ? "none" : statehandler;
+    useDataSourceSubscription({
+      datasource,
+      statehandler: effectiveStateHandler,
+      name,
+      widgetType: "table",
+      onPageRestored: () => {
+      }
+    });
+    const { internalDataset, setInternalDataset, deleteRecord, renderConfirmDialog } = useTableData(
+      {
+        dataset,
+        onRowDelete,
+        deleteoktext,
+        deletecanceltext,
+        confirmdelete,
+        deletemessage,
+        errormessage,
+        showToast,
+        datasource,
+        binddataset,
+        onSuccess,
+        onError,
+        onRowdelete,
+        isServerSidePagination: isServerSidePagination(),
+        listener,
+        widgetName: name
+      }
+    );
+    const { renderFormWidget } = useFormWidget({
+      listener
+    });
+    const cellState = useCellState(name);
+    const syncSelectedItemsImplRef = useRef(null);
+    const onSyncSelectedItems = useCallback(
+      (ids) => {
+        var _a2;
+        return (_a2 = syncSelectedItemsImplRef.current) == null ? void 0 : _a2.call(syncSelectedItemsImplRef, ids);
+      },
+      []
+    );
+    const {
+      initialPage,
+      initialPageSize,
+      initialActualPageSize,
+      initialSearchState,
+      initialSortState
+    } = useMemo(() => {
+      var _a2;
       if (navigation === "Scroll") {
         return {
           initialPage: 1,
           initialPageSize: pagesize,
-          initialActualPageSize: undefined,
-          initialSearchState: undefined,
-          initialSortState: undefined
+          initialActualPageSize: void 0,
+          initialSearchState: void 0,
+          initialSortState: void 0
         };
       }
-      var persisted = (0, _utils.getTableState)(name, effectiveStateHandler);
-      var sortedPageSizeOptions = (pagesizeoptions || "").split(",").map(function (v) {
-        return Number(v.trim());
-      }).filter(function (n) {
-        return !Number.isNaN(n);
-      }).sort(function (a, b) {
-        return a - b;
-      });
-      var hasExplicitPersistedPageSize = persisted != null && persisted.pagesize !== undefined && persisted.pagesize !== null;
-
-      // Align with Angular TableComponent.setDefaultPageSize: when allowpagesizechange is on
-      // and there is no persisted pagesize, use the smallest pagesize option (not design-time pagesize).
-      var defaultPageSizeFromOptions = allowpagesizechange && sortedPageSizeOptions.length > 0 && !hasExplicitPersistedPageSize ? sortedPageSizeOptions[0] : 20;
-
-      // Determine the actual page size (original datasource page size)
-      var actualPageSize;
-      if ((persisted === null || persisted === void 0 ? void 0 : persisted.actualpagesize) !== undefined) {
-        // If we have a persisted actualPageSize, use it (it should never change)
+      const persisted = getTableState(name, effectiveStateHandler);
+      const sortedPageSizeOptions = (pagesizeoptions || "").split(",").map((v) => Number(v.trim())).filter((n) => !Number.isNaN(n)).sort((a, b) => a - b);
+      const hasExplicitPersistedPageSize = persisted != null && persisted.pagesize !== void 0 && persisted.pagesize !== null;
+      const defaultPageSizeFromOptions = allowpagesizechange && sortedPageSizeOptions.length > 0 && !hasExplicitPersistedPageSize ? sortedPageSizeOptions[0] : 20;
+      let actualPageSize;
+      if ((persisted == null ? void 0 : persisted.actualpagesize) !== void 0) {
         actualPageSize = persisted.actualpagesize;
-      } else if (datasource !== null && datasource !== void 0 && (_datasource$paginatio = datasource.pagination) !== null && _datasource$paginatio !== void 0 && _datasource$paginatio.size) {
-        // Otherwise, if this is the first load, capture it from datasource
+      } else if ((_a2 = datasource == null ? void 0 : datasource.pagination) == null ? void 0 : _a2.size) {
         actualPageSize = datasource.pagination.size;
-      } else if (datasource !== null && datasource !== void 0 && datasource.maxResults) {
-        // Fallback to maxResults if available
+      } else if (datasource == null ? void 0 : datasource.maxResults) {
         actualPageSize = datasource.maxResults;
       }
       if (persisted) {
-        // Check if there's an active filter/search state
-        var hasActiveFilter = persisted.search && persisted.search.length > 0;
-
-        // If there's an active filter, don't restore pagination - start from page 1
-        // The server will return new filtered data, so old pagination is invalid
-        var restoredPage = hasActiveFilter ? 1 : persisted.pagination || 1;
-        var persistedPageSize = hasExplicitPersistedPageSize ? persisted.pagesize : defaultPageSizeFromOptions !== null && defaultPageSizeFromOptions !== void 0 ? defaultPageSizeFromOptions : pagesize;
-
-        // Set datasource maxResults if we have a persisted pageSize and datasource
-        if (isServerSidePagination() && datasource && datasource.maxResults !== undefined && hasExplicitPersistedPageSize) {
+        const hasActiveFilter = persisted.search && persisted.search.length > 0;
+        const restoredPage = hasActiveFilter ? 1 : persisted.pagination || 1;
+        const persistedPageSize = hasExplicitPersistedPageSize ? persisted.pagesize : defaultPageSizeFromOptions != null ? defaultPageSizeFromOptions : pagesize;
+        if (isServerSidePagination() && datasource && datasource.maxResults !== void 0 && hasExplicitPersistedPageSize) {
           datasource.maxResults = persistedPageSize;
         }
         return {
           initialPage: restoredPage,
           initialPageSize: persistedPageSize,
           initialActualPageSize: actualPageSize,
-          initialSearchState: persisted.search || undefined,
-          initialSortState: persisted.sort || undefined
+          initialSearchState: persisted.search || void 0,
+          initialSortState: persisted.sort || void 0
         };
       }
-      var initialPageSize = defaultPageSizeFromOptions !== undefined ? defaultPageSizeFromOptions : actualPageSize || pagesize;
+      const initialPageSize2 = allowpagesizechange ? defaultPageSizeFromOptions != null ? defaultPageSizeFromOptions : actualPageSize : pagesize;
       return {
         initialPage: 1,
-        initialPageSize: initialPageSize,
+        initialPageSize: initialPageSize2,
         initialActualPageSize: pagesize,
-        initialSearchState: undefined,
-        initialSortState: undefined
+        initialSearchState: void 0,
+        initialSortState: void 0
       };
-    }, [name, effectiveStateHandler, pagesize, isServerSidePagination(), datasource, navigation]),
-    initialPage = _useMemo.initialPage,
-    initialPageSize = _useMemo.initialPageSize,
-    initialActualPageSize = _useMemo.initialActualPageSize,
-    initialSearchState = _useMemo.initialSearchState,
-    initialSortState = _useMemo.initialSortState;
-
-  // Create a ref to hold the table instance
-  var tableRef = _react["default"].useRef(null);
-
-  // Create a ref to hold the table container DOM element
-  var tableContainerRef = _react["default"].useRef(null);
-
-  // 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,
+    }, [name, effectiveStateHandler, pagesize, isServerSidePagination(), datasource, navigation]);
+    const tableRef = React.useRef(null);
+    const tableContainerRef = React.useRef(null);
+    const prevPageIndexRef = useRef(-1);
+    const {
+      paginationState,
+      setPaginationState,
+      handlePaginationChange,
+      handlePageSizeChange: handlePageSizeChangeBase
+    } = usePaginationState({
+      initialPage,
+      initialPageSize,
+      editmode,
+      internalDataset,
+      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,
+    });
+    const effectiveMultiselect = multiselect;
+    const {
+      selectedRowIds,
+      useMultiSelect,
+      useRadioSelect,
+      handleRadioSelection,
+      handleMultiSelection,
+      handleSelectAll,
+      handleRowSelectionClick,
+      isRowSelected
+    } = useRowSelection({
+      radioselect,
       multiselect: effectiveMultiselect,
-      gridfirstrowselect: gridfirstrowselect,
-      internalDataset: internalDataset,
-      cellState: cellState,
-      name: name,
+      gridfirstrowselect,
+      internalDataset,
+      cellState,
+      name,
       statehandler: effectiveStateHandler,
-      initialActualPageSize: initialActualPageSize,
-      getTableState: function getTableState() {
-        return tableRef.current ? {
-          currentPage: tableRef.current.getState().pagination.pageIndex + 1,
-          currentPageSize: tableRef.current.getState().pagination.pageSize
-        } : {
-          currentPage: 1,
-          currentPageSize: initialPageSize
-        };
-      },
-      onRowselect: onRowselect,
-      onRowdeselect: onRowdeselect,
-      listener: listener,
-      navigation: navigation,
-      onSyncSelectedItems: onSyncSelectedItems
-    }),
-    selectedRowIds = _useRowSelection.selectedRowIds,
-    useMultiSelect = _useRowSelection.useMultiSelect,
-    useRadioSelect = _useRowSelection.useRadioSelect,
-    handleRadioSelection = _useRowSelection.handleRadioSelection,
-    handleMultiSelection = _useRowSelection.handleMultiSelection,
-    handleSelectAll = _useRowSelection.handleSelectAll,
-    handleRowSelectionClick = _useRowSelection.handleRowSelectionClick,
-    isRowSelected = _useRowSelection.isRowSelected;
-
-  // Use table state hook
-  var _useTableState = (0, _hooks.useTableState)({
+      initialActualPageSize,
+      getTableState: () => tableRef.current ? {
+        currentPage: tableRef.current.getState().pagination.pageIndex + 1,
+        currentPageSize: tableRef.current.getState().pagination.pageSize
+      } : { currentPage: 1, currentPageSize: initialPageSize },
+      onRowselect,
+      onRowdeselect,
+      listener,
+      navigation,
+      onSyncSelectedItems
+    });
+    const { activeRowIds, setActiveRow, handleRowActiveClick, isRowActive } = useTableState({
       editMode: editmode,
-      radioselect: radioselect,
+      radioselect,
       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.
-  // Use the raw dataset prop (not internalDataset) so column structure (keys/schema) is
-  // derived from the actual API response — even when all values are empty strings,
-  // removeEmptyRecords would otherwise wipe out internalDataset and leave dynamicColumns empty.
-  var _useDynamicColumns = (0, _hooks.useDynamicColumns)({
+    });
+    useEffect(() => {
+      if (useRadioSelect || useMultiSelect) {
+        setActiveRow(selectedRowIds);
+      }
+    }, [selectedRowIds, useRadioSelect, useMultiSelect, setActiveRow]);
+    const { dynamicColumns, isDynamicTable } = useDynamicColumns({
       dataset: dataset || [],
-      children: children,
-      listener: listener
-    }),
-    dynamicColumns = _useDynamicColumns.dynamicColumns,
-    isDynamicTable = _useDynamicColumns.isDynamicTable;
-
-  // Parse table structure from children using utilities
-  var _useMemo2 = (0, _react.useMemo)(function () {
-      var allTableActions = (0, _utils.parseTableActions)(children);
-      var headerActions = allTableActions.filter(function (action) {
-        var position = action.position || "footer";
+      children,
+      listener
+    });
+    const {
+      wmTableColumns,
+      tableStructure,
+      rowActions,
+      headerActions,
+      footerActions,
+      rowExpansionConfig
+    } = useMemo(() => {
+      const allTableActions = parseTableActions(children);
+      const headerActions2 = allTableActions.filter((action) => {
+        const position = action.position || "footer";
         return position === "header" || position.includes("header");
       });
-      var footerActions = allTableActions.filter(function (action) {
-        var position = action.position || "footer";
+      const footerActions2 = allTableActions.filter((action) => {
+        const position = action.position || "footer";
         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, internalDataset);
-
-      // 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;
+      const structure = parseTableStructureWithGroups(children);
+      const flatColumns = flattenTableStructure(structure);
+      const staticColumns = parseTableColumns(children, internalDataset);
+      const hasGroups = structure.some((item) => "isGroup" in item && item.isGroup);
+      const 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),
+        rowActions: parseTableRowActions(children),
         tableActions: allTableActions,
-        headerActions: headerActions,
-        footerActions: footerActions,
-        rowExpansionConfig: (0, _utils.parseTableRowExpansion)(children)
+        headerActions: headerActions2,
+        footerActions: footerActions2,
+        rowExpansionConfig: parseTableRowExpansion(children)
       };
-    }, [children, internalDataset, isDynamicTable, dynamicColumns]),
-    wmTableColumns = _useMemo2.wmTableColumns,
-    tableStructure = _useMemo2.tableStructure,
-    rowActions = _useMemo2.rowActions,
-    headerActions = _useMemo2.headerActions,
-    footerActions = _useMemo2.footerActions,
-    rowExpansionConfig = _useMemo2.rowExpansionConfig;
-  var _useState2 = (0, _react.useState)(0),
-    columnsVersion = _useState2[0],
-    setColumnsVersion = _useState2[1];
-  var _useState3 = (0, _react.useState)({}),
-    columnOverrides = _useState3[0],
-    setColumnOverrides = _useState3[1];
-  var applyOverride = (0, _react.useCallback)(function (field, key, value) {
-    setColumnOverrides(function (prev) {
-      return _objectSpread(_objectSpread({}, prev), {}, (0, _defineProperty2["default"])({}, field, _objectSpread(_objectSpread({}, prev[field] || {}), {}, (0, _defineProperty2["default"])({}, key, value))));
-    });
-  }, []);
-
-  /** Merge script-driven overrides (e.g. onBeforedatarender) onto WM column defs.
-   * Dynamic columns may be regenerated as new objects with default show:true while columnOverrides persist. */
-  var wmTableColumnsWithOverrides = (0, _react.useMemo)(function () {
-    return wmTableColumns.map(function (col) {
-      var f = col === null || col === void 0 ? void 0 : col.field;
-      if (!f) return col;
-      var o = columnOverrides[f];
-      if (!o || Object.keys(o).length === 0) return col;
-      return _objectSpread(_objectSpread({}, col), o);
-    });
-  }, [wmTableColumns, columnOverrides]);
-
-  // Use unified table edit functionality
-  var _useTableEdit = (0, _hooks.useTableEdit)({
+    }, [children, internalDataset, isDynamicTable, dynamicColumns]);
+    const [columnsVersion, setColumnsVersion] = useState(0);
+    const [columnOverrides, setColumnOverrides] = useState(
+      {}
+    );
+    const applyOverride = useCallback((field, key, value) => {
+      setColumnOverrides((prev) => __spreadProps(__spreadValues({}, prev), {
+        [field]: __spreadProps(__spreadValues({}, prev[field] || {}), { [key]: value })
+      }));
+    }, []);
+    const wmTableColumnsWithOverrides = useMemo(
+      () => wmTableColumns.map((col) => {
+        const f = col == null ? void 0 : col.field;
+        if (!f) return col;
+        const o = columnOverrides[f];
+        if (!o || Object.keys(o).length === 0) return col;
+        return __spreadValues(__spreadValues({}, col), o);
+      }),
+      [wmTableColumns, columnOverrides]
+    );
+    const {
+      editingRowId,
+      isRowEditing,
+      startEditing,
+      cancelEditing,
+      saveEditing,
+      renderEditableCell,
+      isAddingNewRow,
+      handleAddNewRowClick,
+      renderAddNewRow,
+      handleRowClick: handleTableEditRowClick,
+      handleKeyDown: handleTableEditKeyDown
+    } = useTableEdit({
       editMode: editmode,
-      internalDataset: internalDataset,
-      setInternalDataset: setInternalDataset,
+      internalDataset,
+      setInternalDataset,
       wmTableColumns: wmTableColumnsWithOverrides,
-      cellState: cellState,
-      renderFormWidget: renderFormWidget,
-      listener: listener,
-      onRowUpdate: onRowUpdate,
-      onRowDelete: onRowDelete,
-      onNewRowAdded: function onNewRowAdded(newRecord) {
-        // Use shared navigation utility function
-        (0, _utils.handleNewRowNavigation)(tableRef, newRecord, internalDataset);
+      cellState,
+      renderFormWidget,
+      listener,
+      onRowUpdate,
+      onRowDelete,
+      onNewRowAdded: (newRecord) => {
+        handleNewRowNavigation(tableRef, newRecord, internalDataset);
       },
-      showrowindex: showrowindex,
-      radioselect: radioselect,
+      showrowindex,
+      radioselect,
       multiselect: effectiveMultiselect,
-      rowActions: rowActions,
-      formposition: formposition,
-      insertmessage: insertmessage,
-      updatemessage: updatemessage,
-      errormessage: errormessage,
-      showToast: showToast,
+      rowActions,
+      formposition,
+      insertmessage,
+      updatemessage,
+      errormessage,
+      showToast,
       hasRowExpansion: rowExpansionConfig ? rowExpansionConfig.show : false,
       expansionPosition: rowExpansionConfig ? parseInt(String(rowExpansionConfig.position || "0"), 10) : 0,
-      datasource: datasource,
-      binddataset: binddataset,
-      onSuccess: onSuccess,
-      onError: onError,
-      onRowinsert: onRowinsert,
-      onRowupdate: onRowupdate,
-      onRowdelete: onRowdelete,
-      tableRef: tableRef,
+      datasource,
+      binddataset,
+      onSuccess,
+      onError,
+      onRowinsert,
+      onRowupdate,
+      onRowdelete,
+      tableRef,
       isServerSidePagination: isServerSidePagination(),
       tableName: name
-    }),
-    editingRowId = _useTableEdit.editingRowId,
-    isRowEditing = _useTableEdit.isRowEditing,
-    startEditing = _useTableEdit.startEditing,
-    cancelEditing = _useTableEdit.cancelEditing,
-    saveEditing = _useTableEdit.saveEditing,
-    renderEditableCell = _useTableEdit.renderEditableCell,
-    isAddingNewRow = _useTableEdit.isAddingNewRow,
-    handleAddNewRowClick = _useTableEdit.handleAddNewRowClick,
-    renderAddNewRow = _useTableEdit.renderAddNewRow,
-    handleTableEditRowClick = _useTableEdit.handleRowClick,
-    handleTableEditKeyDown = _useTableEdit.handleKeyDown;
-
-  // Use the row handlers hook
-  var _useRowHandlers = (0, _hooks.useRowHandlers)({
-      editingRowId: editingRowId,
-      isAddingNewRow: isAddingNewRow,
-      handleRowSelectionClick: handleRowSelectionClick,
-      handleTableEditRowClick: handleTableEditRowClick,
-      handleRowActiveClick: handleRowActiveClick,
-      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 _useState4 = (0, _react.useState)(function () {
-      // Convert initialSortState to TanStack Table sorting format
+    });
+    const { handleRowClick } = useRowHandlers({
+      editingRowId,
+      isAddingNewRow,
+      handleRowSelectionClick,
+      handleTableEditRowClick,
+      handleRowActiveClick,
+      onRowclick,
+      useRadioSelect,
+      useMultiSelect,
+      isrowselectable,
+      listener,
+      name
+    });
+    useEffect(() => {
+      const currentPage = paginationState.pageIndex;
+      if (prevPageIndexRef.current !== -1 && currentPage !== prevPageIndexRef.current && isAddingNewRow) {
+        cancelEditing();
+      }
+    }, [paginationState.pageIndex, isAddingNewRow, cancelEditing]);
+    const [sorting, setSorting] = useState(() => {
       if (initialSortState) {
-        return [{
-          id: initialSortState.field,
-          desc: initialSortState.direction === "desc"
-        }];
+        return [
+          {
+            id: initialSortState.field,
+            desc: initialSortState.direction === "desc"
+          }
+        ];
       }
       return [];
-    }),
-    sorting = _useState4[0],
-    setSorting = _useState4[1];
-  var _useState5 = (0, _react.useState)({}),
-    columnSizing = _useState5[0],
-    setColumnSizing = _useState5[1];
-  var _useState6 = (0, _react.useState)(false),
-    isResizing = _useState6[0],
-    setIsResizing = _useState6[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
-    setPaginationState(function (prev) {
-      return _objectSpread(_objectSpread({}, prev), {}, {
-        pageIndex: 0
-      });
     });
-
-    // Trigger onSort callback if provided
-    if (onSort && newSorting.length > 0) {
-      var _listener$Widgets;
-      var sortData = {
-        field: newSorting[0].id,
-        direction: newSorting[0].desc ? "desc" : "asc"
-      };
-      onSort(null, listener === null || listener === void 0 || (_listener$Widgets = listener.Widgets) === null || _listener$Widgets === void 0 ? void 0 : _listener$Widgets[name], sortData);
-    }
-  }, [sorting, name]);
-
-  // Use row expansion hook
-  var _useRowExpansion = (0, _hooks.useRowExpansion)({
-      rowExpansionConfig: rowExpansionConfig,
-      internalDataset: internalDataset
-    }),
-    expandedRows = _useRowExpansion.expandedRows,
-    toggleRowExpansion = _useRowExpansion.toggleRowExpansion,
-    isRowExpanded = _useRowExpansion.isRowExpanded,
-    registerRowDefInstance = _useRowExpansion.registerRowDefInstance,
-    rowDefInstances = _useRowExpansion.rowDefInstances;
-  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(widgetRegistrationKey, {
-          selecteditem: selecteditem
-        });
-      }
-    }
-    setTimeout(function () {
-      return toggleRowExpansion(rowId, rowData);
-    }, 0);
-  }, [name]);
-
-  // Use table columns hook to get column definitions
-  var _useTableColumns = (0, _hooks.useTableColumns)({
-      wmTableColumns: wmTableColumnsWithOverrides,
-      columnsVersion: columnsVersion,
-      rowActions: rowActions,
-      listener: listener,
-      deleteRecord: function deleteRecord(rowData) {
-        return _deleteRecord(rowData, tableRef.current);
+    const [columnSizing, setColumnSizing] = useState({});
+    const [isResizing, setIsResizing] = useState(false);
+    const handleColumnSelect = useCallback(
+      (event, columnId, colDef, columnData) => {
+        if (onColumnselect) {
+          onColumnselect(event, { field: columnId, colDef, data: columnData });
+        }
       },
-      showrowindex: showrowindex,
-      editmode: editmode,
-      isDynamicTable: isDynamicTable,
-      renderEditableCell: renderEditableCell,
-      isRowEditing: isRowEditing,
-      startEditing: startEditing,
-      cancelEditing: cancelEditing,
-      saveEditing: saveEditing,
-      editingRowId: editingRowId,
-      cellState: cellState,
-      isResizing: isResizing,
-      handleRowClick: handleRowClick,
-      handleRadioSelection: handleRadioSelection,
-      handleMultiSelection: handleMultiSelection,
-      useRadioSelect: useRadioSelect,
-      useMultiSelect: useMultiSelect,
-      isRowSelected: isRowSelected
-    }),
-    baseColumns = _useTableColumns.columns;
-
-  // Add radio select or multiselect column if enabled and memoize with stable references
-  var columns = (0, _react.useMemo)(function () {
-    var selectionColumn = (0, _buildSelectionColumns.buildSelectionColumns)({
-      useRadioSelect: useRadioSelect,
-      useMultiSelect: useMultiSelect,
-      selectedRowIds: selectedRowIds,
-      handleRadioSelection: handleRadioSelection,
-      handleMultiSelection: handleMultiSelection,
-      handleSelectAll: handleSelectAll,
-      internalDataset: internalDataset,
-      radioselecttitle: radioselecttitle,
-      radioselectarialabel: radioselectarialabel,
-      multiselecttitle: multiselecttitle,
-      multiselectarialabel: multiselectarialabel,
-      tableName: name
-    });
-    if (selectionColumn) {
-      return [selectionColumn].concat((0, _toConsumableArray2["default"])(baseColumns));
-    }
-    return baseColumns;
-  }, [baseColumns, useRadioSelect, useMultiSelect, selectedRowIds, internalDataset, handleRadioSelection, handleMultiSelection, handleSelectAll, radioselecttitle, radioselectarialabel, multiselecttitle, multiselectarialabel, name]);
-
-  //column proxy changes
-  var columnsStateRef = (0, _react.useRef)(columns);
-  var parentFormColumns = (listener === null || listener === void 0 || (_listener$Widgets2 = listener.Widgets) === null || _listener$Widgets2 === void 0 || (_listener$Widgets2 = _listener$Widgets2[parentForm]) === null || _listener$Widgets2 === void 0 ? void 0 : _listener$Widgets2.dataoutput) || {};
-  var _useState7 = (0, _react.useState)([]),
-    summaryRowDefs = _useState7[0],
-    setSummaryRowDefs = _useState7[1];
-  var _useState8 = (0, _react.useState)(false),
-    summaryRowEnabled = _useState8[0],
-    setSummaryRowEnabled = _useState8[1];
-  var _useState9 = (0, _react.useState)([]),
-    summaryRowDefObjects = _useState9[0],
-    setSummaryRowDefObjects = _useState9[1];
-  // Store column show property for summary rows: [rowIndex][columnKey] => show boolean
-  var _useState0 = (0, _react.useState)({}),
-    summaryRowColumnShow = _useState0[0],
-    setSummaryRowColumnShow = _useState0[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;
+      [onColumnselect]
+    );
+    const handleColumnDeselect = useCallback(
+      (event, columnId, colDef, columnData) => {
+        if (onColumndeselect) {
+          onColumndeselect(event, { field: columnId, colDef, data: columnData });
+        }
+      },
+      [onColumndeselect]
+    );
+    const handleSortingChange = useCallback(
+      (updaterOrValue) => {
+        var _a2;
+        const newSorting = typeof updaterOrValue === "function" ? updaterOrValue(sorting) : updaterOrValue;
+        setSorting(updaterOrValue);
+        setPaginationState((prev) => __spreadProps(__spreadValues({}, prev), { pageIndex: 0 }));
+        if (onSort && newSorting.length > 0) {
+          const sortData = {
+            field: newSorting[0].id,
+            direction: newSorting[0].desc ? "desc" : "asc"
+          };
+          onSort(null, (_a2 = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a2[name], sortData);
+        }
+      },
+      [sorting, name]
+    );
+    const {
+      expandedRows,
+      toggleRowExpansion,
+      isRowExpanded,
+      registerRowDefInstance,
+      rowDefInstances
+    } = useRowExpansion({
+      rowExpansionConfig,
+      internalDataset
     });
-    // Store column's show property
-    if (show !== undefined) {
-      setSummaryRowColumnShow(function (prev) {
-        var newShow = _objectSpread({}, prev);
-        if (!newShow[rowIndex]) {
-          newShow[rowIndex] = {};
+    const handleToggleRowExpansion = useCallback(
+      (rowId, rowData) => {
+        if (listener == null ? void 0 : listener.onChange) {
+          const selecteditem = cleanRowData(rowData);
+          if (!isEqual(prevSelectedRow.current, selecteditem)) {
+            prevSelectedRow.current = selecteditem;
+            listener.onChange(widgetRegistrationKey, { selecteditem });
+          }
         }
-        newShow[rowIndex] = _objectSpread(_objectSpread({}, newShow[rowIndex]), {}, (0, _defineProperty2["default"])({}, columnKey, show));
-        return newShow;
+        setTimeout(() => toggleRowExpansion(rowId, rowData), 0);
+      },
+      [name]
+    );
+    const { columns: baseColumns } = useTableColumns({
+      wmTableColumns: wmTableColumnsWithOverrides,
+      columnsVersion,
+      rowActions,
+      listener,
+      deleteRecord: (rowData) => deleteRecord(rowData, tableRef.current),
+      showrowindex,
+      editmode,
+      isDynamicTable,
+      renderEditableCell,
+      isRowEditing,
+      startEditing,
+      cancelEditing,
+      saveEditing,
+      editingRowId,
+      cellState,
+      isResizing,
+      handleRowClick,
+      handleRadioSelection,
+      handleMultiSelection,
+      useRadioSelect,
+      useMultiSelect,
+      isRowSelected
+    });
+    const columns = useMemo(() => {
+      const selectionColumn = buildSelectionColumns({
+        useRadioSelect,
+        useMultiSelect,
+        selectedRowIds,
+        handleRadioSelection,
+        handleMultiSelection,
+        handleSelectAll,
+        internalDataset,
+        radioselecttitle,
+        radioselectarialabel,
+        multiselecttitle,
+        multiselectarialabel,
+        tableName: name
       });
-    }
-    setSummaryRowEnabled(true);
-  }, []);
-  var columnsProxy = (0, _react.useMemo)(function () {
-    return (0, _columnProxy.createColumnsProxy)(wmTableColumns, applyOverride, setColumnsVersion, setSummaryRowDef);
-  }, [wmTableColumns, applyOverride, setColumnsVersion, setSummaryRowDef]);
-  var _useCustomExpressionC = (0, _hooks.useCustomExpressionColumns)({
+      if (selectionColumn) {
+        return [selectionColumn, ...baseColumns];
+      }
+      return baseColumns;
+    }, [
+      baseColumns,
+      useRadioSelect,
+      useMultiSelect,
+      selectedRowIds,
+      internalDataset,
+      handleRadioSelection,
+      handleMultiSelection,
+      handleSelectAll,
+      radioselecttitle,
+      radioselectarialabel,
+      multiselecttitle,
+      multiselectarialabel,
+      name
+    ]);
+    const columnsStateRef = useRef(columns);
+    const parentFormColumns = ((_f = (_e = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _e[parentForm]) == null ? void 0 : _f.dataoutput) || {};
+    const [summaryRowDefs, setSummaryRowDefs] = useState([]);
+    const [summaryRowEnabled, setSummaryRowEnabled] = useState(false);
+    const [summaryRowDefObjects, setSummaryRowDefObjects] = useState([]);
+    const [summaryRowColumnShow, setSummaryRowColumnShow] = useState({});
+    const setSummaryRowDef = useCallback(
+      (columnKey, data, rowIndex, refresh2, show) => {
+        setSummaryRowDefs((prev) => {
+          const newDefs = [...prev];
+          newDefs[rowIndex] = __spreadProps(__spreadValues({}, newDefs[rowIndex]), { [columnKey]: data });
+          return newDefs;
+        });
+        setSummaryRowDefObjects((prev) => {
+          const newObjs = [...prev];
+          newObjs[rowIndex] = __spreadProps(__spreadValues({}, newObjs[rowIndex]), { [columnKey]: data });
+          return newObjs;
+        });
+        if (show !== void 0) {
+          setSummaryRowColumnShow((prev) => {
+            const newShow = __spreadValues({}, prev);
+            if (!newShow[rowIndex]) {
+              newShow[rowIndex] = {};
+            }
+            newShow[rowIndex] = __spreadProps(__spreadValues({}, newShow[rowIndex]), { [columnKey]: show });
+            return newShow;
+          });
+        }
+        setSummaryRowEnabled(true);
+      },
+      []
+    );
+    const columnsProxy = useMemo(
+      () => createColumnsProxy(wmTableColumns, applyOverride, setColumnsVersion, setSummaryRowDef),
+      [wmTableColumns, applyOverride, setColumnsVersion, setSummaryRowDef]
+    );
+    const {
+      customColumns,
+      customColumnsRevision,
+      customExpressionSignature,
+      mergeParsedCustomColumns
+    } = useCustomExpressionColumns({
       columnSource: columnsProxy,
-      listenerRef: listenerRef
-    }),
-    customColumns = _useCustomExpressionC.customColumns,
-    customColumnsRevision = _useCustomExpressionC.customColumnsRevision,
-    customExpressionSignature = _useCustomExpressionC.customExpressionSignature,
-    mergeParsedCustomColumns = _useCustomExpressionC.mergeParsedCustomColumns;
-  columnsStateRef.current = columns;
-  var columnsForTable = (0, _react.useMemo)(function () {
-    var base = columnsStateRef.current || [];
-    return base.map(function (col) {
-      var field = col.accessorKey || col.id;
-      var override = field ? columnOverrides[field] || {} : {};
-      return _objectSpread(_objectSpread(_objectSpread({}, col), override), Object.keys(override).length > 0 ? {
-        meta: _objectSpread(_objectSpread({}, col.meta), override)
-      } : {});
+      listenerRef
     });
-  }, [columns, columnOverrides, columnsVersion, editingRowId]);
-
-  // Compute  class signature from columns meta.className to trigger header and body re-render on class updates
-  var ColClassSignature = (0, _react.useMemo)(function () {
-    try {
-      return (columnsForTable || []).map(function (col) {
-        var m = col === null || col === void 0 ? void 0 : col.meta;
-        return [m === null || m === void 0 ? void 0 : m.className, m === null || m === void 0 ? void 0 : m.colClass].map(function (v) {
-          return String(v !== null && v !== void 0 ? v : "");
-        }).join(":");
-      }).join("|");
-    } catch (_unused) {
-      return "";
-    }
-  }, [columnsForTable]);
-
-  // Use filter hook for filtering functionality
-  var _useTableFilter = (0, _hooks.useTableFilter)({
+    columnsStateRef.current = columns;
+    const columnsForTable = useMemo(() => {
+      const base = columnsStateRef.current || [];
+      return base.map((col) => {
+        const field = col.accessorKey || col.id;
+        const override = field ? columnOverrides[field] || {} : {};
+        return __spreadValues(__spreadValues(__spreadValues({}, col), override), Object.keys(override).length > 0 ? { meta: __spreadValues(__spreadValues({}, col.meta), override) } : {});
+      });
+    }, [columns, columnOverrides, columnsVersion, editingRowId]);
+    const ColClassSignature = useMemo(() => {
+      try {
+        return (columnsForTable || []).map((col) => {
+          const m = col == null ? void 0 : col.meta;
+          return [m == null ? void 0 : m.className, m == null ? void 0 : m.colClass].map((v) => String(v != null ? v : "")).join(":");
+        }).join("|");
+      } catch (e) {
+        return "";
+      }
+    }, [columnsForTable]);
+    const {
+      globalFilter,
+      setGlobalFilter: setGlobalFilterOriginal,
+      globalSearchColumn,
+      setGlobalSearchColumn,
+      columnFilters,
+      setColumnFilter: setColumnFilterOriginal,
+      filteredData,
+      getFilterFields,
+      transformFilterFields
+    } = useTableFilter({
       filterMode: filtermode,
       columns: columnsForTable,
       dataset: (navigation === "Scroll" || navigation === "On-Demand") && accumulatedData.length > 0 ? accumulatedData : internalDataset,
-      initialSearchState: initialSearchState
-    }),
-    globalFilter = _useTableFilter.globalFilter,
-    setGlobalFilterOriginal = _useTableFilter.setGlobalFilter,
-    globalSearchColumn = _useTableFilter.globalSearchColumn,
-    setGlobalSearchColumn = _useTableFilter.setGlobalSearchColumn,
-    columnFilters = _useTableFilter.columnFilters,
-    setColumnFilterOriginal = _useTableFilter.setColumnFilter,
-    filteredData = _useTableFilter.filteredData,
-    getFilterFields = _useTableFilter.getFilterFields,
-    transformFilterFields = _useTableFilter.transformFilterFields;
-
-  // Wrap filter setters to reset page when filters change
-  var setGlobalFilter = (0, _react.useCallback)(function (value) {
-    setGlobalFilterOriginal(value);
-    // Reset to first page when filter changes
-    setPaginationState(function (prev) {
-      return _objectSpread(_objectSpread({}, prev), {}, {
-        pageIndex: 0
-      });
+      initialSearchState
     });
-  }, [setGlobalFilterOriginal]);
-  var setColumnFilter = (0, _react.useCallback)(function (columnId, value, matchMode) {
-    setColumnFilterOriginal(columnId, value, matchMode);
-    // Reset to first page when filter changes
-    setPaginationState(function (prev) {
-      return _objectSpread(_objectSpread({}, prev), {}, {
-        pageIndex: 0
+    const setGlobalFilter = useCallback(
+      (value) => {
+        setGlobalFilterOriginal(value);
+        setPaginationState((prev) => __spreadProps(__spreadValues({}, prev), { pageIndex: 0 }));
+      },
+      [setGlobalFilterOriginal]
+    );
+    const setColumnFilter = useCallback(
+      (columnId, value, matchMode) => {
+        setColumnFilterOriginal(columnId, value, matchMode);
+        setPaginationState((prev) => __spreadProps(__spreadValues({}, prev), { pageIndex: 0 }));
+      },
+      [setColumnFilterOriginal]
+    );
+    const resizeTimeoutRef = useRef(null);
+    const handleColumnSizingChange = useCallback(
+      (updaterOrValue) => {
+        setIsResizing((prev) => {
+          if (!prev) return true;
+          return prev;
+        });
+        setColumnSizing(updaterOrValue);
+        if (resizeTimeoutRef.current) {
+          clearTimeout(resizeTimeoutRef.current);
+        }
+        resizeTimeoutRef.current = setTimeout(() => {
+          setIsResizing(false);
+        }, 150);
+      },
+      []
+    );
+    const rowSelection = useMemo(() => {
+      const selection = {};
+      selectedRowIds.forEach((id) => {
+        selection[id] = true;
       });
+      return selection;
+    }, [selectedRowIds]);
+    const isServerSideSorting = isServerSidePagination();
+    const tableData = useMemo(() => {
+      if ((navigation === "Scroll" || navigation === "On-Demand") && accumulatedData.length > 0) {
+        return filtermode && !isServerSidePagination() ? filteredData : accumulatedData;
+      }
+      return filtermode && !isServerSidePagination() ? filteredData : internalDataset;
+    }, [
+      navigation,
+      accumulatedData,
+      filteredData,
+      internalDataset,
+      filtermode,
+      isServerSidePagination
+    ]);
+    const memoizedPagination = useMemo(
+      () => ({
+        pageSize: navigation === "None" ? (tableData == null ? void 0 : tableData.length) || 0 : paginationState.pageSize,
+        pageIndex: paginationState.pageIndex
+      }),
+      [navigation, tableData == null ? void 0 : tableData.length, paginationState.pageSize, paginationState.pageIndex]
+    );
+    const table = useReactTable({
+      data: tableData,
+      columns: columnsForTable,
+      state: {
+        sorting,
+        columnSizing,
+        rowSelection,
+        // Add row selection state
+        pagination: memoizedPagination
+      },
+      onSortingChange: handleSortingChange,
+      onColumnSizingChange: handleColumnSizingChange,
+      onPaginationChange: setPaginationState,
+      getCoreRowModel: getCoreRowModel(),
+      // Only use pagination model for client-side pagination
+      getPaginationRowModel: isServerSidePagination() ? void 0 : getPaginationRowModel(),
+      // Use sorted row model only for client-side sorting
+      getSortedRowModel: isServerSideSorting ? void 0 : getSortedRowModel(),
+      enableSorting: enablesort,
+      enableSortingRemoval: false,
+      autoResetPageIndex: false,
+      enableColumnResizing: true,
+      columnResizeMode: "onChange",
+      // Keep onChange for real-time visual feedback
+      enableRowSelection: true,
+      // Enable row selection
+      // Use manual pagination and sorting for server-side operations
+      manualPagination: isServerSidePagination(),
+      manualSorting: isServerSideSorting,
+      pageCount: isServerSidePagination() && ((_g = datasource == null ? void 0 : datasource.pagination) == null ? void 0 : _g.totalPages) ? datasource.pagination.totalPages : void 0,
+      getRowId: (row) => row._wmTableRowId || String(row.id) || uniqueId("row_")
     });
-  }, [setColumnFilterOriginal]);
-
-  // Use refs to track resizing state and debounce timer
-  var resizeTimeoutRef = (0, _react.useRef)(null);
-
-  // Memoize the column sizing change handler with smart resizing detection
-  var handleColumnSizingChange = (0, _react.useCallback)(function (updaterOrValue) {
-    // Only update resizing state if it's not already true
-    setIsResizing(function (prev) {
-      if (!prev) return true;
-      return prev;
-    });
-    setColumnSizing(updaterOrValue);
-
-    // Clear any existing timeout
-    if (resizeTimeoutRef.current) {
-      clearTimeout(resizeTimeoutRef.current);
-    }
-
-    // Set a debounced timeout to detect when resizing has stopped
-    resizeTimeoutRef.current = setTimeout(function () {
-      setIsResizing(false);
-    }, 150); // 150ms delay to detect when user stops resizing
-  }, []);
-
-  // 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 = {};
-    selectedRowIds.forEach(function (id) {
-      selection[id] = true;
-    });
-    return selection;
-  }, [selectedRowIds]);
-
-  // Determine if we're using server-side sorting (same as server-side pagination)
-  var isServerSideSorting = isServerSidePagination();
-
-  // Use accumulated data for Scroll and On-Demand navigation, otherwise use normal dataset
-  var tableData = (0, _react.useMemo)(function () {
-    // 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;
-    }
-    // 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
-      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)(),
-    // Use sorted row model only for client-side sorting
-    getSortedRowModel: isServerSideSorting ? undefined : (0, _reactTable.getSortedRowModel)(),
-    enableSorting: enablesort,
-    enableSortingRemoval: false,
-    autoResetPageIndex: false,
-    enableColumnResizing: true,
-    columnResizeMode: "onChange",
-    // Keep onChange for real-time visual feedback
-    enableRowSelection: true,
-    // Enable row selection
-    // Use manual pagination and sorting for server-side operations
-    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,
-    getRowId: function getRowId(row) {
-      return row._wmTableRowId || String(row.id) || (0, _lodashEs.uniqueId)("row_");
-    }
-  });
-
-  // Update the table ref
-  tableRef.current = table;
-
-  // Memoize filter fields to prevent unnecessary re-renders in useServerSideSorting
-  var memoizedFilterFields = (0, _react.useMemo)(function () {
-    if (!filtermode) return {};
-    var searchObj = filtermode === "search" ? [{
-      field: globalSearchColumn,
-      value: globalFilter,
-      matchMode: "anywhereignorecase",
-      type: "string"
-    }] : transformFilterFields(columnFilters);
-    return getFilterFields(searchObj);
-  }, [filtermode, globalSearchColumn, globalFilter, columnFilters, getFilterFields, transformFilterFields]);
-
-  // Memoize logical operator
-  var memoizedLogicalOp = (0, _react.useMemo)(function () {
-    return filtermode === "search" && !globalSearchColumn ? "OR" : "AND";
-  }, [filtermode, globalSearchColumn]);
-
-  // Use server-side sorting hook to handle data fetching
-  (0, _hooks.useServerSideSorting)({
-    datasource: datasource,
-    sorting: sorting,
-    setInternalDataset: setInternalDataset,
-    showToast: showToast,
-    isServerSidePagination: isServerSidePagination(),
-    pageIndex: table.getState().pagination.pageIndex,
-    onError: onError,
-    onBeforefilter: onBeforefilter,
-    filterFields: memoizedFilterFields,
-    logicalOp: memoizedLogicalOp,
-    listener: listener,
-    name: name
-  });
-
-  // Panel structure management
-  var _usePanelStructure = (0, _hooks.usePanelStructure)({
-      title: title,
-      subheading: subheading,
-      iconclass: iconclass,
-      exportformat: exportformat,
-      headerActions: headerActions,
-      footerActions: footerActions,
-      shownavigation: shownavigation,
-      onDemandLoad: onDemandLoad,
-      internalDataset: internalDataset,
-      pagesize: pagesize,
-      allowpagesizechange: allowpagesizechange,
-      datasource: datasource,
-      showrecordcount: showrecordcount
-    }),
-    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$Widgets3;
-    if (name && listener !== null && listener !== void 0 && (_listener$Widgets3 = listener.Widgets) !== null && _listener$Widgets3 !== void 0 && _listener$Widgets3[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;
-
-  // Generate spacing-related classes based on spacing prop
-  var spacingClasses = (0, _utils.getSpacingClasses)(spacing);
-
-  // ==================== STATE MANAGEMENT ====================
-  // Prepare filter data based on filter mode - always in array format
-  var filterDataForState = (0, _react.useMemo)(function () {
-    if (!filtermode) return undefined;
-    if (filtermode === "search") {
-      if (globalFilter || globalSearchColumn) {
-        // Find column type for the selected search column
-        var columnType = globalSearchColumn ? function (_col$meta, _col$meta2) {
-          var col = (0, _lodashEs.find)(columnsForTable, function (c) {
-            var column = c;
-            return column.accessorKey === globalSearchColumn || column.id === globalSearchColumn;
-          });
-          return (col === null || col === void 0 || (_col$meta = col.meta) === null || _col$meta === void 0 ? void 0 : _col$meta.type) || (col === null || col === void 0 || (_col$meta2 = col.meta) === null || _col$meta2 === void 0 ? void 0 : _col$meta2.editinputtype) || "string";
-        }() : "string";
-        return [{
-          field: globalSearchColumn || "",
+    tableRef.current = table;
+    const memoizedFilterFields = useMemo(() => {
+      if (!filtermode) return {};
+      const searchObj = filtermode === "search" ? [
+        {
+          field: globalSearchColumn,
           value: globalFilter,
           matchMode: "anywhereignorecase",
-          type: columnType
-        }];
-      }
-    } else if (filtermode === "multicolumn") {
-      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 (_ref3) {
-        var _ref4 = (0, _slicedToArray2["default"])(_ref3, 2),
-          field = _ref4[0],
-          filter = _ref4[1];
-        // Find column type for each field
-        var columnType = function (_col$meta3, _col$meta4) {
-          var col = (0, _lodashEs.find)(columnsForTable, function (c) {
-            var column = c;
-            return column.accessorKey === field || column.id === field;
-          });
-          return (col === null || col === void 0 || (_col$meta3 = col.meta) === null || _col$meta3 === void 0 ? void 0 : _col$meta3.type) || (col === null || col === void 0 || (_col$meta4 = col.meta) === null || _col$meta4 === void 0 ? void 0 : _col$meta4.editinputtype) || "string";
-        }();
+          type: "string"
+        }
+      ] : transformFilterFields(columnFilters);
+      return getFilterFields(searchObj);
+    }, [
+      filtermode,
+      globalSearchColumn,
+      globalFilter,
+      columnFilters,
+      getFilterFields,
+      transformFilterFields
+    ]);
+    const memoizedLogicalOp = useMemo(() => {
+      return filtermode === "search" && !globalSearchColumn ? "OR" : "AND";
+    }, [filtermode, globalSearchColumn]);
+    useServerSideSorting({
+      datasource,
+      sorting,
+      setInternalDataset,
+      showToast,
+      isServerSidePagination: isServerSidePagination(),
+      pageIndex: table.getState().pagination.pageIndex,
+      onError,
+      onBeforefilter,
+      filterFields: memoizedFilterFields,
+      logicalOp: memoizedLogicalOp,
+      listener,
+      name
+    });
+    const { showPanelHeading, showPagination } = usePanelStructure({
+      title,
+      subheading,
+      iconclass,
+      exportformat,
+      headerActions,
+      footerActions,
+      shownavigation,
+      onDemandLoad,
+      internalDataset,
+      pagesize,
+      allowpagesizechange,
+      datasource,
+      showrecordcount
+    });
+    const handlePaginationWidgetReady = useCallback(
+      (paginationWidget) => {
+        var _a2;
+        if (name && ((_a2 = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a2[name])) {
+          listener.Widgets[name].dataNavigator = paginationWidget;
+        }
+      },
+      [name, listener]
+    );
+    const sortInfoForExport = useMemo(() => {
+      if (sorting.length > 0) {
         return {
-          field: field,
-          value: filter.value,
-          matchMode: filter.matchMode,
-          type: columnType
+          field: sorting[0].id,
+          direction: sorting[0].desc ? "desc" : "asc"
         };
-      });
-      return activeFilters.length > 0 ? activeFilters : undefined;
-    }
-    return undefined;
-  }, [filtermode, globalFilter, globalSearchColumn, columnFilters, columnsForTable]);
-
-  // Convert TanStack Table sorting state to our format
-  var sortDataForState = (0, _react.useMemo)(function () {
-    if (sorting.length > 0) {
-      var firstSort = sorting[0]; // We only support single column sorting for state persistence
-      return {
-        field: firstSort.id,
-        direction: firstSort.desc ? "desc" : "asc"
-      };
-    }
-    return undefined;
-  }, [sorting]);
-  var stateManager = (0, _hooks.useTableStateManager)({
-    name: name,
-    storage: effectiveStateHandler,
-    currentPage: table.getState().pagination.pageIndex + 1,
-    currentPageSize: table.getState().pagination.pageSize,
-    selectedRowIds: selectedRowIds,
-    internalDataset: internalDataset,
-    initialActualPageSize: initialActualPageSize,
-    datasource: datasource,
-    multiselect: effectiveMultiselect,
-    filterData: filterDataForState,
-    sortData: sortDataForState,
-    navigation: navigation,
-    isStateConfigured: effectiveStateHandler !== undefined && effectiveStateHandler !== "none",
-    defaultPageSize: initialPageSize,
-    initialSortState: initialSortState,
-    initialFilterState: initialSearchState
-  });
-
-  // Enhanced page size change handler with state persistence
-  var handlePageSizeChange = (0, _react.useCallback)(function (newPageSize) {
-    // 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
-    if (navigation !== "Scroll") {
-      // Get current persisted state to access all selected items across pages
-      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, oldPageSize // Pass the old page size
-      );
-
-      // Clear the existing state first to avoid merge issues with setWidgetState
-      (0, _utils.clearTableState)(name, effectiveStateHandler);
-
-      // Only save if there's something to save (not in default state)
-      if (Object.keys(newState).length > 0) {
-        // If pagesize equals default, remove it from the state
-        if (newPageSize === initialPageSize) {
-          delete newState.pagesize;
-        }
-
-        // Only save if there are still properties after removing default pagesize
-        if (Object.keys(newState).length > 0) {
-          (0, _utils.saveTableState)(name, effectiveStateHandler, newState);
+      }
+      return void 0;
+    }, [sorting]);
+    const isGridEditModeComplete = isAddingNewRow || editingRowId !== null;
+    const spacingClasses = getSpacingClasses(spacing);
+    const filterDataForState = useMemo(() => {
+      if (!filtermode) return void 0;
+      if (filtermode === "search") {
+        if (globalFilter || globalSearchColumn) {
+          const columnType = globalSearchColumn ? (() => {
+            var _a2, _b2;
+            const col = find(columnsForTable, (c) => {
+              const column = c;
+              return column.accessorKey === globalSearchColumn || column.id === globalSearchColumn;
+            });
+            return ((_a2 = col == null ? void 0 : col.meta) == null ? void 0 : _a2.type) || ((_b2 = col == null ? void 0 : col.meta) == null ? void 0 : _b2.editinputtype) || "string";
+          })() : "string";
+          return [
+            {
+              field: globalSearchColumn || "",
+              value: globalFilter,
+              matchMode: "anywhereignorecase",
+              type: columnType
+            }
+          ];
         }
+      } else if (filtermode === "multicolumn") {
+        const activeFilters = Object.entries(columnFilters).filter(([_, filter]) => filter.value).map(([field, filter]) => {
+          const columnType = (() => {
+            var _a2, _b2;
+            const col = find(columnsForTable, (c) => {
+              const column = c;
+              return column.accessorKey === field || column.id === field;
+            });
+            return ((_a2 = col == null ? void 0 : col.meta) == null ? void 0 : _a2.type) || ((_b2 = col == null ? void 0 : col.meta) == null ? void 0 : _b2.editinputtype) || "string";
+          })();
+          return {
+            field,
+            value: filter.value,
+            matchMode: filter.matchMode,
+            type: columnType
+          };
+        });
+        return activeFilters.length > 0 ? activeFilters : void 0;
       }
-    }
-  }, [handlePageSizeChangeBase, name, effectiveStateHandler, stateManager, initialPageSize, 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);
-    // Broadcast so other tabs with same name (e.g. first/active tab) also get the script's value
-    if (effectiveStorageKey !== name) {
-      (0, _scriptPageSizeBroadcast.broadcastScriptPageSize)(name, effectiveStorageKey, clamped);
-    }
-  }, [allowpagesizechange, pagesizeoptions, handlePageSizeChange, effectiveStorageKey, name]);
-
-  // Subscribe to script page size broadcast - when script calls selectPageSize on another tab,
-  // we receive the value and update (fixes first tab showing 20 when script targeted last tab)
-  (0, _react.useEffect)(function () {
-    if (effectiveStorageKey === name) return;
-    return (0, _scriptPageSizeBroadcast.subscribeToScriptPageSizeBroadcast)(name, effectiveStorageKey, function (value) {
-      // Receiving tab must set pageSize so remount uses correct initialPageSize
-      handlePageSizeChange(value);
+      return void 0;
+    }, [filtermode, globalFilter, globalSearchColumn, columnFilters, columnsForTable]);
+    const sortDataForState = useMemo(() => {
+      if (sorting.length > 0) {
+        const firstSort = sorting[0];
+        return {
+          field: firstSort.id,
+          direction: firstSort.desc ? "desc" : "asc"
+        };
+      }
+      return void 0;
+    }, [sorting]);
+    const stateManager = useTableStateManager({
+      name,
+      storage: effectiveStateHandler,
+      currentPage: table.getState().pagination.pageIndex + 1,
+      currentPageSize: table.getState().pagination.pageSize,
+      selectedRowIds,
+      internalDataset,
+      initialActualPageSize,
+      datasource,
+      multiselect: effectiveMultiselect,
+      filterData: filterDataForState,
+      sortData: sortDataForState,
+      navigation,
+      isStateConfigured: effectiveStateHandler !== void 0 && effectiveStateHandler !== "none",
+      defaultPageSize: initialPageSize,
+      initialSortState,
+      initialFilterState: initialSearchState
     });
-  }, [name, effectiveStorageKey, handlePageSizeChange]);
-
-  // Call data render callbacks for dynamic tables or when data changes
-  (0, _react.useEffect)(function () {
-    // For dynamic tables, call callbacks when we have data
-    // For static tables, call callbacks when we have both data and columns
-    var shouldCallCallbacks = isDynamicTable ? internalDataset.length > 0 : internalDataset.length > 0 && wmTableColumns.length > 0;
-    if (shouldCallCallbacks) {
-      var currentPageIndex = table.getState().pagination.pageIndex;
-
-      // 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) {
-          var _listener$Widgets4;
-          onBeforedatarender(listener === null || listener === void 0 || (_listener$Widgets4 = listener.Widgets) === null || _listener$Widgets4 === void 0 ? void 0 : _listener$Widgets4[name],
-          // widget reference
-          internalDataset,
-          // data
-          columnsProxy // columns (including dynamic ones)
+    const handlePageSizeChange = useCallback(
+      (newPageSize) => {
+        const oldPageSize = paginationState.pageSize;
+        handlePageSizeChangeBase(newPageSize);
+        if (navigation !== "Scroll") {
+          const currentPersistedState = getTableState(name, effectiveStateHandler);
+          const newState = stateManager.getStateForPageSizeChange(
+            newPageSize,
+            currentPersistedState == null ? void 0 : currentPersistedState.selectedItem,
+            oldPageSize
+            // Pass the old page size
           );
-          var customExprKeys = Object.keys(columnsProxy).filter(function (key) {
-            return columnsProxy[key].customExpression;
-          });
-          if (customExprKeys.length > 0) {
-            void mergeParsedCustomColumns()["finally"](function () {});
+          clearTableState(name, effectiveStateHandler);
+          if (Object.keys(newState).length > 0) {
+            if (newPageSize === initialPageSize) {
+              delete newState.pagesize;
+            }
+            if (Object.keys(newState).length > 0) {
+              saveTableState(name, effectiveStateHandler, newState);
+            }
           }
-          var nextRows = internalDataset.map(function (r) {
-            return (0, _typeof2["default"])(r) === "object" && r !== null ? _objectSpread({}, r) : r;
-          });
-          setInternalDataset(nextRows);
         }
-
-        // Schedule onDatarender callback after rendering is complete
-        // Use requestAnimationFrame to ensure DOM is fully painted
-        requestAnimationFrame(function () {
-          if (onDatarender) {
-            var _listener$Widgets5;
-            if (name && listener !== null && listener !== void 0 && listener.Widgets[name] && tableContainerRef.current) {
-              listener.Widgets[name].nativeElement = tableContainerRef.current;
+      },
+      [
+        handlePageSizeChangeBase,
+        name,
+        effectiveStateHandler,
+        stateManager,
+        initialPageSize,
+        navigation
+      ]
+    );
+    const selectPageSize = useCallback(
+      (pagesize2) => {
+        if (!allowpagesizechange && !pagesize2) return;
+        const pageSizeOptions = (pagesizeoptions || "5,10,20,50,100").split(",").map((v) => Number(v.trim())).filter((n) => !Number.isNaN(n)).sort((a, b) => a - b);
+        if (pageSizeOptions.length === 0) return;
+        const nv = Number(pagesize2);
+        const clamped = nv < pageSizeOptions[0] || nv > pageSizeOptions[pageSizeOptions.length - 1] || !pageSizeOptions.includes(nv) ? pageSizeOptions[0] : nv;
+        handlePageSizeChange(clamped);
+        if (effectiveStorageKey !== name) {
+          broadcastScriptPageSize(name, effectiveStorageKey, clamped);
+        }
+      },
+      [allowpagesizechange, pagesizeoptions, handlePageSizeChange, effectiveStorageKey, name]
+    );
+    useEffect(() => {
+      if (effectiveStorageKey === name) return;
+      return subscribeToScriptPageSizeBroadcast(name, effectiveStorageKey, (value) => {
+        handlePageSizeChange(value);
+      });
+    }, [name, effectiveStorageKey, handlePageSizeChange]);
+    useEffect(() => {
+      var _a2;
+      const shouldCallCallbacks = isDynamicTable ? internalDataset.length > 0 : internalDataset.length > 0 && wmTableColumns.length > 0;
+      if (shouldCallCallbacks) {
+        const currentPageIndex = table.getState().pagination.pageIndex;
+        prevPageIndexRef.current = currentPageIndex;
+        if (!isEqual(prevDatasetRef.current, internalDataset)) {
+          prevDatasetRef.current = internalDataset;
+          if (onBeforedatarender) {
+            onBeforedatarender(
+              (_a2 = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a2[name],
+              // widget reference
+              internalDataset,
+              // data
+              columnsProxy
+              // columns (including dynamic ones)
+            );
+            const customExprKeys = Object.keys(columnsProxy).filter(
+              (key) => columnsProxy[key].customExpression
+            );
+            if (customExprKeys.length > 0) {
+              void mergeParsedCustomColumns().finally(() => {
+              });
             }
-            onDatarender(listener === null || listener === void 0 || (_listener$Widgets5 = listener.Widgets) === null || _listener$Widgets5 === void 0 ? void 0 : _listener$Widgets5[name],
-            // widget reference to match Angular format
-            {
-              $data: internalDataset,
-              data: internalDataset
-            } // match Angular's format with both $data and data
+            const nextRows = internalDataset.map(
+              (r) => typeof r === "object" && r !== null ? __spreadValues({}, r) : r
             );
+            setInternalDataset(nextRows);
           }
-        });
+          requestAnimationFrame(() => {
+            var _a3;
+            if (onDatarender) {
+              if (name && (listener == null ? void 0 : listener.Widgets[name]) && tableContainerRef.current) {
+                listener.Widgets[name].nativeElement = tableContainerRef.current;
+              }
+              onDatarender(
+                (_a3 = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a3[name],
+                // widget reference to match Angular format
+                { $data: internalDataset, data: internalDataset }
+                // match Angular's format with both $data and data
+              );
+            }
+          });
+        }
       }
-    }
-  }, [internalDataset, wmTableColumns, onBeforedatarender, onDatarender, name, isDynamicTable, table.getState().pagination.pageIndex, setInternalDataset, columnsProxy, mergeParsedCustomColumns]);
-
-  // Re-parse when custom-expression markup signature changes, or when rows appear after empty dataset.
-  (0, _react.useEffect)(function () {
-    if (!onBeforedatarender) return;
-    if (internalDataset.length === 0) return;
-    void mergeParsedCustomColumns();
-  }, [customExpressionSignature, mergeParsedCustomColumns, onBeforedatarender, internalDataset.length]);
-  // Use table initialization hook
-  (0, _hooks.useTableInitialization)({
-    internalDataset: internalDataset,
-    wmTableColumns: wmTableColumnsWithOverrides,
-    cellState: cellState,
-    gridfirstrowselect: gridfirstrowselect,
-    useRadioSelect: useRadioSelect,
-    useMultiSelect: useMultiSelect,
-    setActiveRow: setActiveRow,
-    selectedRowIds: selectedRowIds,
-    formName: formName,
-    editmode: editmode,
-    activeRowIds: activeRowIds,
-    listener: listener
-  });
-
-  // Use table effects hook for state persistence
-  var _useTableEffects = (0, _hooks.useTableEffects)({
-      name: name,
-      navigation: navigation,
-      datasource: datasource,
-      internalDataset: internalDataset,
+    }, [
+      internalDataset,
+      wmTableColumns,
+      onBeforedatarender,
+      onDatarender,
+      name,
+      isDynamicTable,
+      table.getState().pagination.pageIndex,
+      setInternalDataset,
+      columnsProxy,
+      mergeParsedCustomColumns
+    ]);
+    useEffect(() => {
+      if (!onBeforedatarender) return;
+      if (internalDataset.length === 0) return;
+      void mergeParsedCustomColumns();
+    }, [
+      customExpressionSignature,
+      mergeParsedCustomColumns,
+      onBeforedatarender,
+      internalDataset.length
+    ]);
+    useTableInitialization({
+      internalDataset,
+      wmTableColumns: wmTableColumnsWithOverrides,
+      cellState,
+      gridfirstrowselect,
+      useRadioSelect,
+      useMultiSelect,
+      setActiveRow,
+      selectedRowIds,
+      formName,
+      editmode,
+      activeRowIds,
+      listener
+    });
+    const { restoredPageNumber, restoredSelectedIndices, setIsRestoringSelection } = useTableEffects({
+      name,
+      navigation,
+      datasource,
+      internalDataset,
       statehandler: effectiveStateHandler,
-      selectedRowIds: selectedRowIds,
+      selectedRowIds,
       currentPage: table.getState().pagination.pageIndex + 1,
       // Convert to 1-based
       currentPageSize: table.getState().pagination.pageSize,
-      sorting: sorting,
+      sorting,
       isGridEditMode: isGridEditModeComplete,
-      stateManager: stateManager,
-      initialActualPageSize: initialActualPageSize
-    }),
-    restoredPageNumber = _useTableEffects.restoredPageNumber,
-    restoredSelectedIndices = _useTableEffects.restoredSelectedIndices,
-    setIsRestoringSelection = _useTableEffects.setIsRestoringSelection;
-
-  // Apply restored state
-  (0, _react.useEffect)(function () {
-    if (restoredPageNumber !== null && restoredPageNumber > 1) {
-      // Set the restored page (convert to 0-based index)
-      table.setPageIndex(restoredPageNumber - 1);
-    }
-  }, [restoredPageNumber, table]);
-
-  // Track if we've already restored selection to avoid loops
-  var hasRestoredSelectionRef = (0, _react.useRef)(false);
-  (0, _react.useEffect)(function () {
-    if (restoredSelectedIndices.length > 0 && internalDataset.length > 0 && !hasRestoredSelectionRef.current) {
-      // Mark as restored to prevent running again
-      hasRestoredSelectionRef.current = true;
-
-      // Set flag to prevent saving while restoring
-      setIsRestoringSelection(true);
-
-      // Apply restored selections by converting indices to row IDs
-      if (useMultiSelect) {
-        // For multiselect, set all restored items by index
-        var _selectedRowIds = [];
-        restoredSelectedIndices.forEach(function (index) {
-          if (index >= 0 && index < internalDataset.length) {
-            var row = internalDataset[index];
-            if (row && row._wmTableRowId) {
-              handleMultiSelection(row._wmTableRowId, row, true);
-              // Collect all selected row IDs
-              _selectedRowIds.push(row._wmTableRowId);
+      stateManager,
+      initialActualPageSize
+    });
+    useEffect(() => {
+      if (restoredPageNumber !== null && restoredPageNumber > 1) {
+        table.setPageIndex(restoredPageNumber - 1);
+      }
+    }, [restoredPageNumber, table]);
+    const hasRestoredSelectionRef = useRef(false);
+    useEffect(() => {
+      if (restoredSelectedIndices.length > 0 && internalDataset.length > 0 && !hasRestoredSelectionRef.current) {
+        hasRestoredSelectionRef.current = true;
+        setIsRestoringSelection(true);
+        if (useMultiSelect) {
+          const selectedRowIds2 = [];
+          restoredSelectedIndices.forEach((index) => {
+            if (index >= 0 && index < internalDataset.length) {
+              const row = internalDataset[index];
+              if (row && row._wmTableRowId) {
+                handleMultiSelection(row._wmTableRowId, row, true);
+                selectedRowIds2.push(row._wmTableRowId);
+              }
             }
+          });
+          if (selectedRowIds2.length > 0) {
+            setActiveRow(selectedRowIds2);
           }
-        });
-        // Set all selected rows as active
-        if (_selectedRowIds.length > 0) {
-          setActiveRow(_selectedRowIds);
-        }
-      } else {
-        // For radio select or default mode (single selection), only restore the first selection
-        var firstIndex = restoredSelectedIndices[0];
-        if (firstIndex >= 0 && firstIndex < internalDataset.length) {
-          var row = internalDataset[firstIndex];
-          if (row && row._wmTableRowId) {
-            handleRadioSelection(row._wmTableRowId, row);
-            // Also set as active row for single selection
-            setActiveRow(row._wmTableRowId);
+        } else {
+          const firstIndex = restoredSelectedIndices[0];
+          if (firstIndex >= 0 && firstIndex < internalDataset.length) {
+            const row = internalDataset[firstIndex];
+            if (row && row._wmTableRowId) {
+              handleRadioSelection(row._wmTableRowId, row);
+              setActiveRow(row._wmTableRowId);
+            }
           }
         }
+        setTimeout(() => {
+          setIsRestoringSelection(false);
+        }, 0);
       }
-
-      // Reset flag after restoration is complete
-      setTimeout(function () {
-        setIsRestoringSelection(false);
-      }, 0);
-    }
-  }, [restoredSelectedIndices, internalDataset, useMultiSelect, handleMultiSelection, handleRadioSelection, setIsRestoringSelection]);
-
-  // Cleanup resize timeout on unmount and when component updates
-  (0, _react.useEffect)(function () {
-    var currentTimeout = resizeTimeoutRef.current;
-    return function () {
-      if (currentTimeout) {
-        clearTimeout(currentTimeout);
-      }
-    };
-  }, []);
-
-  // Create wrapper functions for external API
-  var editRow = (0, _react.useCallback)(function (event, widget, row) {
-    if (!row || !row._wmTableRowId) {
-      console.warn("Invalid row data provided to editRow");
-      return;
-    }
-    startEditing(row, row._wmTableRowId);
-  }, [startEditing]);
-  var deleteRow = (0, _react.useCallback)(/*#__PURE__*/function () {
-    var _ref5 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(event, widget, row) {
-      var _listener$Widgets6, 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$Widgets6 = listener.Widgets) === null || _listener$Widgets6 === void 0 ? void 0 : _listener$Widgets6[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();
+    }, [
+      restoredSelectedIndices,
+      internalDataset,
+      useMultiSelect,
+      handleMultiSelection,
+      handleRadioSelection,
+      setIsRestoringSelection
+    ]);
+    useEffect(() => {
+      const currentTimeout = resizeTimeoutRef.current;
+      return () => {
+        if (currentTimeout) {
+          clearTimeout(currentTimeout);
         }
-      }, _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 _callee2() {
-    var newData,
-      _datasource$paginatio3,
-      currentTable,
-      targetPage,
-      currentPageSize,
-      shouldNavigateToLastPage,
-      totalElements,
-      totalAfterAdd,
-      lastPage,
-      response,
-      dataWithIds,
-      _listener$Widgets7,
-      _args2 = arguments;
-    return _regenerator["default"].wrap(function _callee2$(_context2) {
-      while (1) switch (_context2.prev = _context2.next) {
-        case 0:
-          newData = _args2.length > 0 && _args2[0] !== undefined ? _args2[0] : false;
-          if (datasource) {
-            _context2.next = 4;
-            break;
+      };
+    }, []);
+    const editRow = useCallback(
+      (event, widget, row) => {
+        if (!row || !row._wmTableRowId) {
+          console.warn("Invalid row data provided to editRow");
+          return;
+        }
+        startEditing(row, row._wmTableRowId);
+      },
+      [startEditing]
+    );
+    const deleteRow = useCallback(
+      async (event, widget, row) => {
+        var _a2;
+        if (!row) {
+          console.warn("Invalid row data provided to deleteRow");
+          return;
+        }
+        if (onBeforerowdelete) {
+          const cleanedRow = cleanRowData([row])[0];
+          const rowIndex = internalDataset.findIndex(
+            (r) => r._wmTableRowId === row._wmTableRowId || r.id !== void 0 && r.id === row.id
+          );
+          const result = await onBeforerowdelete(event, (_a2 = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a2[name], cleanedRow, {
+            rowIndex,
+            data: cleanedRow
+          });
+          if (result === false) {
+            return;
           }
+        }
+        deleteRecord(row, tableRef.current);
+      },
+      [deleteRecord, onBeforerowdelete, listener, name, internalDataset]
+    );
+    const refresh = useCallback(
+      async (newData = false) => {
+        var _a2, _b2;
+        if (!datasource) {
           console.warn("No datasource available for refresh");
-          return _context2.abrupt("return");
-        case 4:
-          _context2.prev = 4;
-          // Use tableRef.current to access the latest table instance
-          currentTable = tableRef.current;
-          if (currentTable) {
-            _context2.next = 9;
-            break;
+          return;
+        }
+        try {
+          const currentTable = tableRef.current;
+          if (!currentTable) {
+            console.warn("Table instance not available");
+            return;
           }
-          console.warn("Table instance not available");
-          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;
-          shouldNavigateToLastPage = false; // If newData is true and we have pagination metadata, calculate the last page
+          let targetPage = currentTable.getState().pagination.pageIndex + 1;
+          const currentPageSize = ((_a2 = datasource.pagination) == null ? void 0 : _a2.size) || currentTable.getState().pagination.pageSize;
+          let shouldNavigateToLastPage = false;
           if (newData && datasource.pagination) {
-            totalElements = datasource.pagination.totalElements;
-            if (totalElements !== undefined && currentPageSize > 0) {
-              // Calculate the last page
-              // For example: 15 elements with page size 5 = 3 pages
-              // Adding 1 element makes it 16 elements = 4 pages (since page 3 is full)
-              totalAfterAdd = totalElements + 1;
-              lastPage = Math.ceil(totalAfterAdd / currentPageSize);
+            const { totalElements } = datasource.pagination;
+            if (totalElements !== void 0 && currentPageSize > 0) {
+              const totalAfterAdd = totalElements + 1;
+              const lastPage = Math.ceil(totalAfterAdd / currentPageSize);
               targetPage = lastPage;
               shouldNavigateToLastPage = true;
             }
           }
-
-          // For server-side pagination, use datasource invoke
-          if (!isServerSidePagination()) {
-            _context2.next = 20;
-            break;
-          }
-          _context2.next = 16;
-          return (0, _crudHandlers.refreshDataSource)(datasource, {
-            page: targetPage,
-            pagesize: currentPageSize,
-            filterFields: memoizedFilterFields || {},
-            condition: memoizedLogicalOp
-          });
-        case 16:
-          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) {
-            dataWithIds = (0, _utils.addUniqueRowIds)(response.data);
-            setInternalDataset(dataWithIds);
-
-            // Set the table to the last page AFTER data is loaded
+          if (isServerSidePagination()) {
+            const response = await refreshDataSource(datasource, {
+              page: targetPage,
+              pagesize: currentPageSize,
+              filterFields: memoizedFilterFields || {},
+              condition: memoizedLogicalOp
+            });
+            if (response && response.data) {
+              const dataWithIds = addUniqueRowIds(response.data);
+              setInternalDataset(dataWithIds);
+              if (shouldNavigateToLastPage) {
+                requestAnimationFrame(() => {
+                  currentTable.setPageIndex(targetPage);
+                });
+              }
+            }
+          } else {
             if (shouldNavigateToLastPage) {
-              // Use requestAnimationFrame for better performance than setTimeout
-              requestAnimationFrame(function () {
-                currentTable.setPageIndex(targetPage);
-              });
+              currentTable.setPageIndex(targetPage);
             }
           }
-          _context2.next = 21;
-          break;
-        case 20:
-          // For client-side pagination, just set the page index
-          if (shouldNavigateToLastPage) {
-            currentTable.setPageIndex(targetPage);
-          }
-        case 21:
-          _context2.next = 28;
-          break;
-        case 23:
-          _context2.prev = 23;
-          _context2.t0 = _context2["catch"](4);
-          console.error("Error refreshing table data:", _context2.t0);
+        } catch (error) {
+          console.error("Error refreshing table data:", error);
           if (showToast) {
             showToast("Failed to refresh table data", "Error");
           }
           if (onError) {
-            onError(null, listener === null || listener === void 0 || (_listener$Widgets7 = listener.Widgets) === null || _listener$Widgets7 === void 0 ? void 0 : _listener$Widgets7[name], _context2.t0, "refresh");
+            onError(null, (_b2 = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _b2[name], error, "refresh");
           }
-        case 28:
-        case "end":
-          return _context2.stop();
+        }
+      },
+      [datasource, isServerSidePagination(), setInternalDataset, showToast, onError, name]
+    );
+    const tableApis = {
+      columns: columnsProxy,
+      addNewRow: handleAddNewRowClick,
+      editRow,
+      deleteRow,
+      refresh,
+      datasource,
+      dataset,
+      selectPageSize,
+      rowDefInstances
+    };
+    syncSelectedItemsImplRef.current = (newSelectedIds) => {
+      if (!(listener == null ? void 0 : listener.onChange)) return;
+      const getRowId = (row) => row._wmTableRowId || String(row.id);
+      const selectedRows = internalDataset.filter(
+        (row) => newSelectedIds.includes(getRowId(row))
+      );
+      const selectedItems = cleanRowData(selectedRows);
+      if (!isEqual(prevSelectedRow.current, selectedItems)) {
+        prevSelectedRow.current = selectedItems;
+        if (tableApisRegistered.current) {
+          listener.onChange(widgetRegistrationKey, { selectedItems });
+        } else {
+          tableApisRegistered.current = true;
+          listener.onChange(widgetRegistrationKey, __spreadProps(__spreadValues({}, tableApis), { selectedItems }));
+        }
       }
-    }, _callee2, null, [[4, 23]]);
-  })), [datasource, isServerSidePagination(), setInternalDataset, showToast, onError, 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,
-    rowDefInstances: rowDefInstances
-  };
-
-  // Keep the sync-selected-items implementation up-to-date every render so that
-  // the stable onSyncSelectedItems callback (passed to useRowSelection) always has
-  // access to the latest tableApis / internalDataset / listener values.
-  syncSelectedItemsImplRef.current = function (newSelectedIds) {
-    if (!(listener !== null && listener !== void 0 && listener.onChange)) return;
-    var getRowId = function getRowId(row) {
-      return row._wmTableRowId || String(row.id);
     };
-    var selectedRows = internalDataset.filter(function (row) {
-      return newSelectedIds.includes(getRowId(row));
-    });
-    var selectedItems = (0, _utils.cleanRowData)(selectedRows);
-    if (!(0, _lodashEs.isEqual)(prevSelectedRow.current, selectedItems)) {
-      prevSelectedRow.current = selectedItems;
-      if (tableApisRegistered.current) {
-        listener.onChange(widgetRegistrationKey, {
-          selectedItems: selectedItems
-        });
-      } else {
-        tableApisRegistered.current = true;
-        listener.onChange(widgetRegistrationKey, _objectSpread(_objectSpread({}, tableApis), {}, {
-          selectedItems: selectedItems
-        }));
+    useEffect(() => {
+      var _a2, _b2, _c2;
+      if (parentForm && name && ((_a2 = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a2[parentForm])) {
+        const columns2 = (_c2 = (_b2 = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _b2[name]) == null ? void 0 : _c2.columns;
+        const defaultValues = Object.entries(columns2 || {}).reduce(
+          (acc, [key, value]) => {
+            if ((value == null ? void 0 : value.defaultValue) !== void 0) {
+              acc[key] = value;
+            }
+            return acc;
+          },
+          {}
+        );
+        const valuesToPass = Object.keys(defaultValues).length === 0 ? [] : defaultValues;
+        if (parentFormColumns) {
+          listener == null ? void 0 : listener.onChange(parentForm, {
+            dataoutput: __spreadProps(__spreadValues({}, parentFormColumns), {
+              [name]: valuesToPass
+            })
+          });
+        }
       }
-    }
-  };
-
-  // Register table with parent form's formWidgets when parentForm is present
-  (0, _react.useEffect)(function () {
-    var _listener$Widgets8;
-    if (parentForm && name && listener !== null && listener !== void 0 && (_listener$Widgets8 = listener.Widgets) !== null && _listener$Widgets8 !== void 0 && _listener$Widgets8[parentForm]) {
-      var _listener$Widgets9;
-      var _columns = listener === null || listener === void 0 || (_listener$Widgets9 = listener.Widgets) === null || _listener$Widgets9 === void 0 || (_listener$Widgets9 = _listener$Widgets9[name]) === null || _listener$Widgets9 === void 0 ? void 0 : _listener$Widgets9.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;
+    }, [parentForm, parentFormColumns]);
+    const updateSelectedItem = () => {
+      if (!(listener == null ? void 0 : listener.onChange)) return;
+      const getRowId = (row) => row._wmTableRowId || String(row.id);
+      let selectedRows = [];
+      if ((useRadioSelect || useMultiSelect) && selectedRowIds.length > 0) {
+        selectedRows = internalDataset.filter((row) => selectedRowIds.includes(getRowId(row)));
+      } else if (activeRowIds.length > 0) {
+        selectedRows = internalDataset.filter(
+          (row) => activeRowIds.includes(getRowId(row))
+        );
+      }
+      const cleanedRows = cleanRowData(selectedRows);
+      const selectedItems = cleanedRows.length > 0 ? cleanedRows : [];
+      if (!isEqual(prevSelectedRow.current, selectedItems)) {
+        prevSelectedRow.current = selectedItems;
+        if (tableApisRegistered.current) {
+          listener.onChange(widgetRegistrationKey, { selectedItems });
+          return;
         }
-        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))
-        });
+        tableApisRegistered.current = true;
+        listener.onChange(widgetRegistrationKey, __spreadProps(__spreadValues({}, tableApis), { selectedItems }));
       }
-    }
-  }, [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 selectedItems as an array (empty array if nothing selected)
-    var selectedItems = cleanedRows.length > 0 ? cleanedRows : [];
-
-    // Update only if changed
-    if (!(0, _lodashEs.isEqual)(prevSelectedRow.current, selectedItems)) {
-      prevSelectedRow.current = selectedItems;
-      if (tableApisRegistered.current) {
-        listener.onChange(widgetRegistrationKey, {
-          selectedItems: selectedItems
-        });
-        return;
-      }
-      tableApisRegistered.current = true;
-      listener.onChange(widgetRegistrationKey, _objectSpread(_objectSpread({}, tableApis), {}, {
-        selectedItems: selectedItems
-      }));
-    }
-  };
-
-  // 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]);
-
-  // `table` reference is stable; header groups can change as state changes (pagination/columns/etc).
-  // So include state-based deps to avoid stale/empty colgroup.
-  var colGroupSpec = (0, _react.useMemo)(function () {
-    var headerGroups = table.getHeaderGroups();
-    var leafHeaderGroup = headerGroups.length ? headerGroups[headerGroups.length - 1] : undefined;
-    var leafHeaders = ((leafHeaderGroup === null || leafHeaderGroup === void 0 ? void 0 : leafHeaderGroup.headers) || []).filter(function (h) {
-      return !h.isPlaceholder;
-    });
-
-    // Build base spec from TanStack columns
-    var base = leafHeaders.map(function (h) {
-      return {
+    useEffect(() => {
+      updateSelectedItem();
+    }, [activeRowIds, selectedRowIds, useRadioSelect, useMultiSelect, internalDataset, name]);
+    const isTableLoading = useMemo(() => {
+      return loading && navigation !== "On-Demand" && internalDataset.length === 0;
+    }, [loading, navigation, internalDataset.length]);
+    const colGroupSpec = useMemo(() => {
+      const headerGroups = table.getHeaderGroups();
+      const leafHeaderGroup = headerGroups.length ? headerGroups[headerGroups.length - 1] : void 0;
+      const leafHeaders = ((leafHeaderGroup == null ? void 0 : leafHeaderGroup.headers) || []).filter((h) => !h.isPlaceholder);
+      const base = leafHeaders.map((h) => ({
         key: h.column.id,
-        width: "".concat(h.column.getSize(), "px")
-      };
-    });
-    return base;
-  }, [table, columnSizing, columnsVersion, showheader, ColClassSignature]);
-  return __jsx(_material.Box, {
-    ref: tableContainerRef,
-    hidden: props.hidden,
-    className: "app-grid app-panel panel app-datagrid ".concat(className).trim(),
-    name: name,
-    editmode: editmode,
-    navigation: navigation,
-    title: title,
-    currentpage: table.getState().pagination.pageIndex + 1
-  }, renderConfirmDialog(), showPanelHeading && __jsx(_components.TablePanelHeading, {
-    title: title,
-    subheading: subheading,
-    iconclass: iconclass,
-    exportformat: exportformat,
-    headerActions: headerActions,
-    spacing: spacing,
-    isGridEditMode: isGridEditModeComplete,
-    isLoading: datasource === null || datasource === void 0 ? void 0 : datasource.loading,
-    listener: listener,
-    datasource: datasource,
-    columns: wmTableColumnsWithOverrides,
-    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,
-    name: name,
-    listener: listener
-  }), __jsx(_material.Box, {
-    className: "table-container table-responsive"
-  }, __jsx(_material.Box, {
-    className: "app-grid-header"
-  }, __jsx(_material.Box, {
-    className: "app-grid-header-inner",
-    style: _objectSpread({
-      height: "100%",
-      overflow: "auto",
-      position: "relative"
-    }, styles)
-  }, 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: _objectSpread({
-      width: props.width || "100%"
-    }, tableStructure && (0, _groupHeaderUtils.hasTableGroups)(tableStructure) ? {
-      tableLayout: "fixed",
-      minWidth: table.getTotalSize()
-    } : {}),
-    name: name
-  }, showheader && wmTableColumns.length > 0 && __jsx(_react["default"].Fragment, null, __jsx(_components.TableHeaderComponent, {
-    table: table,
-    enablesort: enablesort,
-    enablecolumnselection: enablecolumnselection,
-    rowClass: rowClass,
-    ColClassSignature: ColClassSignature,
-    sorting: sorting,
-    columnSizing: columnSizing,
-    rowSelection: rowSelection,
-    rowExpansionConfig: rowExpansionConfig,
-    columnsVersion: columnsVersion,
-    filterMode: filtermode,
-    columnFilters: columnFilters,
-    onColumnFilterChange: setColumnFilter,
-    renderFormWidget: renderFormWidget,
-    listener: listener,
-    tableStructure: tableStructure,
-    onColumnSelect: handleColumnSelect,
-    onColumnDeselect: handleColumnDeselect,
-    onHeaderclick: onHeaderclick,
-    tableName: name
-  }), __jsx("colgroup", null, colGroupSpec.map(function (c) {
-    return __jsx("col", {
-      key: c.key,
-      style: {
-        width: c.width
-      },
-      width: c.width
-    });
-  }))), internalDataset.length > 0 && __jsx(_components.TableBodyComponent, {
-    table: table,
-    columns: columns,
-    rowClass: rowClass,
-    formposition: formposition,
-    renderAddNewRow: renderAddNewRow,
-    onRowClick: handleRowClick,
-    isRowActive: isRowActive,
-    isRowSelected: isRowSelected,
-    nodatamessage: nodatamessage,
-    loadingdatamsg: loadingdatamsg,
-    isLoading: datasource === null || datasource === void 0 ? void 0 : datasource.loading,
-    rowExpansionConfig: rowExpansionConfig,
-    expandedRows: expandedRows,
-    toggleRowExpansion: handleToggleRowExpansion,
-    isRowExpanded: isRowExpanded,
-    rowsVersion: tableData.length,
-    ColClassSignature: ColClassSignature,
-    tableData: tableData,
-    editingRowId: editingRowId,
-    activeRowIds: activeRowIds,
-    selectedRowIds: selectedRowIds,
-    isAddingNewRow: isAddingNewRow,
-    customExpressionColumns: customColumns,
-    customColumnsRevision: customColumnsRevision,
-    columnsVersion: columnsVersion
-  }), summaryRowEnabled && summaryRowDefs.length > 0 && __jsx(_components.SummaryRowFooter, {
-    summaryRowDefs: summaryRowDefs,
-    summaryRowDefObjects: summaryRowDefObjects,
-    columns: wmTableColumnsWithOverrides,
-    tableName: name,
-    summaryRowColumnShow: summaryRowColumnShow
-  })))))), __jsx(_material.Box, {
-    className: "panel-footer clearfix"
-  }, showPagination && __jsx(_material.Box, {
-    className: "app-datagrid-paginator"
-  }, __jsx(_pagination["default"], {
-    name: name,
-    dataset: filtermode ? filteredData : internalDataset,
-    maxResults: (_table$getState$pagin = table.getState().pagination.pageSize) !== null && _table$getState$pagin !== void 0 ? _table$getState$pagin : initialPageSize,
-    currentPage: table.getState().pagination.pageIndex + 1,
-    navigation: navigation,
-    navigationalign: navigationalign,
-    showrecordcount: showrecordcount,
-    maxsize: maxsize,
-    boundarylinks: boundarylinks,
-    directionlinks: true,
-    allowpagesizechange: allowpagesizechange,
-    pagesizeoptions: pagesizeoptions,
-    listener: listener,
-    onPaginationChange: handlePaginationChange,
-    onSetRecord: onSetrecord,
-    onPageSizeChange: handlePageSizeChange,
-    onDataUpdate: handleAccumulatedDataUpdate,
-    onPaginationWidgetReady: handlePaginationWidgetReady
-    // Pass pagination metadata from datasource if available
-    ,
-    paginationMeta: datasource === null || datasource === void 0 ? void 0 : datasource.pagination,
-    totalItems: datasource === null || datasource === void 0 || (_datasource$paginatio4 = datasource.pagination) === null || _datasource$paginatio4 === void 0 ? void 0 : _datasource$paginatio4.totalElements
-    // Pass datasource for API-based pagination
-    ,
-    datasource: datasource
-    // Pass server-side pagination flag
-    ,
-    isServerSidePagination: isServerSidePagination()
-    // Pass additional invoke options for server-side operations
-    ,
-    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,
-    isGridEditMode: isGridEditModeComplete,
-    isLoading: datasource === null || datasource === void 0 ? void 0 : datasource.loading,
-    listener: listener
-  })));
-}, 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", "showrecordcount", "shownavigation", "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) {
-    return prev[key] === current[key];
-  });
-  if (!simplePropsEqual) return false;
-
-  // Check if children structure has changed (column/action definitions)
-  var prevChildrenCount = _react["default"].Children.count(prev.children);
-  var currentChildrenCount = _react["default"].Children.count(current.children);
-  if (prevChildrenCount !== currentChildrenCount) return false;
-
-  // If all checks pass, consider components equal (skip re-render)
-  return true;
-});
+        width: `${h.column.getSize()}px`
+      }));
+      return base;
+    }, [table, columnSizing, columnsVersion, showheader, ColClassSignature]);
+    return /* @__PURE__ */ jsxs(
+      Box,
+      __spreadProps(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({
+        ref: tableContainerRef,
+        hidden: props.hidden,
+        className: `app-grid app-panel panel app-datagrid ${className}`.trim()
+      }, { name }), { editmode }), { navigation }), { title }), {
+        currentpage: table.getState().pagination.pageIndex + 1
+      }), {
+        children: [
+          renderConfirmDialog(),
+          showPanelHeading && /* @__PURE__ */ jsx(
+            TablePanelHeading,
+            {
+              title,
+              subheading,
+              iconclass,
+              exportformat,
+              headerActions,
+              spacing,
+              isGridEditMode: isGridEditModeComplete,
+              isLoading: datasource == null ? void 0 : datasource.loading,
+              listener,
+              datasource,
+              columns: wmTableColumnsWithOverrides,
+              sortInfo: sortInfoForExport,
+              filterInfo: filterDataForState,
+              exportdatasize,
+              onBeforeExport: onBeforeexport
+            }
+          ),
+          /* @__PURE__ */ jsxs(Box, { className: "app-datagrid", onKeyDown: (e) => handleTableEditKeyDown(e), children: [
+            filtermode === "search" && /* @__PURE__ */ jsx(
+              GlobalSearchFilter,
+              {
+                filteronkeypress,
+                value: globalFilter,
+                onChange: setGlobalFilter,
+                selectedColumn: globalSearchColumn,
+                onColumnChange: setGlobalSearchColumn,
+                columns: columnsForTable,
+                searchLabel: searchlabel,
+                name,
+                listener
+              }
+            ),
+            /* @__PURE__ */ jsx(Box, { className: "table-container table-responsive", children: /* @__PURE__ */ jsx(Box, { className: "app-grid-header", children: /* @__PURE__ */ jsxs(
+              Box,
+              {
+                className: "app-grid-header-inner",
+                style: __spreadValues({ height: "100%", overflow: "auto", position: "relative" }, styles),
+                children: [
+                  isTableLoading && /* @__PURE__ */ jsx(LoadingComponent, { message: loadingdatamsg }),
+                  /* @__PURE__ */ jsxs(
+                    Table,
+                    __spreadProps(__spreadValues({
+                      className: `${TABLE_CSS_CLASSES.gridDefault} table-striped table-hover ${spacingClasses}`.trim(),
+                      sx: __spreadValues({
+                        width: props.width || "100%"
+                      }, tableStructure && hasTableGroups(tableStructure) ? {
+                        tableLayout: "fixed",
+                        minWidth: table.getTotalSize()
+                      } : {})
+                    }, { name }), {
+                      children: [
+                        showheader && wmTableColumns.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+                          /* @__PURE__ */ jsx(
+                            TableHeaderComponent,
+                            {
+                              table,
+                              enablesort,
+                              enablecolumnselection,
+                              rowClass,
+                              ColClassSignature,
+                              sorting,
+                              columnSizing,
+                              rowSelection,
+                              rowExpansionConfig,
+                              columnsVersion,
+                              filterMode: filtermode,
+                              columnFilters,
+                              onColumnFilterChange: setColumnFilter,
+                              renderFormWidget,
+                              listener,
+                              tableStructure,
+                              onColumnSelect: handleColumnSelect,
+                              onColumnDeselect: handleColumnDeselect,
+                              onHeaderclick,
+                              tableName: name
+                            }
+                          ),
+                          /* @__PURE__ */ jsx("colgroup", { children: colGroupSpec.map((c) => /* @__PURE__ */ jsx("col", { style: { width: c.width }, width: c.width }, c.key)) })
+                        ] }),
+                        internalDataset.length > 0 && /* @__PURE__ */ jsx(
+                          TableBodyComponent,
+                          {
+                            table,
+                            columns,
+                            rowClass,
+                            formposition,
+                            renderAddNewRow,
+                            onRowClick: handleRowClick,
+                            isRowActive,
+                            isRowSelected,
+                            nodatamessage,
+                            loadingdatamsg,
+                            isLoading: datasource == null ? void 0 : datasource.loading,
+                            rowExpansionConfig,
+                            expandedRows,
+                            toggleRowExpansion: handleToggleRowExpansion,
+                            isRowExpanded,
+                            rowsVersion: tableData.length,
+                            ColClassSignature,
+                            tableData,
+                            editingRowId,
+                            activeRowIds,
+                            selectedRowIds,
+                            isAddingNewRow,
+                            customExpressionColumns: customColumns,
+                            customColumnsRevision,
+                            columnsVersion
+                          }
+                        ),
+                        summaryRowEnabled && summaryRowDefs.length > 0 && /* @__PURE__ */ jsx(
+                          SummaryRowFooter,
+                          {
+                            summaryRowDefs,
+                            summaryRowDefObjects,
+                            columns: wmTableColumnsWithOverrides,
+                            tableName: name,
+                            summaryRowColumnShow
+                          }
+                        )
+                      ]
+                    }),
+                    `table-${isDynamicTable ? "dynamic" : "static"}-${wmTableColumns.length}-page-${table.getState().pagination.pageIndex}`
+                  )
+                ]
+              }
+            ) }) })
+          ] }),
+          /* @__PURE__ */ jsxs(Box, { className: "panel-footer clearfix", children: [
+            showPagination && /* @__PURE__ */ jsx(Box, { className: "app-datagrid-paginator", children: /* @__PURE__ */ jsx(
+              WmPagination,
+              {
+                name,
+                dataset: filtermode ? filteredData : internalDataset,
+                maxResults: (_h = table.getState().pagination.pageSize) != null ? _h : initialPageSize,
+                currentPage: table.getState().pagination.pageIndex + 1,
+                navigation,
+                navigationalign,
+                showrecordcount,
+                maxsize,
+                boundarylinks,
+                directionlinks: true,
+                allowpagesizechange,
+                pagesizeoptions,
+                listener,
+                onPaginationChange: handlePaginationChange,
+                onSetRecord: onSetrecord,
+                onPageSizeChange: handlePageSizeChange,
+                onDataUpdate: handleAccumulatedDataUpdate,
+                onPaginationWidgetReady: handlePaginationWidgetReady,
+                paginationMeta: datasource == null ? void 0 : datasource.pagination,
+                totalItems: (_i = datasource == null ? void 0 : datasource.pagination) == null ? void 0 : _i.totalElements,
+                datasource,
+                isServerSidePagination: isServerSidePagination(),
+                datasourceInvokeOptions: isServerSidePagination() ? {
+                  orderBy: sorting.length > 0 ? sorting.map((s) => `${s.id} ${s.desc ? "desc" : "asc"}`).join(", ") : void 0,
+                  filterFields: memoizedFilterFields,
+                  condition: memoizedLogicalOp
+                } : void 0,
+                ondemandmessage,
+                viewlessmessage,
+                showviewlessbutton
+              }
+            ) }),
+            /* @__PURE__ */ jsx(
+              TableFooterActions,
+              {
+                footerActions,
+                spacing,
+                isGridEditMode: isGridEditModeComplete,
+                isLoading: datasource == null ? void 0 : datasource.loading,
+                listener
+              }
+            )
+          ] })
+        ]
+      })
+    );
+  },
+  (prev, current) => {
+    const 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",
+      "showrecordcount",
+      "shownavigation",
+      "datasource",
+      "binddataset",
+      "onSuccess",
+      "onError",
+      "onRowinsert",
+      "onRowupdate",
+      "onRowdelete",
+      "onSort",
+      "onBeforerowdelete",
+      "onHeaderclick",
+      "onRowselect",
+      "onRowdeselect",
+      "statehandler",
+      "filtermode",
+      "children",
+      "listener",
+      "hidden"
+    ];
+    const simplePropsEqual = keys.every((key) => prev[key] === current[key]);
+    if (!simplePropsEqual) return false;
+    const prevChildrenCount = React.Children.count(prev.children);
+    const currentChildrenCount = React.Children.count(current.children);
+    if (prevChildrenCount !== currentChildrenCount) return false;
+    return true;
+  }
+);
 WmTableComponent.displayName = "WmTableComponent";
-
-// Wrapper component that provides EditedRowsContext to WmTableComponent
-var WmTableWithProvider = function WmTableWithProvider(props) {
-  return __jsx(_useEditedRows.EditedRowsProvider, null, __jsx(WmTableComponent, props));
+const WmTableWithProvider = (props) => {
+  return /* @__PURE__ */ jsx(EditedRowsProvider, { children: /* @__PURE__ */ jsx(WmTableComponent, __spreadValues({}, props)) });
 };
 WmTableWithProvider.displayName = "WmTable";
-var WmTableStandalone = exports.WmTable = (0, _withStandalone["default"])(WmTableWithProvider);
-// @ts-ignore
-var WmTable = (0, _withBaseWrapper["default"])(WmTableWithProvider);
+const WmTableStandalone = withStandalone(WmTableWithProvider);
+const WmTable = withBaseWrapper(WmTableWithProvider);
 WmTable.displayName = "WmTable";
-
-/**
- * The WmTable component is used to display data in a tabular format.
- *
- * - [Playground](https://react-components.wavemaker.ai/?path=/story/data-data-table--showcase)
- *
- * - [Docs](https://react-components.wavemaker.ai/?path=/story/data-data-table--docs)
- *
- * @param props - {@link WmTableProps}
- */
-var _default = exports["default"] = WmTable;
+var table_default = WmTable;
+export {
+  WmTableStandalone as WmTable,
+  WmTableComponent,
+  table_default as default
+};