@dreamtree-org/twreact-ui 1.0.71 → 1.0.73

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import React__default, { forwardRef, createElement, useId, useRef, useState, useEffect, useImperativeHandle, useMemo, useLayoutEffect, useCallback, createContext, useContext, cloneElement, PureComponent } from 'react';
+import React__default, { forwardRef, createElement, useId, useRef, useState, useEffect, useImperativeHandle, useMemo, useCallback, useLayoutEffect, createContext, useContext, cloneElement, PureComponent } from 'react';
 import ReactDOM, { createPortal } from 'react-dom';
 
 function _extends() {
@@ -3866,6 +3866,98 @@ var Select = /*#__PURE__*/React__default.forwardRef(function (_ref, forwardedRef
 var _excluded$k = ["data", "columns", "sortable", "filterable", "selectable", "pagination", "pageSize", "onSort", "onFilter", "onFetch", "onFilterChange", "onSelectionChange", "onRowClick", "hasDetails", "DetailsComponent", "className", "withAction", "onAction", "actions", "showSerial", "cellClass", "rowClass", "globalSearch", "limitOptions", "showLimitSelector", "onLimitChange", "showReloadButton", "renderReloadButton", "onReload", "stripedRows", "stripedColors", "responsiveBreakpoint", "serverSide", "totalRecords", "pageNumber", "onPageChange"];
 function ownKeys$9(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$9(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$9(Object(t), true).forEach(function (r) { _defineProperty$4(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$9(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+
+// Constants moved outside component
+var DEFAULT_ACTIONS = [{
+  name: "edit",
+  label: "Edit",
+  onClick: function onClick() {
+    console.log("Edit action clicked");
+  },
+  icon: /*#__PURE__*/React__default.createElement(PenSquare, {
+    size: 16
+  })
+}, {
+  name: "delete",
+  label: "Delete",
+  onClick: function onClick() {
+    console.log("Delete action clicked");
+  },
+  icon: /*#__PURE__*/React__default.createElement(Trash, {
+    size: 16
+  })
+}, {
+  name: "view",
+  label: "View",
+  onClick: function onClick() {
+    console.log("View action clicked");
+  },
+  icon: /*#__PURE__*/React__default.createElement(Eye, {
+    size: 16
+  })
+}];
+var RESIZE_DEBOUNCE_MS = 150;
+var MENU_PLACEMENT_THRESHOLD = 160;
+
+// Helper functions
+var getRowKey = function getRowKey(row, globalIndex) {
+  if ((row === null || row === void 0 ? void 0 : row.id) != null) return String(row.id);
+  if ((row === null || row === void 0 ? void 0 : row._id) != null) return String(row._id);
+  return String(globalIndex);
+};
+
+// Calculate pagination numbers
+var getPaginationNumbers = function getPaginationNumbers(currentPage, totalPages) {
+  var maxVisible = 5;
+  if (totalPages <= maxVisible) {
+    return Array.from({
+      length: totalPages
+    }, function (_, i) {
+      return i + 1;
+    });
+  }
+  if (currentPage <= 3) {
+    return Array.from({
+      length: maxVisible
+    }, function (_, i) {
+      return i + 1;
+    });
+  }
+  if (currentPage >= totalPages - 2) {
+    return Array.from({
+      length: maxVisible
+    }, function (_, i) {
+      return totalPages - 4 + i;
+    });
+  }
+  return Array.from({
+    length: maxVisible
+  }, function (_, i) {
+    return currentPage - 2 + i;
+  });
+};
+
+// Empty and Loading state components
+var EmptyState = function EmptyState() {
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "flex flex-col items-center gap-2"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "text-gray-400"
+  }, /*#__PURE__*/React__default.createElement(List, {
+    className: "h-8 w-8"
+  })), /*#__PURE__*/React__default.createElement("span", {
+    className: "text-sm text-gray-500"
+  }, "No results found."));
+};
+var LoadingState = function LoadingState() {
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "flex flex-col items-center gap-2"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "h-6 w-6 animate-spin rounded-full border-2 border-primary-600 border-t-transparent"
+  }), /*#__PURE__*/React__default.createElement("span", {
+    className: "text-sm text-gray-500"
+  }, "Loading..."));
+};
 var Table = function Table(_ref) {
   var _ref$data = _ref.data,
     data = _ref$data === void 0 ? [] : _ref$data,
@@ -3921,9 +4013,9 @@ var Table = function Table(_ref) {
     serverSide = _ref$serverSide === void 0 ? false : _ref$serverSide,
     _ref$totalRecords = _ref.totalRecords,
     totalRecords = _ref$totalRecords === void 0 ? 0 : _ref$totalRecords,
-    pageNumber = _ref.pageNumber;
-    _ref.onPageChange;
-    var props = _objectWithoutProperties$1(_ref, _excluded$k);
+    pageNumber = _ref.pageNumber,
+    onPageChange = _ref.onPageChange,
+    props = _objectWithoutProperties$1(_ref, _excluded$k);
   // State for responsive view
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -3931,14 +4023,16 @@ var Table = function Table(_ref) {
     setIsMobileView = _useState2[1];
 
   // Keep original table data / loading
-  var _useState3 = useState(Array.isArray(data) ? data : []),
+  var _useState3 = useState(function () {
+      return Array.isArray(data) ? data : [];
+    }),
     _useState4 = _slicedToArray(_useState3, 2),
     tableData = _useState4[0],
     setTableData = _useState4[1];
   var _useState5 = useState(false),
     _useState6 = _slicedToArray(_useState5, 2),
     loading = _useState6[0],
-    setLoading = _useState6[1];
+    _setLoading = _useState6[1];
 
   // Column visibility state
   var _useState7 = useState(function () {
@@ -3950,10 +4044,26 @@ var Table = function Table(_ref) {
     columnsState = _useState8[0],
     setColumnsState = _useState8[1];
   useEffect(function () {
-    // Sync when prop changes
-    setColumnsState(Array.isArray(columns) ? columns.map(function (c) {
-      return _objectSpread$9({}, c);
-    }) : []);
+    // Sync when prop changes - only update if columns actually changed
+    if (Array.isArray(columns)) {
+      setColumnsState(function (prev) {
+        var prevKeys = new Set(prev.map(function (c) {
+          return c.key;
+        }));
+        var newKeys = new Set(columns.map(function (c) {
+          return c.key;
+        }));
+        var keysChanged = prevKeys.size !== newKeys.size || _toConsumableArray$1(prevKeys).some(function (k) {
+          return !newKeys.has(k);
+        });
+        if (keysChanged) {
+          return columns.map(function (c) {
+            return _objectSpread$9({}, c);
+          });
+        }
+        return prev;
+      });
+    }
   }, [columns]);
 
   // Popover state for column toggler
@@ -4013,39 +4123,44 @@ var Table = function Table(_ref) {
     _useState28 = _slicedToArray(_useState27, 2),
     openActionKey = _useState28[0],
     setOpenActionKey = _useState28[1];
-  var openRef = useRef(null);
   useEffect(function () {
     if (typeof pageNumber === "number" && pageNumber !== currentPage) {
       setCurrentPage(pageNumber);
+      // Note: onPageChange is intentionally not called here to avoid loops
+      // Parent should handle page changes via controlled component pattern
     }
-  }, [pageNumber]);
+  }, [pageNumber, currentPage]);
   useEffect(function () {
     setLimit(pageSize);
   }, [pageSize]);
 
-  // Check if mobile view
+  // Check if mobile view with debouncing
   useEffect(function () {
+    var timeoutId;
     var checkMobile = function checkMobile() {
       setIsMobileView(window.innerWidth < responsiveBreakpoint);
     };
+    var debouncedCheck = function debouncedCheck() {
+      clearTimeout(timeoutId);
+      timeoutId = setTimeout(checkMobile, RESIZE_DEBOUNCE_MS);
+    };
 
     // Initial check
     checkMobile();
 
-    // Add event listener
-    window.addEventListener("resize", checkMobile);
+    // Add event listener with debouncing
+    window.addEventListener("resize", debouncedCheck);
     return function () {
-      window.removeEventListener("resize", checkMobile);
+      clearTimeout(timeoutId);
+      window.removeEventListener("resize", debouncedCheck);
     };
   }, [responsiveBreakpoint]);
-  var isValidList = function isValidList(d) {
-    return Array.isArray(d);
-  };
 
   // Close column menu when clicking outside
   useEffect(function () {
+    if (!showColumnMenu) return;
     var onDocClick = function onDocClick(e) {
-      if (showColumnMenu && columnMenuRef.current && !columnMenuRef.current.contains(e.target) && columnToggleBtnRef.current && !columnToggleBtnRef.current.contains(e.target)) {
+      if (columnMenuRef.current && !columnMenuRef.current.contains(e.target) && columnToggleBtnRef.current && !columnToggleBtnRef.current.contains(e.target)) {
         setShowColumnMenu(false);
       }
     };
@@ -4055,26 +4170,38 @@ var Table = function Table(_ref) {
     };
   }, [showColumnMenu]);
 
-  // Close per-row actionmenu when clicking outside
-  useEffect(function () {
-    var handler = function handler(e) {
-      if (openActionKey && openRef.current && !openRef.current.contains(e.target)) {
-        setOpenActionKey(null);
-      }
-    };
-    document.addEventListener("click", handler);
-    return function () {
-      return document.removeEventListener("click", handler);
-    };
-  }, [openActionKey]);
-
   // Visible columns derived from columnsState
   var visibleColumns = useMemo(function () {
     return columnsState.filter(function (col) {
       return col.isVisible !== false;
     });
   }, [columnsState]);
-  var toggleColumnVisibility = function toggleColumnVisibility(key) {
+
+  // Memoize actions
+  var actionsToUse = useMemo(function () {
+    return actions !== null && actions !== void 0 ? actions : DEFAULT_ACTIONS;
+  }, [actions]);
+
+  // Memoize visible count
+  var visibleCount = useMemo(function () {
+    return (showSerial ? 1 : 0) + visibleColumns.length + (selectable ? 1 : 0) + (hasDetails ? 1 : 0) + (withAction ? 1 : 0);
+  }, [showSerial, visibleColumns.length, selectable, hasDetails, withAction]);
+
+  // Memoize key-to-row mapping for selection
+  var keyToRowMap = useMemo(function () {
+    var map = new Map();
+    filteredData.forEach(function (row, i) {
+      map.set(getRowKey(row, i), row);
+    });
+    return map;
+  }, [filteredData]);
+
+  // Wrapper for setCurrentPage that also calls onPageChange
+  var handlePageChange = useCallback(function (newPage) {
+    setCurrentPage(newPage);
+    onPageChange === null || onPageChange === void 0 || onPageChange(newPage);
+  }, [onPageChange]);
+  var toggleColumnVisibility = useCallback(function (key) {
     setColumnsState(function (prev) {
       return prev.map(function (c) {
         return c.key === key ? _objectSpread$9(_objectSpread$9({}, c), {}, {
@@ -4082,58 +4209,23 @@ var Table = function Table(_ref) {
         }) : c;
       });
     });
-    setCurrentPage(1);
-  };
+    handlePageChange(1);
+  }, [handlePageChange]);
 
   // Handle actions
-  var handleOnAction = function handleOnAction(action, row) {
+  var handleOnAction = useCallback(function (action, row) {
     var _action$onClick;
     (_action$onClick = action.onClick) === null || _action$onClick === void 0 || _action$onClick.call(action, {
       action: action,
       row: row
     });
-    onAction && onAction({
+    onAction === null || onAction === void 0 || onAction({
       action: action,
       row: row
     });
     setOpenActionKey(null);
     setActionAnchor(null);
-  };
-  var defaultActions = [{
-    name: "edit",
-    label: "Edit",
-    onClick: function onClick() {
-      console.log("Edit action clicked");
-    },
-    icon: /*#__PURE__*/React__default.createElement(PenSquare, {
-      size: 16
-    })
-  }, {
-    name: "delete",
-    label: "Delete",
-    onClick: function onClick() {
-      console.log("Delete action clicked");
-    },
-    icon: /*#__PURE__*/React__default.createElement(Trash, {
-      size: 16
-    })
-  }, {
-    name: "view",
-    label: "View",
-    onClick: function onClick() {
-      console.log("View action clicked");
-    },
-    icon: /*#__PURE__*/React__default.createElement(Eye, {
-      size: 16
-    })
-  }];
-  var actionsToUse = actions !== undefined ? actions : defaultActions;
-  var getRowKey = function getRowKey(row, globalIndex) {
-    if (row == null) return String(globalIndex);
-    if (row.id !== undefined && row.id !== null) return String(row.id);
-    if (row._id !== undefined && row._id !== null) return String(row._id);
-    return String(globalIndex);
-  };
+  }, [onAction]);
 
   // Sorting
   var sortedData = useMemo(function () {
@@ -4152,16 +4244,38 @@ var Table = function Table(_ref) {
   // Filtering
   var filteredData = useMemo(function () {
     if (serverSide || !filterable || !Object.keys(filters).length) return sortedData;
-    var q = (filters.global || "").toLowerCase();
     return sortedData.filter(function (row) {
-      return Object.values(row || {}).some(function (v) {
-        return String(v).toLowerCase().includes(q);
+      // Apply global search filter if present
+      if (filters.global) {
+        var q = filters.global.toLowerCase();
+        var matchesGlobal = Object.values(row || {}).some(function (v) {
+          return String(v).toLowerCase().includes(q);
+        });
+        if (!matchesGlobal) return false;
+      }
+
+      // Apply column-specific filters
+      return visibleColumns.every(function (column) {
+        var columnFilter = filters[column.key];
+        if (!columnFilter) return true; // No filter for this column
+
+        var cellValue = row === null || row === void 0 ? void 0 : row[column.key];
+        return String(cellValue || "").toLowerCase().includes(columnFilter.toLowerCase());
       });
     });
-  }, [sortedData, filters, filterable, serverSide]);
-  // Pagination indices
-  var startIndex = pagination ? (currentPage - 1) * limit : 0;
-  var endIndex = pagination ? startIndex + limit : filteredData.length;
+  }, [sortedData, filters, filterable, serverSide, visibleColumns]);
+
+  // Pagination indices - memoized
+  var _useMemo = useMemo(function () {
+      var start = pagination ? (currentPage - 1) * limit : 0;
+      var end = pagination ? start + limit : filteredData.length;
+      return {
+        startIndex: start,
+        endIndex: end
+      };
+    }, [pagination, currentPage, limit, filteredData.length]),
+    startIndex = _useMemo.startIndex,
+    endIndex = _useMemo.endIndex;
 
   // Paginated view
   var paginatedData = useMemo(function () {
@@ -4175,7 +4289,7 @@ var Table = function Table(_ref) {
   }, [pagination, serverSide, totalRecords, filteredData.length, limit]);
 
   // Sorting handler
-  var handleSort = function handleSort(key) {
+  var handleSort = useCallback(function (key) {
     if (!sortable) return;
     var direction = sortConfig.key === key && sortConfig.direction === "asc" ? "desc" : "asc";
     setSortConfig({
@@ -4183,10 +4297,10 @@ var Table = function Table(_ref) {
       direction: direction
     });
     onSort === null || onSort === void 0 || onSort(key, direction);
-  };
+  }, [sortable, sortConfig, onSort]);
 
-  // Selection handlers
-  var handleSelectAll = function handleSelectAll() {
+  // Selection handlers - optimized with memoized keyToRowMap
+  var handleSelectAll = useCallback(function () {
     var newSelection = new Set(selectedRows);
     var pageRowKeys = paginatedData.map(function (r, i) {
       return getRowKey(r, startIndex + i);
@@ -4204,50 +4318,45 @@ var Table = function Table(_ref) {
       });
     }
     setSelectedRows(newSelection);
-    var keyToRow = new Map(filteredData.map(function (r, i) {
-      return [getRowKey(r, i), r];
-    }));
     var selectedData = Array.from(newSelection).map(function (k) {
-      return keyToRow.get(k);
+      return keyToRowMap.get(k);
     }).filter(Boolean);
     onSelectionChange === null || onSelectionChange === void 0 || onSelectionChange(selectedData);
-  };
-  var handleSelectRow = function handleSelectRow(row, rowIndexInPage) {
+  }, [selectedRows, paginatedData, startIndex, keyToRowMap, onSelectionChange]);
+  var handleSelectRow = useCallback(function (row, rowIndexInPage) {
     var globalIndex = startIndex + rowIndexInPage;
     var key = getRowKey(row, globalIndex);
     var newSelection = new Set(selectedRows);
     if (newSelection.has(key)) newSelection["delete"](key);else newSelection.add(key);
     setSelectedRows(newSelection);
-    var keyToRow = new Map(filteredData.map(function (r, i) {
-      return [getRowKey(r, i), r];
-    }));
     var selectedData = Array.from(newSelection).map(function (k) {
-      return keyToRow.get(k);
+      return keyToRowMap.get(k);
     }).filter(Boolean);
     onSelectionChange === null || onSelectionChange === void 0 || onSelectionChange(selectedData);
-  };
-  var toggleExpandRow = function toggleExpandRow(row, rowIndexInPage) {
+  }, [startIndex, selectedRows, keyToRowMap, onSelectionChange]);
+  var toggleExpandRow = useCallback(function (row, rowIndexInPage) {
     var globalIndex = startIndex + rowIndexInPage;
     var key = getRowKey(row, globalIndex);
-    var newExpanded = new Set(expandedRows);
-    if (newExpanded.has(key)) newExpanded["delete"](key);else newExpanded.add(key);
-    setExpandedRows(newExpanded);
-  };
-  var handleFilter = function handleFilter(key, value) {
-    var newFilters = _objectSpread$9(_objectSpread$9({}, filters), {}, _defineProperty$4({}, key, value));
-    setFilters(newFilters);
-    onFilter === null || onFilter === void 0 || onFilter(newFilters);
-    onFilterChange === null || onFilterChange === void 0 || onFilterChange(newFilters);
-    setCurrentPage(1);
-  };
-  var renderCell = function renderCell(column, row, globalIndex) {
+    setExpandedRows(function (prev) {
+      var newExpanded = new Set(prev);
+      if (newExpanded.has(key)) newExpanded["delete"](key);else newExpanded.add(key);
+      return newExpanded;
+    });
+  }, [startIndex]);
+  var handleFilter = useCallback(function (key, value) {
+    setFilters(function (prev) {
+      var newFilters = _objectSpread$9(_objectSpread$9({}, prev), {}, _defineProperty$4({}, key, value));
+      onFilter === null || onFilter === void 0 || onFilter(newFilters);
+      onFilterChange === null || onFilterChange === void 0 || onFilterChange(newFilters);
+      return newFilters;
+    });
+    handlePageChange(1);
+  }, [onFilter, onFilterChange, handlePageChange]);
+  var renderCell = useCallback(function (column, row, globalIndex) {
     if (column.render) return column.render(row, globalIndex);
     return row === null || row === void 0 ? void 0 : row[column.key];
-  };
-
-  // UI counts
-  var visibleCount = (showSerial ? 1 : 0) + visibleColumns.length + (selectable ? 1 : 0) + (hasDetails ? 1 : 0) + (withAction ? 1 : 0);
-  var toggleActions = function toggleActions(e, actionCellKey, row) {
+  }, []);
+  var toggleActions = useCallback(function (e, actionCellKey, row) {
     e.stopPropagation();
     if (actionAnchor && actionAnchor.key === actionCellKey) {
       setOpenActionKey(null);
@@ -4260,7 +4369,7 @@ var Table = function Table(_ref) {
         row: row
       });
     }
-  };
+  }, [actionAnchor]);
   useEffect(function () {
     if (!actionAnchor) return;
     var onDocClick = function onDocClick(ev) {
@@ -4271,9 +4380,9 @@ var Table = function Table(_ref) {
       setActionAnchor(null);
     };
     var onScrollResize = function onScrollResize() {
-      setOpenActionKey(function (k) {
-        return k ? k : null;
-      });
+      // Close menu on scroll/resize to prevent positioning issues
+      setOpenActionKey(null);
+      setActionAnchor(null);
     };
     window.addEventListener("click", onDocClick);
     window.addEventListener("scroll", onScrollResize, true);
@@ -4284,58 +4393,163 @@ var Table = function Table(_ref) {
       window.removeEventListener("resize", onScrollResize);
     };
   }, [actionAnchor]);
+
+  // Track previous fetch params to prevent unnecessary calls
+  var prevFetchParamsRef = useRef(null);
+  var isFetchingRef = useRef(false);
+  var isMountedRef = useRef(true);
+  var onFetchRef = useRef(onFetch);
+  var activeFetchIdRef = useRef(0);
+
+  // Keep ref in sync with onFetch
   useEffect(function () {
-    if (!onFetch) return;
-    onFetch({
-      setData: function setData(rows) {
-        return setTableData(Array.isArray(rows) ? rows : []);
-      },
-      setLoading: setLoading,
+    onFetchRef.current = onFetch;
+  }, [onFetch]);
+
+  // Track mount status
+  useEffect(function () {
+    isMountedRef.current = true;
+    return function () {
+      isMountedRef.current = false;
+      isFetchingRef.current = false;
+    };
+  }, []);
+
+  // Serialize fetch params for comparison - serialize filters to avoid object reference issues
+  var fetchParams = useMemo(function () {
+    return {
       filters: filters,
       page: currentPage,
       limit: limit,
-      sort: sortConfig
-    });
-  }, [onFetch, filters, currentPage, limit, sortConfig]);
-  useEffect(function () {
-    if (!serverSide) setTableData(data);
-  }, [data, serverSide]);
+      sortKey: sortConfig.key,
+      sortDirection: sortConfig.direction
+    };
+  }, [filters, currentPage, limit, sortConfig.key, sortConfig.direction]);
+  var fetchParamsString = useMemo(function () {
+    return JSON.stringify(fetchParams);
+  }, [fetchParams]);
+
+  // Consolidated data sync effect
   useEffect(function () {
-    if (!onFetch && isValidList(data)) setTableData(data);
-  }, [data, onFetch]);
+    var currentOnFetch = onFetchRef.current;
+    if (currentOnFetch) {
+      // Only fetch if params actually changed and not already fetching
+      if (!isFetchingRef.current && prevFetchParamsRef.current !== fetchParamsString) {
+        prevFetchParamsRef.current = fetchParamsString;
+        isFetchingRef.current = true;
+
+        // Track fetch ID to prevent race conditions
+        var fetchId = Date.now();
+        activeFetchIdRef.current = fetchId;
+        try {
+          var result = currentOnFetch({
+            setData: function setData(rows) {
+              // Only update if component is still mounted and this is the active fetch
+              if (isMountedRef.current && activeFetchIdRef.current === fetchId) {
+                setTableData(Array.isArray(rows) ? rows : []);
+                // Don't set isFetchingRef to false here - let setLoading handle it
+              }
+            },
+            setLoading: function setLoading(loading) {
+              // Only update if component is still mounted and this is the active fetch
+              if (isMountedRef.current && activeFetchIdRef.current === fetchId) {
+                _setLoading(loading);
+                if (!loading) {
+                  isFetchingRef.current = false;
+                }
+              }
+            },
+            filters: fetchParams.filters,
+            page: fetchParams.page,
+            limit: fetchParams.limit,
+            sort: {
+              key: fetchParams.sortKey,
+              direction: fetchParams.sortDirection
+            }
+          });
+
+          // Handle promise if onFetch returns one
+          if (result && typeof result.then === "function") {
+            result["catch"](function (error) {
+              console.error("Table onFetch error:", error);
+              if (isMountedRef.current && activeFetchIdRef.current === fetchId) {
+                _setLoading(false);
+                isFetchingRef.current = false;
+              }
+            });
+          }
+        } catch (error) {
+          console.error("Table onFetch error:", error);
+          if (isMountedRef.current && activeFetchIdRef.current === fetchId) {
+            _setLoading(false);
+            isFetchingRef.current = false;
+          }
+        }
+      }
+    } else if (!serverSide && Array.isArray(data)) {
+      setTableData(data);
+    }
+  }, [serverSide, data, fetchParamsString]);
 
   // Global search
   useEffect(function () {
     setSearchInput(filters.global || "");
   }, [filters.global]);
-  var applyGlobalSearch = function applyGlobalSearch() {
+  var applyGlobalSearch = useCallback(function () {
     handleFilter("global", searchInput);
-  };
-  var onGlobalKeyDown = function onGlobalKeyDown(e) {
+  }, [handleFilter, searchInput]);
+  var onGlobalKeyDown = useCallback(function (e) {
     if (e.key === "Enter") {
       e.preventDefault();
       applyGlobalSearch();
     }
-  };
-  var handleLimitChange = function handleLimitChange(nextLimit) {
+  }, [applyGlobalSearch]);
+  var handleLimitChange = useCallback(function (nextLimit) {
     var parsed = Number(nextLimit);
     if (!Number.isFinite(parsed) || parsed <= 0) return;
     setLimit(parsed);
-    setCurrentPage(1);
+    handlePageChange(1);
     onLimitChange === null || onLimitChange === void 0 || onLimitChange(parsed);
-  };
+  }, [onLimitChange, handlePageChange]);
 
-  // Render mobile card
-  var renderMobileCard = function renderMobileCard(row, rowIndexInPage) {
+  // Memoize limit options
+  var limitOptionsMemo = useMemo(function () {
+    var opts = Array.isArray(limitOptions) && limitOptions.length > 0 ? limitOptions : [25, 50, 100];
+    return opts.map(function (opt) {
+      return {
+        label: String(opt),
+        value: opt
+      };
+    });
+  }, [limitOptions]);
+
+  // Extract row metadata computation
+  var getRowMetadata = useCallback(function (row, rowIndexInPage) {
     var globalIndex = startIndex + rowIndexInPage;
     var key = getRowKey(row, globalIndex);
     var actionCellKey = "actions-".concat(key);
-    var extraRowClass = typeof rowClass === "function" ? rowClass({
+    var extraRowClass = typeof rowClass === "function" ? (rowClass({
       row: row,
       rowIndex: globalIndex
-    }) : "";
-    var safeExtraRowClass = typeof extraRowClass === "string" ? extraRowClass.trim() : "";
+    }) || "").trim() : "";
     var stripeBg = stripedRows && !selectedRows.has(key) ? stripedColors[globalIndex % stripedColors.length] : undefined;
+    return {
+      globalIndex: globalIndex,
+      key: key,
+      actionCellKey: actionCellKey,
+      extraRowClass: extraRowClass,
+      stripeBg: stripeBg
+    };
+  }, [startIndex, rowClass, stripedRows, selectedRows, stripedColors]);
+
+  // Render mobile card
+  var renderMobileCard = useCallback(function (row, rowIndexInPage) {
+    var _getRowMetadata = getRowMetadata(row, rowIndexInPage),
+      globalIndex = _getRowMetadata.globalIndex,
+      key = _getRowMetadata.key,
+      actionCellKey = _getRowMetadata.actionCellKey,
+      extraRowClass = _getRowMetadata.extraRowClass,
+      stripeBg = _getRowMetadata.stripeBg;
     return /*#__PURE__*/React__default.createElement("div", {
       key: key,
       style: stripeBg ? {
@@ -4345,7 +4559,7 @@ var Table = function Table(_ref) {
         "cursor-pointer": !!onRowClick,
         "bg-primary-50 border-primary-200": selectedRows.has(key),
         "hover:shadow-md": !selectedRows.has(key)
-      }, safeExtraRowClass),
+      }, extraRowClass),
       onClick: function onClick() {
         return onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(row, globalIndex);
       }
@@ -4402,16 +4616,15 @@ var Table = function Table(_ref) {
     }), document.body))), /*#__PURE__*/React__default.createElement("div", {
       className: "p-4"
     }, visibleColumns.map(function (column, colIndex) {
-      var extraCellClass = typeof cellClass === "function" ? cellClass({
+      var extraCellClass = typeof cellClass === "function" ? (cellClass({
         row: row,
         rowIndex: globalIndex,
         column: column,
         columnIndex: colIndex
-      }) : "";
-      var safeExtraCellClass = typeof extraCellClass === "string" ? extraCellClass.trim() : "";
+      }) || "").trim() : "";
       return /*#__PURE__*/React__default.createElement("div", {
         key: column.key,
-        className: cn$1("flex justify-between items-center flex-row py-2 border-b last:border-b-0", safeExtraCellClass)
+        className: cn$1("flex justify-between items-center flex-row py-2 border-b last:border-b-0", extraCellClass)
       }, /*#__PURE__*/React__default.createElement("div", {
         className: "text-xs font-medium text-gray-500 uppercase tracking-wide mb-1 sm:mb-0 sm:w-1/3 sm:pr-2"
       }, column.label), /*#__PURE__*/React__default.createElement("div", {
@@ -4423,10 +4636,10 @@ var Table = function Table(_ref) {
       row: row,
       index: globalIndex
     })));
-  };
+  }, [getRowMetadata, hasDetails, selectable, showSerial, withAction, expandedRows, selectedRows, onRowClick, visibleColumns, renderCell, cellClass, DetailsComponent, actionsToUse, actionAnchor, openActionKey, handleOnAction, actionMenuRef, toggleActions, toggleExpandRow, handleSelectRow]);
 
   // Render mobile filters
-  var renderMobileFilters = function renderMobileFilters() {
+  var renderMobileFilters = useCallback(function () {
     return /*#__PURE__*/React__default.createElement("div", {
       className: "mb-4 p-3 bg-gray-50 rounded-lg"
     }, /*#__PURE__*/React__default.createElement("div", {
@@ -4468,7 +4681,7 @@ var Table = function Table(_ref) {
         }
       }));
     })));
-  };
+  }, [showMobileFilters, globalSearch, searchInput, onGlobalKeyDown, filterable, visibleColumns, filters, handleFilter, setShowMobileFilters, setSearchInput]);
 
   // Render
   return /*#__PURE__*/React__default.createElement("div", {
@@ -4491,23 +4704,11 @@ var Table = function Table(_ref) {
     htmlFor: "pagination-limit",
     className: "text-sm text-gray-600 whitespace-nowrap"
   }, "Show"), /*#__PURE__*/React__default.createElement(Select, {
-    options: Array.isArray(limitOptions) && limitOptions.length > 0 ? limitOptions.map(function (opt) {
-      return {
-        label: String(opt),
-        value: opt
-      };
-    }) : [25, 50, 100].map(function (opt) {
-      return {
-        label: String(opt),
-        value: opt
-      };
-    }),
+    options: limitOptionsMemo,
     value: limit,
     allowClear: false,
     placeholder: "",
-    onChange: function onChange(e) {
-      return handleLimitChange(e);
-    },
+    onChange: handleLimitChange,
     className: "w-20 md:w-30"
   }), /*#__PURE__*/React__default.createElement("p", {
     className: "text-sm text-gray-600 whitespace-nowrap"
@@ -4523,9 +4724,7 @@ var Table = function Table(_ref) {
     className: "rounded-lg md:rounded-md border border-gray-300 p-2 disabled:opacity-50 hover:bg-gray-50",
     disabled: currentPage === 1,
     onClick: function onClick() {
-      return setCurrentPage(function (p) {
-        return Math.max(1, p - 1);
-      });
+      return handlePageChange(Math.max(1, currentPage - 1));
     },
     "aria-label": "Previous page"
   }, /*#__PURE__*/React__default.createElement(ChevronLeft, {
@@ -4534,9 +4733,7 @@ var Table = function Table(_ref) {
     className: "rounded-lg md:rounded-md border border-gray-300 p-2 disabled:opacity-50 hover:bg-gray-50",
     disabled: currentPage === totalPages,
     onClick: function onClick() {
-      return setCurrentPage(function (p) {
-        return Math.min(totalPages, p + 1);
-      });
+      return handlePageChange(Math.min(totalPages, currentPage + 1));
     },
     "aria-label": "Next page"
   }, /*#__PURE__*/React__default.createElement(ChevronRight, {
@@ -4679,33 +4876,16 @@ var Table = function Table(_ref) {
   }, loading ? /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("td", {
     colSpan: visibleCount,
     className: "px-6 py-8 text-center"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "flex flex-col items-center gap-2"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "h-6 w-6 animate-spin rounded-full border-2 border-primary-600 border-t-transparent"
-  }), /*#__PURE__*/React__default.createElement("span", {
-    className: "text-sm text-gray-500"
-  }, "Loading...")))) : paginatedData.length === 0 ? /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("td", {
+  }, /*#__PURE__*/React__default.createElement(LoadingState, null))) : paginatedData.length === 0 ? /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("td", {
     colSpan: visibleCount,
     className: "px-6 py-8 text-center"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "flex flex-col items-center gap-2"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "text-gray-400"
-  }, /*#__PURE__*/React__default.createElement(List, {
-    className: "h-8 w-8"
-  })), /*#__PURE__*/React__default.createElement("span", {
-    className: "text-sm text-gray-500"
-  }, "No results found.")))) : paginatedData.map(function (row, rowIndexInPage) {
-    var globalIndex = startIndex + rowIndexInPage;
-    var key = getRowKey(row, globalIndex);
-    var actionCellKey = "actions-".concat(key);
-    var extraRowClass = typeof rowClass === "function" ? rowClass({
-      row: row,
-      rowIndex: globalIndex
-    }) : "";
-    var safeExtraRowClass = typeof extraRowClass === "string" ? extraRowClass.trim() : "";
-    var stripeBg = stripedRows && !selectedRows.has(key) ? stripedColors[globalIndex % stripedColors.length] : undefined;
+  }, /*#__PURE__*/React__default.createElement(EmptyState, null))) : paginatedData.map(function (row, rowIndexInPage) {
+    var _getRowMetadata2 = getRowMetadata(row, rowIndexInPage),
+      globalIndex = _getRowMetadata2.globalIndex,
+      key = _getRowMetadata2.key,
+      actionCellKey = _getRowMetadata2.actionCellKey,
+      extraRowClass = _getRowMetadata2.extraRowClass,
+      stripeBg = _getRowMetadata2.stripeBg;
     return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
       key: key
     }, /*#__PURE__*/React__default.createElement("tr", {
@@ -4715,7 +4895,7 @@ var Table = function Table(_ref) {
       className: cn$1("hover:bg-gray-50", {
         "cursor-pointer": !!onRowClick,
         "bg-primary-50": selectedRows.has(key)
-      }, safeExtraRowClass),
+      }, extraRowClass),
       onClick: function onClick() {
         return onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(row, globalIndex);
       }
@@ -4743,16 +4923,15 @@ var Table = function Table(_ref) {
         return handleSelectRow(row, rowIndexInPage);
       }
     })), visibleColumns.map(function (column, columnIndex) {
-      var extraCellClass = typeof cellClass === "function" ? cellClass({
+      var extraCellClass = typeof cellClass === "function" ? (cellClass({
         row: row,
         rowIndex: globalIndex,
         column: column,
         columnIndex: columnIndex
-      }) : "";
-      var safeExtraCellClass = typeof extraCellClass === "string" ? extraCellClass.trim() : "";
+      }) || "").trim() : "";
       return /*#__PURE__*/React__default.createElement("td", {
         key: column.key,
-        className: cn$1("px-6 py-4 whitespace-nowrap text-sm text-gray-900", safeExtraCellClass)
+        className: cn$1("px-6 py-4 whitespace-nowrap text-sm text-gray-900", extraCellClass)
       }, renderCell(column, row, globalIndex));
     }), withAction && /*#__PURE__*/React__default.createElement("td", {
       className: "px-4 py-4 text-sm text-right",
@@ -4795,23 +4974,9 @@ var Table = function Table(_ref) {
     className: "p-4"
   }, loading ? /*#__PURE__*/React__default.createElement("div", {
     className: "py-8 text-center"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "flex flex-col items-center gap-2"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "h-6 w-6 animate-spin rounded-full border-2 border-primary-600 border-t-transparent"
-  }), /*#__PURE__*/React__default.createElement("span", {
-    className: "text-sm text-gray-500"
-  }, "Loading..."))) : paginatedData.length === 0 ? /*#__PURE__*/React__default.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement(LoadingState, null)) : paginatedData.length === 0 ? /*#__PURE__*/React__default.createElement("div", {
     className: "py-8 text-center"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "flex flex-col items-center gap-2"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "text-gray-400"
-  }, /*#__PURE__*/React__default.createElement(List, {
-    className: "h-8 w-8"
-  })), /*#__PURE__*/React__default.createElement("span", {
-    className: "text-sm text-gray-500"
-  }, "No results found."))) : paginatedData.map(function (row, rowIndexInPage) {
+  }, /*#__PURE__*/React__default.createElement(EmptyState, null)) : paginatedData.map(function (row, rowIndexInPage) {
     return renderMobileCard(row, rowIndexInPage);
   })), pagination && /*#__PURE__*/React__default.createElement("div", {
     className: "p-4 border-t"
@@ -4825,25 +4990,11 @@ var Table = function Table(_ref) {
     className: "rounded-lg md:rounded-md border border-gray-300 px-4 py-2 text-sm disabled:opacity-50 hover:bg-gray-50",
     disabled: currentPage === 1,
     onClick: function onClick() {
-      return setCurrentPage(function (p) {
-        return Math.max(1, p - 1);
-      });
+      return handlePageChange(Math.max(1, currentPage - 1));
     }
   }, "Previous"), /*#__PURE__*/React__default.createElement("div", {
     className: "flex items-center gap-1"
-  }, Array.from({
-    length: Math.min(5, totalPages)
-  }, function (_, i) {
-    var pageNum;
-    if (totalPages <= 5) {
-      pageNum = i + 1;
-    } else if (currentPage <= 3) {
-      pageNum = i + 1;
-    } else if (currentPage >= totalPages - 2) {
-      pageNum = totalPages - 4 + i;
-    } else {
-      pageNum = currentPage - 2 + i;
-    }
+  }, getPaginationNumbers(currentPage, totalPages).map(function (pageNum) {
     return /*#__PURE__*/React__default.createElement("button", {
       key: pageNum,
       className: cn$1("h-8 w-8 rounded-lg md:rounded-md text-sm", {
@@ -4851,19 +5002,23 @@ var Table = function Table(_ref) {
         "border border-gray-300 hover:bg-gray-50": pageNum !== currentPage
       }),
       onClick: function onClick() {
-        return setCurrentPage(pageNum);
+        return handlePageChange(pageNum);
       }
     }, pageNum);
   })), /*#__PURE__*/React__default.createElement("button", {
     className: "rounded-lg md:rounded-md border border-gray-300 px-4 py-2 text-sm disabled:opacity-50 hover:bg-gray-50",
     disabled: currentPage === totalPages,
     onClick: function onClick() {
-      return setCurrentPage(function (p) {
-        return Math.min(totalPages, p + 1);
-      });
+      return handlePageChange(Math.min(totalPages, currentPage + 1));
     }
   }, "Next")))));
 };
+
+// ActionMenuPortal constants
+var MENU_WIDTH = 180;
+var MAX_MENU_HEIGHT = 320;
+var MENU_MARGIN = 8;
+var MIN_MENU_HEIGHT = 80;
 function ActionMenuPortal(_ref2) {
   var anchorElem = _ref2.anchorElem,
     anchorRow = _ref2.anchorRow,
@@ -4877,16 +5032,12 @@ function ActionMenuPortal(_ref2) {
       top: 0,
       transformOrigin: "top right",
       maxHeight: 300,
-      width: 180,
+      width: MENU_WIDTH,
       opacity: 0
     }),
     _useState30 = _slicedToArray(_useState29, 2),
     style = _useState30[0],
     setStyle = _useState30[1];
-  var menuWidth = 180;
-  var maxMenuHeight = 320;
-  var margin = 8;
-  var minMenuHeight = 80;
 
   // compute position using actual menu height (if available) and layout measurements
   var computePosition = function computePosition() {
@@ -4898,17 +5049,17 @@ function ActionMenuPortal(_ref2) {
     var spaceAbove = rect.top;
 
     // allowed max height based on available space
-    var allowedMaxHeight = Math.min(maxMenuHeight, Math.max(minMenuHeight, Math.max(spaceBelow - margin, spaceAbove - margin)));
+    var allowedMaxHeight = Math.min(MAX_MENU_HEIGHT, Math.max(MIN_MENU_HEIGHT, Math.max(spaceBelow - MENU_MARGIN, spaceAbove - MENU_MARGIN)));
 
     // choose placement by comparing actual available spaces
     var placement = "bottom";
-    if (spaceBelow < 160 && spaceAbove > spaceBelow) {
+    if (spaceBelow < MENU_PLACEMENT_THRESHOLD && spaceAbove > spaceBelow) {
       placement = "top";
       // when placing on top we should cap allowedMaxHeight by spaceAbove
-      allowedMaxHeight = Math.min(maxMenuHeight, Math.max(minMenuHeight, spaceAbove - margin));
+      allowedMaxHeight = Math.min(MAX_MENU_HEIGHT, Math.max(MIN_MENU_HEIGHT, spaceAbove - MENU_MARGIN));
     } else {
       // placing bottom: cap by spaceBelow
-      allowedMaxHeight = Math.min(maxMenuHeight, Math.max(minMenuHeight, spaceBelow - margin));
+      allowedMaxHeight = Math.min(MAX_MENU_HEIGHT, Math.max(MIN_MENU_HEIGHT, spaceBelow - MENU_MARGIN));
     }
 
     // measure the menu's content height if we can, and compute the actual menu height we'll use.
@@ -4925,23 +5076,23 @@ function ActionMenuPortal(_ref2) {
     var top;
     if (placement === "top") {
       // place menu so its bottom sits just above the anchor (rect.top - margin)
-      top = rect.top + scrollY - measuredMenuHeight - margin;
+      top = rect.top + scrollY - measuredMenuHeight - MENU_MARGIN;
     } else {
       // place menu just below the anchor (rect.bottom + margin)
-      top = rect.bottom + scrollY + margin;
+      top = rect.bottom + scrollY + MENU_MARGIN;
     }
 
     // clamp top to viewport (so it never goes off-screen)
-    var minTop = margin + scrollY;
-    var maxTop = window.innerHeight + scrollY - measuredMenuHeight - margin;
+    var minTop = MENU_MARGIN + scrollY;
+    var maxTop = window.innerHeight + scrollY - measuredMenuHeight - MENU_MARGIN;
     if (top < minTop) top = minTop;
     if (top > maxTop) top = maxTop;
 
     // compute left and clamp horizontally
-    var left = rect.right + scrollX - menuWidth;
-    if (left < margin) left = margin;
-    if (left + menuWidth > window.innerWidth - margin) {
-      left = Math.max(margin, window.innerWidth - menuWidth - margin);
+    var left = rect.right + scrollX - MENU_WIDTH;
+    if (left < MENU_MARGIN) left = MENU_MARGIN;
+    if (left + MENU_WIDTH > window.innerWidth - MENU_MARGIN) {
+      left = Math.max(MENU_MARGIN, window.innerWidth - MENU_WIDTH - MENU_MARGIN);
     }
     var transformOrigin = placement === "bottom" ? "top right" : "bottom right";
 
@@ -4951,7 +5102,7 @@ function ActionMenuPortal(_ref2) {
       top: top,
       transformOrigin: transformOrigin,
       maxHeight: allowedMaxHeight,
-      width: menuWidth,
+      width: MENU_WIDTH,
       opacity: 1
     });
   };
@@ -4974,7 +5125,8 @@ function ActionMenuPortal(_ref2) {
       window.removeEventListener("scroll", onScrollOrResize, true);
     };
     // Recompute when anchor element changes or actions change (content height may change).
-  }, [anchorElem, actions, menuRef]);
+    // Note: menuRef is a ref object and never changes, so it's safe to include
+  }, [anchorElem, actions]);
   return /*#__PURE__*/createPortal(/*#__PURE__*/React__default.createElement("div", {
     ref: menuRef,
     style: {