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

package/components/data/table/index.js

@@ -0,0 +1,1830 @@
+"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;
+    }
+    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
+    }
+  });
+
+  // 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
+      if (navigation === "Scroll") {
+        return {
+          initialPage: 1,
+          initialPageSize: pagesize,
+          initialActualPageSize: undefined,
+          initialSearchState: undefined,
+          initialSortState: undefined
+        };
+      }
+      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)
+        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
+        actualPageSize = datasource.pagination.size;
+      } else if (datasource !== null && datasource !== void 0 && datasource.maxResults) {
+        // Fallback to maxResults if available
+        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) {
+          datasource.maxResults = persistedPageSize;
+        }
+        return {
+          initialPage: restoredPage,
+          initialPageSize: persistedPageSize,
+          initialActualPageSize: actualPageSize,
+          initialSearchState: persisted.search || undefined,
+          initialSortState: persisted.sort || undefined
+        };
+      }
+      var initialPageSize = defaultPageSizeFromOptions !== undefined ? defaultPageSizeFromOptions : actualPageSize || pagesize;
+      return {
+        initialPage: 1,
+        initialPageSize: initialPageSize,
+        initialActualPageSize: pagesize,
+        initialSearchState: undefined,
+        initialSortState: undefined
+      };
+    }, [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,
+      isServerSidePagination: isServerSidePagination()
+    }),
+    paginationState = _usePaginationState.paginationState,
+    setPaginationState = _usePaginationState.setPaginationState,
+    handlePaginationChange = _usePaginationState.handlePaginationChange,
+    handlePageSizeChangeBase = _usePaginationState.handlePageSizeChange;
+
+  // Multiselect is only valid when editmode is "quickedit" or "inline"
+  var effectiveMultiselect = multiselect;
+
+  // Use row selection hook
+  var _useRowSelection = (0, _hooks.useRowSelection)({
+      radioselect: radioselect,
+      multiselect: effectiveMultiselect,
+      gridfirstrowselect: gridfirstrowselect,
+      internalDataset: internalDataset,
+      cellState: cellState,
+      name: 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)({
+      editMode: editmode,
+      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)({
+      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";
+        return position === "header" || position.includes("header");
+      });
+      var footerActions = allTableActions.filter(function (action) {
+        var 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;
+      return {
+        wmTableColumns: finalColumns,
+        tableStructure: structure,
+        rowActions: (0, _utils.parseTableRowActions)(children),
+        tableActions: allTableActions,
+        headerActions: headerActions,
+        footerActions: footerActions,
+        rowExpansionConfig: (0, _utils.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)({
+      editMode: editmode,
+      internalDataset: internalDataset,
+      setInternalDataset: 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);
+      },
+      showrowindex: showrowindex,
+      radioselect: radioselect,
+      multiselect: effectiveMultiselect,
+      rowActions: rowActions,
+      formposition: formposition,
+      insertmessage: insertmessage,
+      updatemessage: updatemessage,
+      errormessage: errormessage,
+      showToast: 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,
+      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
+      if (initialSortState) {
+        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);
+      },
+      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;
+    });
+    // Store column's show property
+    if (show !== undefined) {
+      setSummaryRowColumnShow(function (prev) {
+        var newShow = _objectSpread({}, prev);
+        if (!newShow[rowIndex]) {
+          newShow[rowIndex] = {};
+        }
+        newShow[rowIndex] = _objectSpread(_objectSpread({}, newShow[rowIndex]), {}, (0, _defineProperty2["default"])({}, columnKey, show));
+        return newShow;
+      });
+    }
+    setSummaryRowEnabled(true);
+  }, []);
+  var columnsProxy = (0, _react.useMemo)(function () {
+    return (0, _columnProxy.createColumnsProxy)(wmTableColumns, applyOverride, setColumnsVersion, setSummaryRowDef);
+  }, [wmTableColumns, applyOverride, setColumnsVersion, setSummaryRowDef]);
+  var _useCustomExpressionC = (0, _hooks.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)
+      } : {});
+    });
+  }, [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)({
+      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
+      });
+    });
+  }, [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
+      });
+    });
+  }, [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 || "",
+          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";
+        }();
+        return {
+          field: field,
+          value: filter.value,
+          matchMode: filter.matchMode,
+          type: columnType
+        };
+      });
+      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);
+        }
+      }
+    }
+  }, [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);
+    });
+  }, [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)
+          );
+          var customExprKeys = Object.keys(columnsProxy).filter(function (key) {
+            return columnsProxy[key].customExpression;
+          });
+          if (customExprKeys.length > 0) {
+            void mergeParsedCustomColumns()["finally"](function () {});
+          }
+          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;
+            }
+            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
+            );
+          }
+        });
+      }
+    }
+  }, [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,
+      statehandler: effectiveStateHandler,
+      selectedRowIds: selectedRowIds,
+      currentPage: table.getState().pagination.pageIndex + 1,
+      // Convert to 1-based
+      currentPageSize: table.getState().pagination.pageSize,
+      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);
+            }
+          }
+        });
+        // 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);
+          }
+        }
+      }
+
+      // 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();
+        }
+      }, _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;
+          }
+          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;
+          }
+          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
+          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);
+              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 (shouldNavigateToLastPage) {
+              // Use requestAnimationFrame for better performance than setTimeout
+              requestAnimationFrame(function () {
+                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);
+          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");
+          }
+        case 28:
+        case "end":
+          return _context2.stop();
+      }
+    }, _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
+        }));
+      }
+    }
+  };
+
+  // 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;
+        }
+        return acc;
+      }, {});
+
+      // If all values are undefined, pass empty array, else pass object of default values
+      var valuesToPass = Object.keys(defaultValues).length === 0 ? [] : defaultValues;
+      if (parentFormColumns) {
+        listener === null || listener === void 0 || listener.onChange(parentForm, {
+          dataoutput: _objectSpread(_objectSpread({}, parentFormColumns), {}, (0, _defineProperty2["default"])({}, name, valuesToPass))
+        });
+      }
+    }
+  }, [parentForm, parentFormColumns]);
+  var updateSelectedItem = function updateSelectedItem() {
+    if (!(listener !== null && listener !== void 0 && listener.onChange)) return;
+
+    // Helper to get row ID
+    var getRowId = function getRowId(row) {
+      return row._wmTableRowId || String(row.id);
+    };
+
+    // Get selected rows based on selection mode
+    var selectedRows = [];
+    if ((useRadioSelect || useMultiSelect) && selectedRowIds.length > 0) {
+      selectedRows = internalDataset.filter(function (row) {
+        return selectedRowIds.includes(getRowId(row));
+      });
+    } else if (activeRowIds.length > 0) {
+      selectedRows = internalDataset.filter(function (row) {
+        return activeRowIds.includes(getRowId(row));
+      });
+    }
+
+    // Clean and format selecteditem - always return as array
+    var cleanedRows = (0, _utils.cleanRowData)(selectedRows);
+
+    // Always return 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 {
+        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;
+});
+WmTableComponent.displayName = "WmTableComponent";
+
+// Wrapper component that provides EditedRowsContext to WmTableComponent
+var WmTableWithProvider = function WmTableWithProvider(props) {
+  return __jsx(_useEditedRows.EditedRowsProvider, null, __jsx(WmTableComponent, props));
+};
+WmTableWithProvider.displayName = "WmTable";
+var WmTableStandalone = exports.WmTable = (0, _withStandalone["default"])(WmTableWithProvider);
+// @ts-ignore
+var WmTable = (0, _withBaseWrapper["default"])(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;