@wavemaker/react-runtime 11.14.1-15.6409

package/components/data/table/index.js

@@ -0,0 +1,1295 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.WmTableComponent = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactTable = require("@tanstack/react-table");
+var _material = require("@mui/material");
+var _lodashEs = require("lodash-es");
+var _withBaseWrapper = _interopRequireDefault(require("../../../higherOrder/withBaseWrapper"));
+var _pagination = _interopRequireDefault(require("../pagination"));
+var _hooks = require("./hooks");
+var _utils = require("./utils");
+var _components = require("./components");
+var _buildSelectionColumns = require("./utils/buildSelectionColumns");
+var _LoadingComponent = _interopRequireDefault(require("../pagination/components/LoadingComponent"));
+var _columnProxy = require("./utils/columnProxy");
+var _useDataSourceSubscription = require("../../../hooks/useDataSourceSubscription");
+var _crudHandlers = require("./utils/crud-handlers");
+var _types = require("../types");
+var _excluded = ["name", "dataset", "navigation", "children", "listener", "pagesize", "navigationalign", "showrecordcount", "maxsize", "boundarylinks", "allowpagesizechange", "pagesizeoptions", "formposition", "editmode", "spacing", "title", "subheading", "iconclass", "exportOptions", "shownavigation", "onDemandLoad", "showrowindex", "showheader", "enablesort", "radioselect", "radioselecttitle", "radioselectarialabel", "multiselect", "multiselecttitle", "multiselectarialabel", "gridfirstrowselect", "rowClass", "deleteoktext", "deletecanceltext", "confirmdelete", "errormessage", "nodatamessage", "loadingdatamsg", "insertmessage", "updatemessage", "deletemessage", "onRowDelete", "onRowUpdate", "datasource", "binddataset", "onSuccess", "onError", "onRowinsert", "onRowupdate", "onRowdelete", "onRowclick", "statehandler", "formName", "filtermode", "searchlabel", "onBeforedatarender", "onDatarender", "className"]; // Import custom hooks and utilities
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
+var __jsx = _react["default"].createElement;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var WmTableComponent = exports.WmTableComponent = /*#__PURE__*/(0, _react.memo)(function (_ref) {
+  var _datasource$paginatio2, _datasource$paginatio4;
+  var name = _ref.name,
+    _ref$dataset = _ref.dataset,
+    dataset = _ref$dataset === void 0 ? [] : _ref$dataset,
+    _ref$navigation = _ref.navigation,
+    navigation = _ref$navigation === void 0 ? "Pager" : _ref$navigation,
+    children = _ref.children,
+    listener = _ref.listener,
+    _ref$pagesize = _ref.pagesize,
+    pagesize = _ref$pagesize === void 0 ? 5 : _ref$pagesize,
+    _ref$navigationalign = _ref.navigationalign,
+    navigationalign = _ref$navigationalign === void 0 ? "left" : _ref$navigationalign,
+    _ref$showrecordcount = _ref.showrecordcount,
+    showrecordcount = _ref$showrecordcount === void 0 ? false : _ref$showrecordcount,
+    _ref$maxsize = _ref.maxsize,
+    maxsize = _ref$maxsize === void 0 ? 5 : _ref$maxsize,
+    _ref$boundarylinks = _ref.boundarylinks,
+    boundarylinks = _ref$boundarylinks === void 0 ? false : _ref$boundarylinks,
+    _ref$allowpagesizecha = _ref.allowpagesizechange,
+    allowpagesizechange = _ref$allowpagesizecha === void 0 ? false : _ref$allowpagesizecha,
+    _ref$pagesizeoptions = _ref.pagesizeoptions,
+    pagesizeoptions = _ref$pagesizeoptions === void 0 ? "5,10,20,50,100" : _ref$pagesizeoptions,
+    _ref$formposition = _ref.formposition,
+    formposition = _ref$formposition === void 0 ? "bottom" : _ref$formposition,
+    _ref$editmode = _ref.editmode,
+    editmode = _ref$editmode === void 0 ? "none" : _ref$editmode,
+    _ref$spacing = _ref.spacing,
+    spacing = _ref$spacing === void 0 ? "normal" : _ref$spacing,
+    title = _ref.title,
+    subheading = _ref.subheading,
+    iconclass = _ref.iconclass,
+    _ref$exportOptions = _ref.exportOptions,
+    exportOptions = _ref$exportOptions === void 0 ? [] : _ref$exportOptions,
+    _ref$shownavigation = _ref.shownavigation,
+    shownavigation = _ref$shownavigation === void 0 ? true : _ref$shownavigation,
+    _ref$onDemandLoad = _ref.onDemandLoad,
+    onDemandLoad = _ref$onDemandLoad === void 0 ? false : _ref$onDemandLoad,
+    _ref$showrowindex = _ref.showrowindex,
+    showrowindex = _ref$showrowindex === void 0 ? false : _ref$showrowindex,
+    _ref$showheader = _ref.showheader,
+    showheader = _ref$showheader === void 0 ? true : _ref$showheader,
+    _ref$enablesort = _ref.enablesort,
+    enablesort = _ref$enablesort === void 0 ? true : _ref$enablesort,
+    _ref$radioselect = _ref.radioselect,
+    radioselect = _ref$radioselect === void 0 ? false : _ref$radioselect,
+    _ref$radioselecttitle = _ref.radioselecttitle,
+    radioselecttitle = _ref$radioselecttitle === void 0 ? "" : _ref$radioselecttitle,
+    _ref$radioselectarial = _ref.radioselectarialabel,
+    radioselectarialabel = _ref$radioselectarial === void 0 ? _utils.TABLE_MESSAGES.radioSelectAriaLabel : _ref$radioselectarial,
+    _ref$multiselect = _ref.multiselect,
+    multiselect = _ref$multiselect === void 0 ? false : _ref$multiselect,
+    _ref$multiselecttitle = _ref.multiselecttitle,
+    multiselecttitle = _ref$multiselecttitle === void 0 ? "" : _ref$multiselecttitle,
+    _ref$multiselectarial = _ref.multiselectarialabel,
+    multiselectarialabel = _ref$multiselectarial === void 0 ? _utils.TABLE_MESSAGES.multiSelectAriaLabel : _ref$multiselectarial,
+    _ref$gridfirstrowsele = _ref.gridfirstrowselect,
+    gridfirstrowselect = _ref$gridfirstrowsele === void 0 ? false : _ref$gridfirstrowsele,
+    _ref$rowClass = _ref.rowClass,
+    rowClass = _ref$rowClass === void 0 ? "" : _ref$rowClass,
+    _ref$deleteoktext = _ref.deleteoktext,
+    deleteoktext = _ref$deleteoktext === void 0 ? _utils.TABLE_MESSAGES.deleteOkText : _ref$deleteoktext,
+    _ref$deletecanceltext = _ref.deletecanceltext,
+    deletecanceltext = _ref$deletecanceltext === void 0 ? _utils.TABLE_MESSAGES.deleteCancelText : _ref$deletecanceltext,
+    _ref$confirmdelete = _ref.confirmdelete,
+    confirmdelete = _ref$confirmdelete === void 0 ? _utils.TABLE_MESSAGES.deleteConfirmMessage : _ref$confirmdelete,
+    _ref$errormessage = _ref.errormessage,
+    errormessage = _ref$errormessage === void 0 ? _utils.TABLE_MESSAGES.operationError : _ref$errormessage,
+    _ref$nodatamessage = _ref.nodatamessage,
+    nodatamessage = _ref$nodatamessage === void 0 ? _utils.TABLE_MESSAGES.noDataMessage : _ref$nodatamessage,
+    _ref$loadingdatamsg = _ref.loadingdatamsg,
+    loadingdatamsg = _ref$loadingdatamsg === void 0 ? _utils.TABLE_MESSAGES.loadingMessage : _ref$loadingdatamsg,
+    _ref$insertmessage = _ref.insertmessage,
+    insertmessage = _ref$insertmessage === void 0 ? _utils.TABLE_MESSAGES.insertSuccess : _ref$insertmessage,
+    _ref$updatemessage = _ref.updatemessage,
+    updatemessage = _ref$updatemessage === void 0 ? _utils.TABLE_MESSAGES.updateSuccess : _ref$updatemessage,
+    _ref$deletemessage = _ref.deletemessage,
+    deletemessage = _ref$deletemessage === void 0 ? _utils.TABLE_MESSAGES.deleteSuccess : _ref$deletemessage,
+    onRowDelete = _ref.onRowDelete,
+    onRowUpdate = _ref.onRowUpdate,
+    datasource = _ref.datasource,
+    binddataset = _ref.binddataset,
+    onSuccess = _ref.onSuccess,
+    onError = _ref.onError,
+    onRowinsert = _ref.onRowinsert,
+    onRowupdate = _ref.onRowupdate,
+    onRowdelete = _ref.onRowdelete,
+    onRowclick = _ref.onRowclick,
+    statehandler = _ref.statehandler,
+    formName = _ref.formName,
+    filtermode = _ref.filtermode,
+    _ref$searchlabel = _ref.searchlabel,
+    searchlabel = _ref$searchlabel === void 0 ? "Search" : _ref$searchlabel,
+    onBeforedatarender = _ref.onBeforedatarender,
+    onDatarender = _ref.onDatarender,
+    className = _ref.className,
+    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var _useState = (0, _react.useState)((datasource === null || datasource === void 0 ? void 0 : datasource.loading) || false),
+    loading = _useState[0],
+    setLoading = _useState[1];
+  (0, _react.useEffect)(function () {
+    // Sync local loading state with datasource loading
+    if ((datasource === null || datasource === void 0 ? void 0 : datasource.loading) !== undefined) {
+      setLoading(datasource.loading);
+    }
+  }, [datasource === null || datasource === void 0 ? void 0 : datasource.loading]);
+
+  // State for accumulated data in Scroll navigation mode
+  var _useState2 = (0, _react.useState)([]),
+    scrollAccumulatedData = _useState2[0],
+    setScrollAccumulatedData = _useState2[1];
+
+  // Callback to receive accumulated data from pagination
+  var handleScrollDataUpdate = (0, _react.useCallback)(function (data) {
+    // Only update if data has actually changed to prevent unnecessary re-renders
+    setScrollAccumulatedData(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 or dataset changes
+  (0, _react.useEffect)(function () {
+    if (navigation !== "Scroll") {
+      setScrollAccumulatedData([]);
+    }
+  }, [navigation]);
+
+  // Create a centralized toast notification function
+  var showToast = (0, _react.useCallback)(function (message, type) {
+    if (listener && listener.App && typeof listener.App.notifyApp === "function") {
+      listener.App.notifyApp(message, type);
+    }
+  }, [listener]);
+
+  // Determine if we're using server-side pagination
+  // Check if datasource is API-aware (server-side) rather than checking runtime pagination data
+  var isServerSidePagination = (0, _react.useMemo)(function () {
+    return !!(datasource && datasource.execute && datasource.execute(_types.DataSource.Operation.IS_PAGEABLE));
+  }, [datasource]);
+
+  // 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
+    }),
+    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);
+
+  // ==================== 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);
+
+      // 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;
+
+        // Get persisted page size
+        var persistedPageSize = persisted.pagesize || pagesize;
+
+        // Set datasource maxResults if we have a persisted pageSize and datasource
+        if (persisted.pagesize && isServerSidePagination && datasource && datasource.maxResults !== undefined) {
+          datasource.maxResults = persistedPageSize;
+        }
+        return {
+          initialPage: restoredPage,
+          initialPageSize: persistedPageSize,
+          initialActualPageSize: actualPageSize,
+          initialSearchState: persisted.search || undefined,
+          initialSortState: persisted.sort || undefined
+        };
+      }
+      return {
+        initialPage: 1,
+        initialPageSize: pagesize,
+        initialActualPageSize: actualPageSize,
+        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);
+
+  // Track previous page index to detect actual page changes
+  var prevPageIndexRef = (0, _react.useRef)(-1);
+
+  // Use row selection hook
+  var _useRowSelection = (0, _hooks.useRowSelection)({
+      radioselect: radioselect,
+      multiselect: multiselect,
+      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: pagesize
+        };
+      }
+    }),
+    selectedRowId = _useRowSelection.selectedRowId,
+    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: multiselect
+    }),
+    activeRowIds = _useTableState.activeRowIds,
+    setActiveRow = _useTableState.setActiveRow,
+    handleRowActiveClick = _useTableState.handleRowActiveClick,
+    isRowActive = _useTableState.isRowActive;
+
+  // Use dynamic columns hook to generate columns from data when no children are provided
+  var _useDynamicColumns = (0, _hooks.useDynamicColumns)({
+      dataset: internalDataset,
+      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);
+
+      // Filter out addNewRow action when editmode is 'none' or 'quickedit'
+      var filteredActions = editmode === "none" || editmode === "quickedit" ? allTableActions.filter(function (action) {
+        return action.key !== "addNewRow";
+      }) : allTableActions;
+
+      // Split actions based on position - handle comma-separated positions
+      var headerActions = filteredActions.filter(function (action) {
+        var position = action.position || "footer";
+        return position === "header" || position.includes("header");
+      });
+      var footerActions = filteredActions.filter(function (action) {
+        var position = action.position || "footer";
+        return position === "footer" || position.includes("footer") || !action.position;
+      });
+
+      // Get static columns from children
+      var staticColumns = (0, _utils.parseTableColumns)(children);
+
+      // Use dynamic columns if no static columns are provided
+      // For dynamic tables, prefer dynamic columns even if they're empty initially (data loading)
+      var finalColumns = staticColumns.length > 0 ? staticColumns : isDynamicTable ? dynamicColumns : staticColumns;
+      return {
+        wmTableColumns: finalColumns,
+        rowActions: (0, _utils.parseTableRowActions)(children),
+        tableActions: filteredActions,
+        headerActions: headerActions,
+        footerActions: footerActions,
+        rowExpansionConfig: (0, _utils.parseTableRowExpansion)(children)
+      };
+    }, [children, editmode, dynamicColumns]),
+    wmTableColumns = _useMemo2.wmTableColumns,
+    rowActions = _useMemo2.rowActions,
+    headerActions = _useMemo2.headerActions,
+    footerActions = _useMemo2.footerActions,
+    rowExpansionConfig = _useMemo2.rowExpansionConfig;
+
+  // Use unified table edit functionality
+  var _useTableEdit = (0, _hooks.useTableEdit)({
+      editMode: editmode,
+      internalDataset: internalDataset,
+      setInternalDataset: setInternalDataset,
+      wmTableColumns: wmTableColumns,
+      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: multiselect,
+      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
+    }),
+    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
+    }),
+    handleRowClick = _useRowHandlers.handleRowClick;
+
+  // Track sorting and column sizing states
+  var _useState3 = (0, _react.useState)(function () {
+      // Convert initialSortState to TanStack Table sorting format
+      if (initialSortState) {
+        return [{
+          id: initialSortState.field,
+          desc: initialSortState.direction === "desc"
+        }];
+      }
+      return [];
+    }),
+    sorting = _useState3[0],
+    setSorting = _useState3[1];
+  var _useState4 = (0, _react.useState)({}),
+    columnSizing = _useState4[0],
+    setColumnSizing = _useState4[1];
+  var _useState5 = (0, _react.useState)(false),
+    isResizing = _useState5[0],
+    setIsResizing = _useState5[1];
+
+  // Custom sorting change handler that resets page to 1 when sorting changes
+  var handleSortingChange = (0, _react.useCallback)(function (updaterOrValue) {
+    setSorting(updaterOrValue);
+    // Reset to first page when sorting changes
+    if (tableRef.current) {
+      tableRef.current.setPageIndex(0);
+    }
+  }, []);
+
+  // Use row expansion hook
+  var _useRowExpansion = (0, _hooks.useRowExpansion)({
+      rowExpansionConfig: rowExpansionConfig,
+      internalDataset: internalDataset
+    }),
+    expandedRows = _useRowExpansion.expandedRows,
+    toggleRowExpansion = _useRowExpansion.toggleRowExpansion,
+    isRowExpanded = _useRowExpansion.isRowExpanded;
+
+  // Use table columns hook to get column definitions
+  var _useTableColumns = (0, _hooks.useTableColumns)({
+      wmTableColumns: wmTableColumns,
+      rowActions: rowActions,
+      listener: listener,
+      deleteRecord: function deleteRecord(rowData) {
+        return _deleteRecord(rowData, tableRef.current);
+      },
+      showrowindex: showrowindex,
+      editmode: editmode,
+      renderEditableCell: renderEditableCell,
+      isRowEditing: isRowEditing,
+      startEditing: startEditing,
+      cancelEditing: cancelEditing,
+      saveEditing: saveEditing,
+      editingRowId: editingRowId,
+      cellState: cellState,
+      isResizing: isResizing
+    }),
+    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,
+      selectedRowId: selectedRowId,
+      // Keep these for interface compatibility but they're not used in column structure
+      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, handleRadioSelection, handleMultiSelection, handleSelectAll, radioselecttitle, radioselectarialabel, multiselecttitle, multiselectarialabel, name]);
+
+  //column proxy changes
+  var columnsStateRef = (0, _react.useRef)(columns);
+  var _useState6 = (0, _react.useState)(0),
+    columnsVersion = _useState6[0],
+    setColumnsVersion = _useState6[1];
+  var _useState7 = (0, _react.useState)({}),
+    columnOverrides = _useState7[0],
+    setColumnOverrides = _useState7[1];
+  var applyOverride = (0, _react.useCallback)(function (index, key, value) {
+    setColumnOverrides(function (prev) {
+      return _objectSpread(_objectSpread({}, prev), {}, (0, _defineProperty2["default"])({}, index, _objectSpread(_objectSpread({}, prev[index] || {}), {}, (0, _defineProperty2["default"])({}, key, value))));
+    });
+  }, []);
+  var columnsProxy = (0, _react.useMemo)(function () {
+    return (0, _columnProxy.createColumnsProxy)(wmTableColumns, applyOverride, setColumnsVersion);
+  }, [wmTableColumns, applyOverride, setColumnsVersion]);
+  columnsStateRef.current = columns;
+  var columnsForTable = (0, _react.useMemo)(function () {
+    var base = columnsStateRef.current || [];
+    return base.map(function (col, idx) {
+      return _objectSpread(_objectSpread({}, col), columnOverrides[idx] || {});
+    });
+  }, [columns, columnOverrides, columnsVersion, editingRowId]);
+
+  // Use filter hook for filtering functionality
+  var _useTableFilter = (0, _hooks.useTableFilter)({
+      filterMode: filtermode,
+      columns: columnsForTable,
+      dataset: navigation === "Scroll" && scrollAccumulatedData.length > 0 ? scrollAccumulatedData : 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
+    if (tableRef.current) {
+      tableRef.current.setPageIndex(0);
+    }
+  }, [setGlobalFilterOriginal]);
+  var setColumnFilter = (0, _react.useCallback)(function (columnId, value, matchMode) {
+    setColumnFilterOriginal(columnId, value, matchMode);
+    // Reset to first page when filter changes
+    if (tableRef.current) {
+      tableRef.current.setPageIndex(0);
+    }
+  }, [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
+  var rowSelection = (0, _react.useMemo)(function () {
+    var selection = {};
+    if (useMultiSelect) {
+      selectedRowIds.forEach(function (id) {
+        selection[id] = true;
+      });
+    } else if (useRadioSelect && selectedRowId) {
+      selection[selectedRowId] = true;
+    }
+    return selection;
+  }, [useMultiSelect, useRadioSelect, selectedRowIds, selectedRowId]);
+
+  // Determine if we're using server-side sorting (same as server-side pagination)
+  var isServerSideSorting = isServerSidePagination;
+
+  // Use accumulated data for Scroll navigation, otherwise use normal dataset
+  var tableData = (0, _react.useMemo)(function () {
+    if (navigation === "Scroll" && scrollAccumulatedData.length > 0) {
+      return filtermode ? filteredData : scrollAccumulatedData;
+    }
+    return filtermode ? filteredData : internalDataset;
+  }, [navigation, scrollAccumulatedData, filteredData, internalDataset, filtermode]);
+
+  // Create the table with columns
+  var table = (0, _reactTable.useReactTable)({
+    data: tableData,
+    columns: columnsForTable,
+    state: {
+      sorting: sorting,
+      columnSizing: columnSizing,
+      rowSelection: rowSelection // Add row selection state
+    },
+    onSortingChange: handleSortingChange,
+    onColumnSizingChange: handleColumnSizingChange,
+    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,
+    initialState: {
+      pagination: {
+        pageSize: initialPageSize,
+        pageIndex: initialPage - 1 // Convert to 0-based index
+      }
+    },
+    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,
+    setLoading: setLoading,
+    filterFields: memoizedFilterFields,
+    logicalOp: memoizedLogicalOp
+  });
+
+  // Panel structure management
+  var _usePanelStructure = (0, _hooks.usePanelStructure)({
+      title: title,
+      subheading: subheading,
+      iconclass: iconclass,
+      exportOptions: exportOptions,
+      headerActions: headerActions,
+      footerActions: footerActions,
+      shownavigation: shownavigation,
+      onDemandLoad: onDemandLoad,
+      internalDataset: internalDataset,
+      pagesize: pagesize,
+      allowpagesizechange: allowpagesizechange,
+      datasource: datasource
+    }),
+    showPanelHeading = _usePanelStructure.showPanelHeading,
+    showPagination = _usePanelStructure.showPagination;
+
+  // 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 (_ref2) {
+        var _ref3 = (0, _slicedToArray2["default"])(_ref2, 2),
+          _ = _ref3[0],
+          filter = _ref3[1];
+        return filter.value;
+      }).map(function (_ref4) {
+        var _ref5 = (0, _slicedToArray2["default"])(_ref4, 2),
+          field = _ref5[0],
+          filter = _ref5[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,
+    selectedRowId: selectedRowId,
+    selectedRowIds: selectedRowIds,
+    internalDataset: internalDataset,
+    initialActualPageSize: initialActualPageSize,
+    datasource: datasource,
+    multiselect: multiselect,
+    filterData: filterDataForState,
+    sortData: sortDataForState,
+    navigation: navigation,
+    isStateConfigured: effectiveStateHandler !== undefined && effectiveStateHandler !== "none",
+    defaultPageSize: pagesize,
+    // Original page size from props
+    initialSortState: initialSortState,
+    initialFilterState: initialSearchState
+  });
+
+  // Use pagination state hook
+  var _usePaginationState = (0, _hooks.usePaginationState)({
+      table: table,
+      editmode: editmode,
+      internalDataset: internalDataset,
+      isAddingNewRow: isAddingNewRow,
+      cancelEditing: cancelEditing,
+      datasource: datasource,
+      isServerSidePagination: isServerSidePagination
+    }),
+    handlePaginationChange = _usePaginationState.handlePaginationChange,
+    handlePageSizeChangeBase = _usePaginationState.handlePageSizeChange;
+
+  // Enhanced page size change handler with state persistence
+  var handlePageSizeChange = (0, _react.useCallback)(function (newPageSize) {
+    // Call base handler
+    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, table.getState().pagination.pageSize // 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 === pagesize) {
+          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, pagesize, table, navigation]);
+
+  // 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;
+
+      // Only call callbacks if it's initial render or page actually changed
+      var isInitialRender = prevPageIndexRef.current === -1;
+      var hasPageChanged = prevPageIndexRef.current !== currentPageIndex;
+      if (isInitialRender || hasPageChanged) {
+        // Update the tracked page index
+        prevPageIndexRef.current = currentPageIndex;
+
+        // Call onBeforedatarender callback
+        if (onBeforedatarender) {
+          onBeforedatarender(listener === null || listener === void 0 ? void 0 : listener.Widgets[name],
+          // widget reference
+          internalDataset,
+          // data
+          wmTableColumns // columns (including dynamic ones)
+          );
+        }
+
+        // Schedule onDatarender callback after rendering is complete
+        // Use requestAnimationFrame to ensure DOM is fully painted
+        requestAnimationFrame(function () {
+          if (onDatarender) {
+            onDatarender(listener === null || listener === void 0 ? void 0 : listener.Widgets[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]);
+
+  // Use table initialization hook
+  (0, _hooks.useTableInitialization)({
+    internalDataset: internalDataset,
+    wmTableColumns: wmTableColumns,
+    cellState: cellState,
+    gridfirstrowselect: gridfirstrowselect,
+    useRadioSelect: useRadioSelect,
+    useMultiSelect: useMultiSelect,
+    setActiveRow: setActiveRow,
+    selectedRowId: selectedRowId,
+    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,
+      selectedRowId: selectedRowId,
+      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)(function (event, widget, row) {
+    if (!row) {
+      console.warn("Invalid row data provided to deleteRow");
+      return;
+    }
+    _deleteRecord(row, tableRef.current);
+  }, [_deleteRecord]);
+
+  // Refresh table data
+  var refresh = (0, _react.useCallback)(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee() {
+    var newData,
+      _datasource$paginatio3,
+      currentTable,
+      targetPage,
+      currentPageSize,
+      shouldNavigateToLastPage,
+      totalElements,
+      totalAfterAdd,
+      lastPage,
+      response,
+      dataWithIds,
+      _args = arguments;
+    return _regenerator["default"].wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          newData = _args.length > 0 && _args[0] !== undefined ? _args[0] : false;
+          if (datasource) {
+            _context.next = 4;
+            break;
+          }
+          console.warn("No datasource available for refresh");
+          return _context.abrupt("return");
+        case 4:
+          _context.prev = 4;
+          // Use tableRef.current to access the latest table instance
+          currentTable = tableRef.current;
+          if (currentTable) {
+            _context.next = 9;
+            break;
+          }
+          console.warn("Table instance not available");
+          return _context.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) {
+            _context.next = 20;
+            break;
+          }
+          _context.next = 16;
+          return (0, _crudHandlers.refreshDataSource)(datasource, {
+            page: targetPage,
+            pagesize: currentPageSize,
+            filterFields: memoizedFilterFields || {},
+            condition: memoizedLogicalOp
+          });
+        case 16:
+          response = _context.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);
+              });
+            }
+          }
+          _context.next = 21;
+          break;
+        case 20:
+          // For client-side pagination, just set the page index
+          if (shouldNavigateToLastPage) {
+            currentTable.setPageIndex(targetPage);
+          }
+        case 21:
+          // Show success notification
+          if (showToast) {
+            showToast("Table refreshed successfully", "Success");
+          }
+          _context.next = 29;
+          break;
+        case 24:
+          _context.prev = 24;
+          _context.t0 = _context["catch"](4);
+          console.error("Error refreshing table data:", _context.t0);
+          if (showToast) {
+            showToast("Failed to refresh table data", "Error");
+          }
+          if (onError) {
+            onError("refresh", _context.t0);
+          }
+        case 29:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee, null, [[4, 24]]);
+  })), [datasource, isServerSidePagination, setInternalDataset, showToast, onError]); // Removed 'table' from dependencies to prevent recreation
+
+  // Expose table API through listener
+  (0, _react.useEffect)(function () {
+    if (listener && listener.onChange) {
+      listener.onChange(name, {
+        columns: columnsProxy,
+        addNewRow: handleAddNewRowClick,
+        editRow: editRow,
+        deleteRow: deleteRow,
+        refresh: refresh,
+        datasource: datasource
+      });
+    }
+  }, []);
+  return __jsx(_material.Box, {
+    className: "app-livegrid",
+    name: name
+  }, __jsx(_material.Box, {
+    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,
+    exportOptions: exportOptions,
+    headerActions: headerActions,
+    spacing: spacing,
+    isGridEditMode: isGridEditModeComplete,
+    isLoading: datasource === null || datasource === void 0 ? void 0 : datasource.loading,
+    listener: listener
+  }), __jsx(_material.Box, {
+    className: "app-datagrid",
+    onKeyDown: function onKeyDown(e) {
+      return handleTableEditKeyDown(e);
+    }
+  }, filtermode === "search" && __jsx(_components.GlobalSearchFilter, {
+    value: globalFilter,
+    onChange: setGlobalFilter,
+    selectedColumn: globalSearchColumn,
+    onColumnChange: setGlobalSearchColumn,
+    columns: columnsForTable,
+    searchLabel: searchlabel
+  }), __jsx(_material.Box, {
+    className: "table-container table-responsive"
+  }, __jsx(_material.Box, {
+    className: "app-grid-header"
+  }, __jsx(_material.Box, {
+    className: "app-grid-header-inner",
+    style: {
+      height: "100%",
+      overflow: "auto",
+      position: "relative"
+    }
+  }, loading && __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: {
+      width: props.width || "100%"
+    },
+    name: name
+  }, showheader && wmTableColumns.length > 0 && __jsx(_components.TableHeaderComponent, {
+    table: table,
+    enablesort: enablesort,
+    rowClass: rowClass,
+    sorting: sorting,
+    columnSizing: columnSizing,
+    rowSelection: rowSelection,
+    rowExpansionConfig: rowExpansionConfig,
+    columnsVersion: columnsVersion,
+    filterMode: filtermode,
+    columnFilters: columnFilters,
+    onColumnFilterChange: setColumnFilter,
+    renderFormWidget: renderFormWidget,
+    listener: listener
+  }), __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: toggleRowExpansion,
+    isRowExpanded: isRowExpanded
+  })))))), __jsx(_material.Box, {
+    className: "panel-footer clearfix"
+  }, showPagination && __jsx(_material.Box, {
+    className: "app-datagrid-paginator"
+  }, __jsx(_pagination["default"], {
+    name: "".concat(name || "table", "_pagination"),
+    dataset: filtermode ? filteredData : internalDataset,
+    maxResults: pagesize,
+    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,
+    onPageSizeChange: handlePageSizeChange,
+    onDataUpdate: handleScrollDataUpdate
+    // 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
+  })), __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", "datasource", "binddataset", "onSuccess", "onError", "onRowinsert", "onRowupdate", "onRowdelete", "statehandler", "filtermode", "children", "listener"];
+
+  // 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";
+var WmTable = (0, _withBaseWrapper["default"])(WmTableComponent);
+// Override the displayName set by withBaseWrapper
+WmTable.displayName = "WmTable";
+var _default = exports["default"] = WmTable;