@dreamtree-org/twreact-ui 1.0.70 → 1.0.72

package/dist/index.js

@@ -3883,9 +3883,101 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
   }, error));
 });
 
-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"];
+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.createElement(PenSquare, {
+    size: 16
+  })
+}, {
+  name: "delete",
+  label: "Delete",
+  onClick: function onClick() {
+    console.log("Delete action clicked");
+  },
+  icon: /*#__PURE__*/React.createElement(Trash, {
+    size: 16
+  })
+}, {
+  name: "view",
+  label: "View",
+  onClick: function onClick() {
+    console.log("View action clicked");
+  },
+  icon: /*#__PURE__*/React.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.createElement("div", {
+    className: "flex flex-col items-center gap-2"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "text-gray-400"
+  }, /*#__PURE__*/React.createElement(List, {
+    className: "h-8 w-8"
+  })), /*#__PURE__*/React.createElement("span", {
+    className: "text-sm text-gray-500"
+  }, "No results found."));
+};
+var LoadingState = function LoadingState() {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-col items-center gap-2"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "h-6 w-6 animate-spin rounded-full border-2 border-primary-600 border-t-transparent"
+  }), /*#__PURE__*/React.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,
@@ -3937,6 +4029,12 @@ var Table = function Table(_ref) {
     stripedColors = _ref$stripedColors === void 0 ? ["#ffffff", "#f7fafc"] : _ref$stripedColors,
     _ref$responsiveBreakp = _ref.responsiveBreakpoint,
     responsiveBreakpoint = _ref$responsiveBreakp === void 0 ? 768 : _ref$responsiveBreakp,
+    _ref$serverSide = _ref.serverSide,
+    serverSide = _ref$serverSide === void 0 ? false : _ref$serverSide,
+    _ref$totalRecords = _ref.totalRecords,
+    totalRecords = _ref$totalRecords === void 0 ? 0 : _ref$totalRecords,
+    pageNumber = _ref.pageNumber,
+    onPageChange = _ref.onPageChange,
     props = _objectWithoutProperties$1(_ref, _excluded$k);
   // State for responsive view
   var _useState = React.useState(false),
@@ -3945,14 +4043,16 @@ var Table = function Table(_ref) {
     setIsMobileView = _useState2[1];
 
   // Keep original table data / loading
-  var _useState3 = React.useState(Array.isArray(data) ? data : []),
+  var _useState3 = React.useState(function () {
+      return Array.isArray(data) ? data : [];
+    }),
     _useState4 = _slicedToArray(_useState3, 2),
     tableData = _useState4[0],
     setTableData = _useState4[1];
   var _useState5 = React.useState(false),
     _useState6 = _slicedToArray(_useState5, 2),
     loading = _useState6[0],
-    setLoading = _useState6[1];
+    _setLoading = _useState6[1];
 
   // Column visibility state
   var _useState7 = React.useState(function () {
@@ -3964,10 +4064,26 @@ var Table = function Table(_ref) {
     columnsState = _useState8[0],
     setColumnsState = _useState8[1];
   React.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
@@ -3998,7 +4114,7 @@ var Table = function Table(_ref) {
     _useState16 = _slicedToArray(_useState15, 2),
     expandedRows = _useState16[0],
     setExpandedRows = _useState16[1];
-  var _useState17 = React.useState(1),
+  var _useState17 = React.useState(typeof pageNumber === "number" ? pageNumber : 1),
     _useState18 = _slicedToArray(_useState17, 2),
     currentPage = _useState18[0],
     setCurrentPage = _useState18[1];
@@ -4027,34 +4143,43 @@ var Table = function Table(_ref) {
     _useState28 = _slicedToArray(_useState27, 2),
     openActionKey = _useState28[0],
     setOpenActionKey = _useState28[1];
-  var openRef = React.useRef(null);
+  React.useEffect(function () {
+    if (typeof pageNumber === "number" && pageNumber !== currentPage) {
+      setCurrentPage(pageNumber);
+      onPageChange === null || onPageChange === void 0 || onPageChange(pageNumber);
+    }
+  }, [pageNumber, currentPage, onPageChange]);
+  React.useEffect(function () {
+    setLimit(pageSize);
+  }, [pageSize]);
 
-  // Check if mobile view
+  // Check if mobile view with debouncing
   React.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);
-  };
-  var setDataForExternal = function setDataForExternal(newData) {
-    if (isValidList(newData)) setTableData(newData);else setTableData([]);
-  };
 
   // Close column menu when clicking outside
   React.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);
       }
     };
@@ -4064,26 +4189,32 @@ var Table = function Table(_ref) {
     };
   }, [showColumnMenu]);
 
-  // Close per-row actionmenu when clicking outside
-  React.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 = React.useMemo(function () {
     return columnsState.filter(function (col) {
       return col.isVisible !== false;
     });
   }, [columnsState]);
-  var toggleColumnVisibility = function toggleColumnVisibility(key) {
+
+  // Memoize actions
+  var actionsToUse = React.useMemo(function () {
+    return actions !== null && actions !== void 0 ? actions : DEFAULT_ACTIONS;
+  }, [actions]);
+
+  // Memoize visible count
+  var visibleCount = React.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 = React.useMemo(function () {
+    var map = new Map();
+    filteredData.forEach(function (row, i) {
+      map.set(getRowKey(row, i), row);
+    });
+    return map;
+  }, [filteredData]);
+  var toggleColumnVisibility = React.useCallback(function (key) {
     setColumnsState(function (prev) {
       return prev.map(function (c) {
         return c.key === key ? _objectSpread$9(_objectSpread$9({}, c), {}, {
@@ -4092,127 +4223,73 @@ var Table = function Table(_ref) {
       });
     });
     setCurrentPage(1);
-  };
+  }, []);
 
   // Handle actions
-  var handleOnAction = function handleOnAction(action, row) {
+  var handleOnAction = React.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.createElement(PenSquare, {
-      size: 16
-    })
-  }, {
-    name: "delete",
-    label: "Delete",
-    onClick: function onClick() {
-      console.log("Delete action clicked");
-    },
-    icon: /*#__PURE__*/React.createElement(Trash, {
-      size: 16
-    })
-  }, {
-    name: "view",
-    label: "View",
-    onClick: function onClick() {
-      console.log("View action clicked");
-    },
-    icon: /*#__PURE__*/React.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 = React.useMemo(function () {
-    if (!sortConfig.key) return tableData;
+    if (serverSide || !sortConfig.key) return tableData;
     var key = sortConfig.key,
       direction = sortConfig.direction;
     return _toConsumableArray$1(tableData).sort(function (a, b) {
-      var aValue = a === null || a === void 0 ? void 0 : a[key];
-      var bValue = b === null || b === void 0 ? void 0 : b[key];
-      if (aValue == null && bValue == null) return 0;
-      if (aValue == null) return direction === "asc" ? -1 : 1;
-      if (bValue == null) return direction === "asc" ? 1 : -1;
-      if (typeof aValue === "number" && typeof bValue === "number") {
-        return direction === "asc" ? aValue - bValue : bValue - aValue;
-      }
-      var aStr = String(aValue).toLowerCase();
-      var bStr = String(bValue).toLowerCase();
-      if (aStr < bStr) return direction === "asc" ? -1 : 1;
-      if (aStr > bStr) return direction === "asc" ? 1 : -1;
-      return 0;
+      var av = a === null || a === void 0 ? void 0 : a[key];
+      var bv = b === null || b === void 0 ? void 0 : b[key];
+      if (av == null || bv == null) return 0;
+      if (typeof av === "number") return direction === "asc" ? av - bv : bv - av;
+      return direction === "asc" ? String(av).localeCompare(String(bv)) : String(bv).localeCompare(String(av));
     });
-  }, [tableData, sortConfig]);
+  }, [tableData, sortConfig, serverSide]);
 
   // Filtering
   var filteredData = React.useMemo(function () {
-    if (!filterable || Object.keys(filters).length === 0) return sortedData;
-    var globalQuery = String(filters.global || "").trim().toLowerCase();
+    if (serverSide || !filterable || !Object.keys(filters).length) return sortedData;
+    var q = (filters.global || "").toLowerCase();
     return sortedData.filter(function (row) {
-      // Per-column filters
-      var perColumnOk = Object.entries(filters).every(function (_ref2) {
-        var _ref3 = _slicedToArray(_ref2, 2),
-          key = _ref3[0],
-          value = _ref3[1];
-        if (key === "global") return true;
-        if (!value) return true;
-        var cell = row === null || row === void 0 ? void 0 : row[key];
-        if (cell == null) return false;
-        return String(cell).toLowerCase().includes(String(value).toLowerCase());
+      return Object.values(row || {}).some(function (v) {
+        return String(v).toLowerCase().includes(q);
       });
-      if (!perColumnOk) return false;
-
-      // Global filter
-      if (globalQuery) {
-        var matchesVisible = visibleColumns.some(function (col) {
-          var v = row === null || row === void 0 ? void 0 : row[col.key];
-          if (v == null) return false;
-          return String(v).toLowerCase().includes(globalQuery);
-        });
-        if (matchesVisible) return true;
-        return Object.values(row || {}).some(function (v) {
-          return v != null ? String(v).toLowerCase().includes(globalQuery) : false;
-        });
-      }
-      return true;
     });
-  }, [sortedData, filters, filterable, visibleColumns]);
+  }, [sortedData, filters, filterable, serverSide]);
 
-  // Pagination indices
-  var startIndex = pagination ? (currentPage - 1) * limit : 0;
-  var endIndex = pagination ? startIndex + limit : filteredData.length;
+  // Pagination indices - memoized
+  var _useMemo = React.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 = React.useMemo(function () {
-    if (!pagination) return filteredData;
-    return filteredData.slice(startIndex, endIndex);
-  }, [filteredData, startIndex, endIndex, pagination]);
-  var totalPages = Math.max(1, Math.ceil(filteredData.length / limit));
+    if (!pagination || serverSide) return filteredData;
+    var start = (currentPage - 1) * limit;
+    return filteredData.slice(start, start + limit);
+  }, [filteredData, pagination, serverSide, currentPage, limit]);
+  var totalPages = React.useMemo(function () {
+    if (!pagination) return 1;
+    return serverSide ? Math.max(1, Math.ceil((totalRecords || 0) / limit)) : Math.max(1, Math.ceil(filteredData.length / limit));
+  }, [pagination, serverSide, totalRecords, filteredData.length, limit]);
 
   // Sorting handler
-  var handleSort = function handleSort(key) {
+  var handleSort = React.useCallback(function (key) {
     if (!sortable) return;
     var direction = sortConfig.key === key && sortConfig.direction === "asc" ? "desc" : "asc";
     setSortConfig({
@@ -4220,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 = React.useCallback(function () {
     var newSelection = new Set(selectedRows);
     var pageRowKeys = paginatedData.map(function (r, i) {
       return getRowKey(r, startIndex + i);
@@ -4241,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 = React.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 = React.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);
+    setExpandedRows(function (prev) {
+      var newExpanded = new Set(prev);
+      if (newExpanded.has(key)) newExpanded["delete"](key);else newExpanded.add(key);
+      return newExpanded;
+    });
+  }, [startIndex]);
+  var handleFilter = React.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;
+    });
     setCurrentPage(1);
-  };
-  var renderCell = function renderCell(column, row, globalIndex) {
+  }, [onFilter, onFilterChange]);
+  var renderCell = React.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 = React.useCallback(function (e, actionCellKey, row) {
     e.stopPropagation();
     if (actionAnchor && actionAnchor.key === actionCellKey) {
       setOpenActionKey(null);
@@ -4297,7 +4369,7 @@ var Table = function Table(_ref) {
         row: row
       });
     }
-  };
+  }, [actionAnchor]);
   React.useEffect(function () {
     if (!actionAnchor) return;
     var onDocClick = function onDocClick(ev) {
@@ -4321,58 +4393,139 @@ var Table = function Table(_ref) {
       window.removeEventListener("resize", onScrollResize);
     };
   }, [actionAnchor]);
+
+  // Track previous fetch params to prevent unnecessary calls
+  var prevFetchParamsRef = React.useRef(null);
+  var isFetchingRef = React.useRef(false);
+  var isMountedRef = React.useRef(true);
+  var onFetchRef = React.useRef(onFetch);
+
+  // Keep ref in sync with onFetch
   React.useEffect(function () {
-    if (!onFetch) return;
-    onFetch({
-      setData: setDataForExternal,
+    onFetchRef.current = onFetch;
+  }, [onFetch]);
+
+  // Track mount status
+  React.useEffect(function () {
+    isMountedRef.current = true;
+    return function () {
+      isMountedRef.current = false;
+      isFetchingRef.current = false;
+    };
+  }, []);
+
+  // Serialize fetch params for comparison
+  var fetchParams = React.useMemo(function () {
+    return {
       filters: filters,
-      setLoading: setLoading,
-      pagination: {
-        currentPage: currentPage,
-        limit: limit,
-        totalPages: totalPages,
-        nextRecords: paginatedData
-      }
-    });
-  }, [filters, currentPage, limit]);
+      page: currentPage,
+      limit: limit,
+      sortKey: sortConfig.key,
+      sortDirection: sortConfig.direction
+    };
+  }, [filters, currentPage, limit, sortConfig.key, sortConfig.direction]);
+  var fetchParamsString = React.useMemo(function () {
+    return JSON.stringify(fetchParams);
+  }, [fetchParams]);
+
+  // Consolidated data sync effect
   React.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;
+        currentOnFetch({
+          setData: function setData(rows) {
+            // Only update if component is still mounted
+            if (isMountedRef.current && isFetchingRef.current) {
+              setTableData(Array.isArray(rows) ? rows : []);
+              isFetchingRef.current = false;
+            }
+          },
+          setLoading: function setLoading(loading) {
+            // Only update if component is still mounted
+            if (isMountedRef.current) {
+              _setLoading(loading);
+              if (!loading && isFetchingRef.current) {
+                isFetchingRef.current = false;
+              }
+            }
+          },
+          filters: fetchParams.filters,
+          page: fetchParams.page,
+          limit: fetchParams.limit,
+          sort: {
+            key: fetchParams.sortKey,
+            direction: fetchParams.sortDirection
+          }
+        });
+      }
+    } else if (!serverSide && Array.isArray(data)) {
+      setTableData(data);
+    }
+  }, [serverSide, data, fetchParamsString, fetchParams]);
 
   // Global search
   React.useEffect(function () {
     setSearchInput(filters.global || "");
   }, [filters.global]);
-  var applyGlobalSearch = function applyGlobalSearch() {
+  var applyGlobalSearch = React.useCallback(function () {
     handleFilter("global", searchInput);
-  };
-  var onGlobalKeyDown = function onGlobalKeyDown(e) {
+  }, [handleFilter, searchInput]);
+  var onGlobalKeyDown = React.useCallback(function (e) {
     if (e.key === "Enter") {
       e.preventDefault();
       applyGlobalSearch();
     }
-  };
-  React.useEffect(function () {
-    setLimit(pageSize);
-  }, [pageSize]);
-  var handleLimitChange = function handleLimitChange(nextLimit) {
+  }, [applyGlobalSearch]);
+  var handleLimitChange = React.useCallback(function (nextLimit) {
     var parsed = Number(nextLimit);
     if (!Number.isFinite(parsed) || parsed <= 0) return;
     setLimit(parsed);
+    setCurrentPage(1);
     onLimitChange === null || onLimitChange === void 0 || onLimitChange(parsed);
-  };
+  }, [onLimitChange]);
 
-  // Render mobile card
-  var renderMobileCard = function renderMobileCard(row, rowIndexInPage) {
+  // Memoize limit options
+  var limitOptionsMemo = React.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 = React.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 = React.useCallback(function (row, rowIndexInPage) {
+    var _getRowMetadata = getRowMetadata(row, rowIndexInPage),
+      globalIndex = _getRowMetadata.globalIndex,
+      key = _getRowMetadata.key,
+      actionCellKey = _getRowMetadata.actionCellKey;
+      _getRowMetadata.extraRowClass;
+      var stripeBg = _getRowMetadata.stripeBg;
     return /*#__PURE__*/React.createElement("div", {
       key: key,
       style: stripeBg ? {
@@ -4439,16 +4592,15 @@ var Table = function Table(_ref) {
     }), document.body))), /*#__PURE__*/React.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.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.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.createElement("div", {
@@ -4460,7 +4612,7 @@ 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]);
 
   // Render mobile filters
   var renderMobileFilters = function renderMobileFilters() {
@@ -4528,23 +4680,11 @@ var Table = function Table(_ref) {
     htmlFor: "pagination-limit",
     className: "text-sm text-gray-600 whitespace-nowrap"
   }, "Show"), /*#__PURE__*/React.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.createElement("p", {
     className: "text-sm text-gray-600 whitespace-nowrap"
@@ -4701,7 +4841,7 @@ var Table = function Table(_ref) {
     }, /*#__PURE__*/React.createElement("input", {
       type: "text",
       placeholder: "Filter ".concat(column.label),
-      className: "w-full rounded-md border border-gray-300 px-3 py-1.5 text-sm",
+      className: "w-full rounded-md border border-gray-300 px-3 py-1.5 text-sm font-normal",
       value: filters[column.key] || "",
       onChange: function onChange(e) {
         return handleFilter(column.key, e.target.value);
@@ -4716,33 +4856,16 @@ var Table = function Table(_ref) {
   }, loading ? /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
     colSpan: visibleCount,
     className: "px-6 py-8 text-center"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "flex flex-col items-center gap-2"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "h-6 w-6 animate-spin rounded-full border-2 border-primary-600 border-t-transparent"
-  }), /*#__PURE__*/React.createElement("span", {
-    className: "text-sm text-gray-500"
-  }, "Loading...")))) : paginatedData.length === 0 ? /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
+  }, /*#__PURE__*/React.createElement(LoadingState, null))) : paginatedData.length === 0 ? /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
     colSpan: visibleCount,
     className: "px-6 py-8 text-center"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "flex flex-col items-center gap-2"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "text-gray-400"
-  }, /*#__PURE__*/React.createElement(List, {
-    className: "h-8 w-8"
-  })), /*#__PURE__*/React.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.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.createElement(React.Fragment, {
       key: key
     }, /*#__PURE__*/React.createElement("tr", {
@@ -4752,7 +4875,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);
       }
@@ -4780,16 +4903,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.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.createElement("td", {
       className: "px-4 py-4 text-sm text-right",
@@ -4832,23 +4954,9 @@ var Table = function Table(_ref) {
     className: "p-4"
   }, loading ? /*#__PURE__*/React.createElement("div", {
     className: "py-8 text-center"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "flex flex-col items-center gap-2"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "h-6 w-6 animate-spin rounded-full border-2 border-primary-600 border-t-transparent"
-  }), /*#__PURE__*/React.createElement("span", {
-    className: "text-sm text-gray-500"
-  }, "Loading..."))) : paginatedData.length === 0 ? /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(LoadingState, null)) : paginatedData.length === 0 ? /*#__PURE__*/React.createElement("div", {
     className: "py-8 text-center"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "flex flex-col items-center gap-2"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "text-gray-400"
-  }, /*#__PURE__*/React.createElement(List, {
-    className: "h-8 w-8"
-  })), /*#__PURE__*/React.createElement("span", {
-    className: "text-sm text-gray-500"
-  }, "No results found."))) : paginatedData.map(function (row, rowIndexInPage) {
+  }, /*#__PURE__*/React.createElement(EmptyState, null)) : paginatedData.map(function (row, rowIndexInPage) {
     return renderMobileCard(row, rowIndexInPage);
   })), pagination && /*#__PURE__*/React.createElement("div", {
     className: "p-4 border-t"
@@ -4868,19 +4976,7 @@ var Table = function Table(_ref) {
     }
   }, "Previous"), /*#__PURE__*/React.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.createElement("button", {
       key: pageNum,
       className: cn$1("h-8 w-8 rounded-lg md:rounded-md text-sm", {
@@ -4901,29 +4997,31 @@ var Table = function Table(_ref) {
     }
   }, "Next")))));
 };
-function ActionMenuPortal(_ref4) {
-  var anchorElem = _ref4.anchorElem,
-    anchorRow = _ref4.anchorRow,
-    _ref4$actions = _ref4.actions,
-    actions = _ref4$actions === void 0 ? [] : _ref4$actions;
-    _ref4.onClose;
-    var onAction = _ref4.onAction,
-    menuRef = _ref4.menuRef;
+
+// 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,
+    _ref2$actions = _ref2.actions,
+    actions = _ref2$actions === void 0 ? [] : _ref2$actions;
+    _ref2.onClose;
+    var onAction = _ref2.onAction,
+    menuRef = _ref2.menuRef;
   var _useState29 = React.useState({
       left: 0,
       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() {
@@ -4935,17 +5033,17 @@ function ActionMenuPortal(_ref4) {
     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.
@@ -4962,23 +5060,23 @@ function ActionMenuPortal(_ref4) {
     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";
 
@@ -4988,7 +5086,7 @@ function ActionMenuPortal(_ref4) {
       top: top,
       transformOrigin: transformOrigin,
       maxHeight: allowedMaxHeight,
-      width: menuWidth,
+      width: MENU_WIDTH,
       opacity: 1
     });
   };