@dreamtree-org/twreact-ui 1.0.87 → 1.0.89

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, useCallback, memo, useLayoutEffect, createContext, useContext, cloneElement, PureComponent } from 'react';
+import * as React$1 from 'react';
+import React__default, { forwardRef, createElement, useId, useRef, useState, useEffect, useImperativeHandle, useMemo, memo, useLayoutEffect, useCallback, createContext, useContext, cloneElement, PureComponent } from 'react';
 import ReactDOM, { createPortal } from 'react-dom';
 
 function _extends() {
@@ -3346,8 +3346,8 @@ function _defineProperty$4(e, r, t) {
 }
 
 var _excluded$l = ["options", "value", "onChange", "placeholder", "label", "error", "disabled", "required", "multiSelect", "searchable", "grouped", "onMenuItemRender", "className", "allowClear", "creatable", "onCreateOption", "onSearch", "loading", "selectAllOption", "closeOnSelect", "maxTagCount", "renderGroupLabel", "name"];
-function ownKeys$a(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$a(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$a(Object(t), true).forEach(function (r) { _defineProperty$4(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$a(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$b(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$b(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$b(Object(t), true).forEach(function (r) { _defineProperty$4(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$b(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 
 /**
  * Enhanced Select component (debounce removed)
@@ -3370,7 +3370,7 @@ var flattenGroups = function flattenGroups() {
   return groups.reduce(function (acc, g) {
     var groupLabel = g.label;
     g.options.forEach(function (opt) {
-      return acc.push(_objectSpread$a(_objectSpread$a({}, opt), {}, {
+      return acc.push(_objectSpread$b(_objectSpread$b({}, opt), {}, {
         _group: groupLabel
       }));
     });
@@ -3460,7 +3460,7 @@ var Select = /*#__PURE__*/React__default.forwardRef(function (_ref, forwardedRef
   var flatOptions = useMemo(function () {
     if (grouped) return flattenGroups(options);
     return options.map(function (opt) {
-      return _objectSpread$a({}, opt);
+      return _objectSpread$b({}, opt);
     });
   }, [options, grouped]);
   var selectedValues = multiSelect ? Array.isArray(value) ? value : [] : value;
@@ -3487,7 +3487,7 @@ var Select = /*#__PURE__*/React__default.forwardRef(function (_ref, forwardedRef
     }
     if (grouped) {
       return options.map(function (g) {
-        return _objectSpread$a(_objectSpread$a({}, g), {}, {
+        return _objectSpread$b(_objectSpread$b({}, g), {}, {
           options: g.options.filter(function (o) {
             return o.label.toLowerCase().includes(searchTerm.toLowerCase());
           })
@@ -3714,7 +3714,7 @@ var Select = /*#__PURE__*/React__default.forwardRef(function (_ref, forwardedRef
         className: "text-xs border border-slate-200 p-0.5 rounded-md cursor-pointer hover:bg-gray-100",
         onClick: function onClick() {
           return setCollapsedGroups(function (prev) {
-            return _objectSpread$a(_objectSpread$a({}, prev), {}, _defineProperty$4({}, group.label, !prev[group.label]));
+            return _objectSpread$b(_objectSpread$b({}, prev), {}, _defineProperty$4({}, group.label, !prev[group.label]));
           });
         }
       }, /*#__PURE__*/React__default.createElement(ChevronDown, {
@@ -3901,18 +3901,13 @@ var Select = /*#__PURE__*/React__default.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", "serverSide", "totalRecords", "pageNumber"];
-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; }
-
-// Move static default actions outside component to prevent recreation
 var DEFAULT_ACTIONS = [{
   name: "edit",
   label: "Edit",
   onClick: function onClick() {
     return console.log("Edit action clicked");
   },
-  icon: /*#__PURE__*/React__default.createElement(PenSquare, {
+  icon: /*#__PURE__*/React.createElement(PenSquare, {
     size: 16
   })
 }, {
@@ -3921,7 +3916,7 @@ var DEFAULT_ACTIONS = [{
   onClick: function onClick() {
     return console.log("Delete action clicked");
   },
-  icon: /*#__PURE__*/React__default.createElement(Trash, {
+  icon: /*#__PURE__*/React.createElement(Trash, {
     size: 16
   })
 }, {
@@ -3930,12 +3925,50 @@ var DEFAULT_ACTIONS = [{
   onClick: function onClick() {
     return console.log("View action clicked");
   },
-  icon: /*#__PURE__*/React__default.createElement(Eye, {
+  icon: /*#__PURE__*/React.createElement(Eye, {
     size: 16
   })
 }];
 
-// Simple inline action menu component (no portal)
+/**
+ * Generate a unique key for a row based on id, _id, or index
+ */
+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);
+};
+
+/**
+ * Custom hook to detect clicks outside of specified refs
+ * @param {Array} refs - Array of React refs to check
+ * @param {boolean} isActive - Whether the hook should be active
+ * @param {Function} onClickOutside - Callback when click is detected outside
+ */
+function useClickOutside(refs, isActive, onClickOutside) {
+  useEffect(function () {
+    if (!isActive) return;
+    var handler = function handler(e) {
+      var isOutside = refs.every(function (ref) {
+        return !ref.current || !ref.current.contains(e.target);
+      });
+      if (isOutside) onClickOutside();
+    };
+    document.addEventListener("mousedown", handler, true);
+    return function () {
+      return document.removeEventListener("mousedown", handler, true);
+    };
+  }, [refs, isActive, onClickOutside]);
+}
+
+function ownKeys$a(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$a(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$a(Object(t), true).forEach(function (r) { _defineProperty$4(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$a(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+
+/**
+ * Action menu dropdown component for table row actions
+ * Uses fixed positioning with smart placement above/below anchor
+ */
 var ActionMenu = /*#__PURE__*/memo(function ActionMenu(_ref) {
   var _ref$actions = _ref.actions,
     actions = _ref$actions === void 0 ? [] : _ref$actions,
@@ -3952,12 +3985,10 @@ var ActionMenu = /*#__PURE__*/memo(function ActionMenu(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     pos = _useState2[0],
     setPos = _useState2[1];
-
-  // compute position after mount / when anchor changes
   useLayoutEffect(function () {
     if (!anchorEl || !(menuRef !== null && menuRef !== void 0 && menuRef.current) || typeof window === "undefined") {
       setPos(function (p) {
-        return _objectSpread$9(_objectSpread$9({}, p), {}, {
+        return _objectSpread$a(_objectSpread$a({}, p), {}, {
           visibility: "hidden"
         });
       });
@@ -3965,30 +3996,29 @@ var ActionMenu = /*#__PURE__*/memo(function ActionMenu(_ref) {
     }
     var menu = menuRef.current;
     var rect = anchorEl.getBoundingClientRect();
-    var menuWidth = menu.offsetWidth || 176; // w-44 ~ 176px fallback
+    var menuWidth = menu.offsetWidth || 176;
     var menuHeight = menu.offsetHeight || menu.scrollHeight || 200;
     var viewportWidth = window.innerWidth;
     var viewportHeight = window.innerHeight;
     var scrollX = window.scrollX || window.pageXOffset || 0;
     var scrollY = window.scrollY || window.pageYOffset || 0;
-
-    // prefer placing below the button
     var preferBelowTop = rect.bottom + scrollY + 6;
     var preferAboveTop = rect.top + scrollY - menuHeight - 6;
 
-    // compute left so right-aligned to the button's right edge
+    // Calculate horizontal position
     var left = rect.right + scrollX - menuWidth;
     if (left < 8) left = 8;
-    if (left + menuWidth > viewportWidth - 8) left = Math.max(8, viewportWidth - menuWidth - 8);
+    if (left + menuWidth > viewportWidth - 8) {
+      left = Math.max(8, viewportWidth - menuWidth - 8);
+    }
 
-    // choose top based on available space
+    // Calculate vertical position
     var top;
     if (preferBelowTop + menuHeight <= scrollY + viewportHeight - 8) {
       top = preferBelowTop;
     } else if (preferAboveTop >= scrollY + 8) {
       top = preferAboveTop;
     } else {
-      // fallback: clamp inside viewport
       top = Math.max(scrollY + 8, Math.min(preferBelowTop, scrollY + viewportHeight - menuHeight - 8));
     }
     setPos({
@@ -4004,7 +4034,7 @@ var ActionMenu = /*#__PURE__*/memo(function ActionMenu(_ref) {
       top: pos.top,
       left: pos.left,
       visibility: pos.visibility,
-      minWidth: 176 // match w-44 fallback
+      minWidth: 176
     },
     onClick: function onClick(e) {
       return e.stopPropagation();
@@ -4030,240 +4060,703 @@ var ActionMenu = /*#__PURE__*/memo(function ActionMenu(_ref) {
   })));
 });
 
-// Custom hook for click-outside detection (consolidates 3 handlers into 1)
-function useClickOutside(refs, isActive, onClickOutside) {
-  useEffect(function () {
-    if (!isActive) return;
-    var handler = function handler(e) {
-      var isOutside = refs.every(function (ref) {
-        return !ref.current || !ref.current.contains(e.target);
-      });
-      if (isOutside) onClickOutside();
-    };
+/**
+ * Pagination controls component for the table
+ * Supports both header (icon-only) and footer (with page numbers) variants
+ */
 
-    // Use capture phase to ensure we handle clicks before they bubble
-    document.addEventListener("mousedown", handler, true);
-    return function () {
-      return document.removeEventListener("mousedown", handler, true);
-    };
-  }, [refs, isActive, onClickOutside]);
+// Header pagination (compact, icon-based)
+function PaginationHeader(_ref) {
+  var currentPage = _ref.currentPage,
+    totalPages = _ref.totalPages,
+    onPageChange = _ref.onPageChange;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "flex items-center gap-1"
+  }, totalPages >= 4 && /*#__PURE__*/React__default.createElement("button", {
+    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 onPageChange(1);
+    },
+    "aria-label": "First page"
+  }, /*#__PURE__*/React__default.createElement(ChevronsLeft, {
+    className: "size-4 md:size-5 text-gray-800"
+  })), /*#__PURE__*/React__default.createElement("button", {
+    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 onPageChange(Math.max(1, currentPage - 1));
+    },
+    "aria-label": "Previous page"
+  }, /*#__PURE__*/React__default.createElement(ChevronLeft, {
+    className: "size-4 md:size-5 text-gray-800"
+  })), /*#__PURE__*/React__default.createElement("button", {
+    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 onPageChange(Math.min(totalPages, currentPage + 1));
+    },
+    "aria-label": "Next page"
+  }, /*#__PURE__*/React__default.createElement(ChevronRight, {
+    className: "size-4 md:size-5 text-gray-800"
+  })), totalPages >= 4 && /*#__PURE__*/React__default.createElement("button", {
+    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 onPageChange(totalPages);
+    },
+    "aria-label": "Last page"
+  }, /*#__PURE__*/React__default.createElement(ChevronsRight, {
+    className: "size-4 md:size-5 text-gray-800"
+  })));
 }
 
-// Helper to get row key - stable function
-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);
-};
-var Table = function Table(_ref2) {
-  var _ref2$data = _ref2.data,
-    data = _ref2$data === void 0 ? [] : _ref2$data,
-    _ref2$columns = _ref2.columns,
-    columns = _ref2$columns === void 0 ? [] : _ref2$columns,
-    _ref2$sortable = _ref2.sortable,
-    sortable = _ref2$sortable === void 0 ? true : _ref2$sortable,
-    _ref2$filterable = _ref2.filterable,
-    filterable = _ref2$filterable === void 0 ? false : _ref2$filterable,
-    _ref2$selectable = _ref2.selectable,
-    selectable = _ref2$selectable === void 0 ? false : _ref2$selectable,
-    _ref2$pagination = _ref2.pagination,
-    pagination = _ref2$pagination === void 0 ? false : _ref2$pagination,
-    _ref2$pageSize = _ref2.pageSize,
-    pageSize = _ref2$pageSize === void 0 ? 25 : _ref2$pageSize,
-    onSort = _ref2.onSort,
-    onFilter = _ref2.onFilter,
-    onFetch = _ref2.onFetch,
-    onFilterChange = _ref2.onFilterChange,
-    onSelectionChange = _ref2.onSelectionChange,
-    onRowClick = _ref2.onRowClick,
-    _ref2$hasDetails = _ref2.hasDetails,
-    hasDetails = _ref2$hasDetails === void 0 ? false : _ref2$hasDetails,
-    _ref2$DetailsComponen = _ref2.DetailsComponent,
-    DetailsComponent = _ref2$DetailsComponen === void 0 ? null : _ref2$DetailsComponen,
-    className = _ref2.className,
-    _ref2$withAction = _ref2.withAction,
-    withAction = _ref2$withAction === void 0 ? true : _ref2$withAction,
-    onAction = _ref2.onAction,
-    actions = _ref2.actions,
-    _ref2$showSerial = _ref2.showSerial,
-    showSerial = _ref2$showSerial === void 0 ? true : _ref2$showSerial,
-    cellClass = _ref2.cellClass,
-    rowClass = _ref2.rowClass,
-    _ref2$globalSearch = _ref2.globalSearch,
-    globalSearch = _ref2$globalSearch === void 0 ? false : _ref2$globalSearch,
-    _ref2$limitOptions = _ref2.limitOptions,
-    limitOptions = _ref2$limitOptions === void 0 ? [10, 25, 50, 100] : _ref2$limitOptions,
-    _ref2$showLimitSelect = _ref2.showLimitSelector,
-    showLimitSelector = _ref2$showLimitSelect === void 0 ? true : _ref2$showLimitSelect,
-    onLimitChange = _ref2.onLimitChange,
-    _ref2$showReloadButto = _ref2.showReloadButton,
-    showReloadButton = _ref2$showReloadButto === void 0 ? true : _ref2$showReloadButto,
-    renderReloadButton = _ref2.renderReloadButton,
-    onReload = _ref2.onReload,
-    _ref2$stripedRows = _ref2.stripedRows,
-    stripedRows = _ref2$stripedRows === void 0 ? true : _ref2$stripedRows,
-    _ref2$stripedColors = _ref2.stripedColors,
-    stripedColors = _ref2$stripedColors === void 0 ? ["#ffffff", "#f7fafc"] : _ref2$stripedColors,
-    _ref2$responsiveBreak = _ref2.responsiveBreakpoint,
-    responsiveBreakpoint = _ref2$responsiveBreak === void 0 ? 768 : _ref2$responsiveBreak,
-    _ref2$serverSide = _ref2.serverSide,
-    serverSide = _ref2$serverSide === void 0 ? false : _ref2$serverSide,
-    _ref2$totalRecords = _ref2.totalRecords,
-    totalRecords = _ref2$totalRecords === void 0 ? 0 : _ref2$totalRecords,
-    pageNumber = _ref2.pageNumber,
-    props = _objectWithoutProperties$1(_ref2, _excluded$k);
-  // Core state
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    isMobileView = _useState4[0],
-    setIsMobileView = _useState4[1];
-  var _useState5 = useState(function () {
-      return Array.isArray(data) ? data : [];
-    }),
-    _useState6 = _slicedToArray(_useState5, 2),
-    tableData = _useState6[0],
-    setTableData = _useState6[1];
-  var _useState7 = useState(false),
-    _useState8 = _slicedToArray(_useState7, 2),
-    loading = _useState8[0],
-    setLoading = _useState8[1];
-  var _useState9 = useState(pageSize),
-    _useState0 = _slicedToArray(_useState9, 2),
-    limit = _useState0[0],
-    setLimit = _useState0[1];
-  var _useState1 = useState(function () {
-      return typeof pageNumber === "number" ? pageNumber : 1;
-    }),
-    _useState10 = _slicedToArray(_useState1, 2),
-    currentPage = _useState10[0],
-    setCurrentPage = _useState10[1];
-
-  // Column state
-  var _useState11 = useState(function () {
-      return Array.isArray(columns) ? columns.map(function (c) {
-        return _objectSpread$9({}, c);
-      }) : [];
-    }),
-    _useState12 = _slicedToArray(_useState11, 2),
-    columnsState = _useState12[0],
-    setColumnsState = _useState12[1];
-  var _useState13 = useState(false),
-    _useState14 = _slicedToArray(_useState13, 2),
-    showColumnMenu = _useState14[0],
-    setShowColumnMenu = _useState14[1];
-
-  // Sorting/filtering state
-  var _useState15 = useState({
-      key: null,
-      direction: "asc"
-    }),
-    _useState16 = _slicedToArray(_useState15, 2),
-    sortConfig = _useState16[0],
-    setSortConfig = _useState16[1];
-  var _useState17 = useState({}),
-    _useState18 = _slicedToArray(_useState17, 2),
-    filters = _useState18[0],
-    setFilters = _useState18[1];
-  var _useState19 = useState(""),
-    _useState20 = _slicedToArray(_useState19, 2),
-    searchInput = _useState20[0],
-    setSearchInput = _useState20[1];
-
-  // Selection/expansion state
-  var _useState21 = useState(function () {
-      return new Set();
-    }),
-    _useState22 = _slicedToArray(_useState21, 2),
-    selectedRows = _useState22[0],
-    setSelectedRows = _useState22[1];
-  var _useState23 = useState(function () {
-      return new Set();
-    }),
-    _useState24 = _slicedToArray(_useState23, 2),
-    expandedRows = _useState24[0],
-    setExpandedRows = _useState24[1];
-
-  // Action menu state - simplified to just store the clicked row key
-  var _useState25 = useState(null),
-    _useState26 = _slicedToArray(_useState25, 2),
-    activeActionRowKey = _useState26[0],
-    setActiveActionRowKey = _useState26[1];
-  var _useState27 = useState(false),
-    _useState28 = _slicedToArray(_useState27, 2),
-    showMobileFilters = _useState28[0],
-    setShowMobileFilters = _useState28[1];
-
-  // Refs
-  var columnMenuRef = useRef(null);
-  var columnToggleBtnRef = useRef(null);
-  var actionMenuRef = useRef(null);
-  var actionButtonRefs = useRef({});
-
-  // Actions to use (memoized)
-  var actionsToUse = useMemo(function () {
-    return actions !== undefined ? actions : DEFAULT_ACTIONS;
-  }, [actions]);
-
-  // Sync external props
-  useEffect(function () {
-    if (typeof pageNumber === "number" && pageNumber !== currentPage) {
-      setCurrentPage(pageNumber);
+// Footer pagination (with page numbers)
+function PaginationFooter(_ref2) {
+  var currentPage = _ref2.currentPage,
+    totalPages = _ref2.totalPages,
+    onPageChange = _ref2.onPageChange,
+    isMobileView = _ref2.isMobileView;
+  var visiblePageCount = isMobileView ? 5 : 3;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "p-4 border-t"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "flex flex-col sm:flex-row items-center justify-between gap-3"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "text-sm text-gray-600"
+  }, "Page ", currentPage, " of ", totalPages), /*#__PURE__*/React__default.createElement("div", {
+    className: "flex items-center gap-1 sm:gap-2"
+  }, totalPages >= 4 && /*#__PURE__*/React__default.createElement("button", {
+    className: cn$1("rounded-lg md:rounded-md border border-gray-300 disabled:opacity-50 hover:bg-gray-50", isMobileView ? "p-2" : "px-4 py-2 text-sm"),
+    disabled: currentPage === 1,
+    onClick: function onClick() {
+      return onPageChange(1);
+    },
+    "aria-label": "First page"
+  }, isMobileView ? /*#__PURE__*/React__default.createElement(ChevronsLeft, {
+    className: "size-4 text-gray-800"
+  }) : "First"), /*#__PURE__*/React__default.createElement("button", {
+    className: cn$1("rounded-lg md:rounded-md border border-gray-300 disabled:opacity-50 hover:bg-gray-50", isMobileView ? "p-2" : "px-4 py-2 text-sm"),
+    disabled: currentPage === 1,
+    onClick: function onClick() {
+      return onPageChange(Math.max(1, currentPage - 1));
+    },
+    "aria-label": "Previous page"
+  }, isMobileView ? /*#__PURE__*/React__default.createElement(ChevronLeft, {
+    className: "size-4 text-gray-800"
+  }) : "Previous"), /*#__PURE__*/React__default.createElement("div", {
+    className: "flex items-center gap-1"
+  }, Array.from({
+    length: Math.min(visiblePageCount, 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;
     }
-  }, [pageNumber]); // eslint-disable-line react-hooks/exhaustive-deps
-
-  useEffect(function () {
-    setLimit(pageSize);
-  }, [pageSize]);
-  useEffect(function () {
-    setColumnsState(Array.isArray(columns) ? columns.map(function (c) {
-      return _objectSpread$9({}, c);
-    }) : []);
-  }, [columns]);
+    return /*#__PURE__*/React__default.createElement("button", {
+      key: pageNum,
+      className: cn$1("h-8 w-8 rounded-lg md:rounded-md text-sm", {
+        "bg-primary-600 text-white": pageNum === currentPage,
+        "border border-gray-300 hover:bg-gray-50": pageNum !== currentPage
+      }),
+      onClick: function onClick() {
+        return onPageChange(pageNum);
+      }
+    }, pageNum);
+  })), /*#__PURE__*/React__default.createElement("button", {
+    className: cn$1("rounded-lg md:rounded-md border border-gray-300 disabled:opacity-50 hover:bg-gray-50", isMobileView ? "p-2" : "px-4 py-2 text-sm"),
+    disabled: currentPage === totalPages,
+    onClick: function onClick() {
+      return onPageChange(Math.min(totalPages, currentPage + 1));
+    },
+    "aria-label": "Next page"
+  }, isMobileView ? /*#__PURE__*/React__default.createElement(ChevronRight, {
+    className: "size-4 text-gray-800"
+  }) : "Next"), totalPages >= 4 && /*#__PURE__*/React__default.createElement("button", {
+    className: cn$1("rounded-lg md:rounded-md border border-gray-300 disabled:opacity-50 hover:bg-gray-50", isMobileView ? "p-2" : "px-4 py-2 text-sm"),
+    disabled: currentPage === totalPages,
+    onClick: function onClick() {
+      return onPageChange(totalPages);
+    },
+    "aria-label": "Last page"
+  }, isMobileView ? /*#__PURE__*/React__default.createElement(ChevronsRight, {
+    className: "size-4 text-gray-800"
+  }) : "Last"))));
+}
 
-  // Single effect for data sync (consolidated from 3 effects)
-  useEffect(function () {
-    if (Array.isArray(data)) {
-      setTableData(data);
+/**
+ * Column visibility toggle menu
+ */
+function ColumnMenu(_ref) {
+  var columns = _ref.columns,
+    onToggle = _ref.onToggle,
+    menuRef = _ref.menuRef;
+  return /*#__PURE__*/React__default.createElement("div", {
+    ref: menuRef,
+    className: "absolute right-4 mt-2 w-56 z-50 bg-white rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 p-3 lg:block sm:block hidden",
+    onClick: function onClick(e) {
+      return e.stopPropagation();
     }
-  }, [data]);
-
-  // Mobile view detection
-  useEffect(function () {
-    var checkMobile = function checkMobile() {
-      return setIsMobileView(window.innerWidth < responsiveBreakpoint);
-    };
-    checkMobile();
-    window.addEventListener("resize", checkMobile);
-    return function () {
-      return window.removeEventListener("resize", checkMobile);
-    };
-  }, [responsiveBreakpoint]);
+  }, /*#__PURE__*/React__default.createElement("p", {
+    className: "text-sm font-medium text-center mb-2"
+  }, "Show / hide columns"), /*#__PURE__*/React__default.createElement("div", {
+    className: "max-h-56 overflow-auto"
+  }, columns.map(function (col) {
+    return /*#__PURE__*/React__default.createElement("label", {
+      key: col.key,
+      className: "flex cursor-pointer items-center gap-2 px-2 py-1.5 hover:bg-gray-50 rounded"
+    }, /*#__PURE__*/React__default.createElement("input", {
+      type: "checkbox",
+      checked: col.isVisible !== false,
+      onChange: function onChange() {
+        return onToggle(col.key);
+      },
+      className: "rounded"
+    }), /*#__PURE__*/React__default.createElement("span", {
+      className: "text-sm font-normal"
+    }, col.label));
+  })));
+}
 
-  // Click-outside handlers (using consolidated hook)
-  var closeColumnMenu = useCallback(function () {
-    return setShowColumnMenu(false);
-  }, []);
-  var closeActionMenu = useCallback(function () {
-    return setActiveActionRowKey(null);
-  }, []);
+/**
+ * Mobile-specific filters panel
+ */
+function MobileFilters(_ref) {
+  var showMobileFilters = _ref.showMobileFilters,
+    setShowMobileFilters = _ref.setShowMobileFilters,
+    globalSearch = _ref.globalSearch,
+    searchInput = _ref.searchInput,
+    setSearchInput = _ref.setSearchInput,
+    onGlobalKeyDown = _ref.onGlobalKeyDown,
+    filterable = _ref.filterable,
+    visibleColumns = _ref.visibleColumns,
+    filters = _ref.filters,
+    handleFilter = _ref.handleFilter;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "mb-4 p-3 bg-gray-50 rounded-lg"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "flex items-center justify-between mb-3"
+  }, /*#__PURE__*/React__default.createElement("h3", {
+    className: "text-sm font-medium text-gray-700"
+  }, "Filters"), /*#__PURE__*/React__default.createElement("button", {
+    onClick: function onClick() {
+      return setShowMobileFilters(function (s) {
+        return !s;
+      });
+    },
+    className: "text-xs text-gray-500 hover:text-gray-700"
+  }, showMobileFilters ? "Hide" : "Show")), showMobileFilters && /*#__PURE__*/React__default.createElement("div", {
+    className: "space-y-3"
+  }, globalSearch && /*#__PURE__*/React__default.createElement("div", {
+    className: "relative"
+  }, /*#__PURE__*/React__default.createElement("input", {
+    type: "text",
+    placeholder: "Search...",
+    className: "w-full rounded-md border border-gray-300 px-4 py-2 text-sm",
+    value: searchInput,
+    onChange: function onChange(e) {
+      return setSearchInput(e.target.value);
+    },
+    onKeyDown: onGlobalKeyDown
+  }), /*#__PURE__*/React__default.createElement(Search, {
+    className: "absolute right-3 top-2.5 h-4 w-4 text-gray-400"
+  })), filterable && visibleColumns.map(function (column) {
+    return /*#__PURE__*/React__default.createElement("div", {
+      key: column.key
+    }, /*#__PURE__*/React__default.createElement("label", {
+      className: "block text-xs font-medium text-gray-600 mb-1"
+    }, column.label), /*#__PURE__*/React__default.createElement("input", {
+      type: "text",
+      placeholder: "Filter ".concat(column.label),
+      className: "w-full rounded-md border border-gray-300 px-3 py-2 text-sm",
+      value: filters[column.key] || "",
+      onChange: function onChange(e) {
+        return handleFilter(column.key, e.target.value);
+      }
+    }));
+  })));
+}
+
+/**
+ * Desktop table row component
+ */
+function TableRow(_ref) {
+  var row = _ref.row,
+    rowIndexInPage = _ref.rowIndexInPage,
+    startIndex = _ref.startIndex,
+    selectedRows = _ref.selectedRows,
+    expandedRows = _ref.expandedRows,
+    rowClass = _ref.rowClass,
+    stripedRows = _ref.stripedRows,
+    stripedColors = _ref.stripedColors,
+    onRowClick = _ref.onRowClick,
+    hasDetails = _ref.hasDetails,
+    showSerial = _ref.showSerial,
+    selectable = _ref.selectable,
+    visibleColumns = _ref.visibleColumns,
+    cellClass = _ref.cellClass,
+    withAction = _ref.withAction,
+    visibleCount = _ref.visibleCount,
+    DetailsComponent = _ref.DetailsComponent,
+    actionsToUse = _ref.actionsToUse,
+    activeActionRowKey = _ref.activeActionRowKey,
+    activeAnchorEl = _ref.activeAnchorEl,
+    actionButtonRefs = _ref.actionButtonRefs,
+    actionMenuRef = _ref.actionMenuRef,
+    toggleExpandRow = _ref.toggleExpandRow,
+    handleSelectRow = _ref.handleSelectRow,
+    toggleActions = _ref.toggleActions,
+    handleOnAction = _ref.handleOnAction,
+    closeActionMenu = _ref.closeActionMenu,
+    renderCell = _ref.renderCell;
+  var globalIndex = startIndex + rowIndexInPage;
+  var key = getRowKey(row, globalIndex);
+  var actionCellKey = "actions-".concat(key);
+  var isSelected = selectedRows.has(key);
+  var isExpanded = expandedRows.has(key);
+  var extraRowClass = typeof rowClass === "function" ? rowClass({
+    row: row,
+    rowIndex: globalIndex
+  }) : "";
+  var safeExtraRowClass = typeof extraRowClass === "string" ? extraRowClass.trim() : "";
+  var stripeBg = stripedRows && !isSelected ? stripedColors[globalIndex % stripedColors.length] : undefined;
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
+    key: key
+  }, /*#__PURE__*/React__default.createElement("tr", {
+    style: stripeBg ? {
+      backgroundColor: stripeBg
+    } : undefined,
+    className: cn$1("hover:bg-gray-50", {
+      "cursor-pointer": !!onRowClick,
+      "bg-primary-50": isSelected
+    }, safeExtraRowClass),
+    onClick: function onClick() {
+      return onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(row, globalIndex);
+    }
+  }, hasDetails && /*#__PURE__*/React__default.createElement("td", {
+    className: "px-4 py-4 text-sm"
+  }, /*#__PURE__*/React__default.createElement("button", {
+    onClick: function onClick(e) {
+      e.stopPropagation();
+      toggleExpandRow(row, rowIndexInPage);
+    },
+    "aria-expanded": isExpanded,
+    className: "p-1 rounded hover:bg-gray-100"
+  }, isExpanded ? "▾" : "▸")), showSerial && /*#__PURE__*/React__default.createElement("td", {
+    className: "px-4 py-4 whitespace-nowrap text-sm text-gray-900"
+  }, globalIndex + 1), selectable && /*#__PURE__*/React__default.createElement("td", {
+    className: "px-6 py-4",
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    }
+  }, /*#__PURE__*/React__default.createElement("input", {
+    type: "checkbox",
+    className: "rounded border-gray-300",
+    checked: isSelected,
+    onChange: function onChange() {
+      return handleSelectRow(row, rowIndexInPage);
+    }
+  })), visibleColumns.map(function (column, columnIndex) {
+    var extraCellClass = typeof cellClass === "function" ? cellClass({
+      row: row,
+      rowIndex: globalIndex,
+      column: column,
+      columnIndex: columnIndex
+    }) : "";
+    var safeExtraCellClass = typeof extraCellClass === "string" ? extraCellClass.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)
+    }, renderCell(column, row, globalIndex));
+  }), /*#__PURE__*/React__default.createElement("td", {
+    className: "px-4 py-4"
+  }), withAction && /*#__PURE__*/React__default.createElement("td", {
+    className: "px-4 py-4 text-sm text-right",
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    }
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "relative inline-block"
+  }, /*#__PURE__*/React__default.createElement("button", {
+    ref: function ref(el) {
+      if (el) {
+        actionButtonRefs.current[actionCellKey] = el;
+      }
+    },
+    onClick: function onClick(e) {
+      return toggleActions(e, actionCellKey, row);
+    },
+    "aria-expanded": activeActionRowKey === actionCellKey,
+    className: "p-1 rounded hover:bg-gray-100",
+    title: "Actions"
+  }, /*#__PURE__*/React__default.createElement(MoreVertical, {
+    className: "h-4 w-4"
+  })), activeActionRowKey === actionCellKey && /*#__PURE__*/React__default.createElement(ActionMenu, {
+    actions: actionsToUse,
+    row: row,
+    onAction: function onAction(action) {
+      return handleOnAction(action, row);
+    },
+    menuRef: actionMenuRef,
+    anchorEl: activeAnchorEl,
+    onClose: closeActionMenu
+  })))), hasDetails && isExpanded && DetailsComponent && /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("td", {
+    colSpan: visibleCount,
+    className: "px-6 py-4 bg-gray-50"
+  }, /*#__PURE__*/React__default.createElement(DetailsComponent, {
+    row: row,
+    index: globalIndex
+  }))));
+}
+
+/**
+ * Mobile card view for a single table row
+ */
+function MobileCard(_ref) {
+  var row = _ref.row,
+    rowIndexInPage = _ref.rowIndexInPage,
+    startIndex = _ref.startIndex,
+    selectedRows = _ref.selectedRows,
+    expandedRows = _ref.expandedRows,
+    rowClass = _ref.rowClass,
+    stripedRows = _ref.stripedRows,
+    stripedColors = _ref.stripedColors,
+    onRowClick = _ref.onRowClick,
+    hasDetails = _ref.hasDetails,
+    selectable = _ref.selectable,
+    showSerial = _ref.showSerial,
+    withAction = _ref.withAction,
+    visibleColumns = _ref.visibleColumns,
+    cellClass = _ref.cellClass,
+    DetailsComponent = _ref.DetailsComponent,
+    actionsToUse = _ref.actionsToUse,
+    activeActionRowKey = _ref.activeActionRowKey,
+    activeAnchorEl = _ref.activeAnchorEl,
+    actionButtonRefs = _ref.actionButtonRefs,
+    actionMenuRef = _ref.actionMenuRef,
+    toggleExpandRow = _ref.toggleExpandRow,
+    handleSelectRow = _ref.handleSelectRow,
+    toggleActions = _ref.toggleActions,
+    handleOnAction = _ref.handleOnAction,
+    closeActionMenu = _ref.closeActionMenu,
+    renderCell = _ref.renderCell;
+  var globalIndex = startIndex + rowIndexInPage;
+  var key = getRowKey(row, globalIndex);
+  var actionCellKey = "actions-".concat(key);
+  var isSelected = selectedRows.has(key);
+  var isExpanded = expandedRows.has(key);
+  var extraRowClass = typeof rowClass === "function" ? rowClass({
+    row: row,
+    rowIndex: globalIndex
+  }) : "";
+  var safeExtraRowClass = typeof extraRowClass === "string" ? extraRowClass.trim() : "";
+  var stripeBg = stripedRows && !isSelected ? stripedColors[globalIndex % stripedColors.length] : undefined;
+  return /*#__PURE__*/React__default.createElement("div", {
+    key: key,
+    style: stripeBg ? {
+      backgroundColor: stripeBg
+    } : undefined,
+    className: cn$1("border rounded-lg mb-3 shadow-sm overflow-hidden transition-all duration-200", {
+      "cursor-pointer": !!onRowClick,
+      "bg-primary-50 border-primary-200": isSelected,
+      "hover:shadow-md": !isSelected
+    }, safeExtraRowClass),
+    onClick: function onClick() {
+      return onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(row, globalIndex);
+    }
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "flex items-center justify-between p-4 border-b bg-gray-50"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "flex items-center gap-3"
+  }, hasDetails && /*#__PURE__*/React__default.createElement("button", {
+    onClick: function onClick(e) {
+      e.stopPropagation();
+      toggleExpandRow(row, rowIndexInPage);
+    },
+    "aria-expanded": isExpanded,
+    className: "p-1 rounded hover:bg-gray-200"
+  }, isExpanded ? "▾" : "▸"), selectable && /*#__PURE__*/React__default.createElement("input", {
+    type: "checkbox",
+    className: "rounded border-gray-300 h-4 w-4",
+    checked: isSelected,
+    onChange: function onChange(e) {
+      e.stopPropagation();
+      handleSelectRow(row, rowIndexInPage);
+    },
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    }
+  }), showSerial && /*#__PURE__*/React__default.createElement("span", {
+    className: "text-sm font-medium text-gray-600"
+  }, "#", globalIndex + 1)), withAction && /*#__PURE__*/React__default.createElement("div", {
+    className: "relative"
+  }, /*#__PURE__*/React__default.createElement("button", {
+    ref: function ref(el) {
+      if (el) {
+        actionButtonRefs.current[actionCellKey] = el;
+      }
+    },
+    onClick: function onClick(e) {
+      return toggleActions(e, actionCellKey, row);
+    },
+    "aria-expanded": activeActionRowKey === actionCellKey,
+    className: "p-1.5 rounded hover:bg-gray-200",
+    title: "Actions"
+  }, /*#__PURE__*/React__default.createElement(MoreVertical, {
+    className: "h-4 w-4"
+  })), activeActionRowKey === actionCellKey && /*#__PURE__*/React__default.createElement(ActionMenu, {
+    actions: actionsToUse,
+    row: row,
+    onAction: function onAction(action) {
+      return handleOnAction(action, row);
+    },
+    menuRef: actionMenuRef,
+    anchorEl: activeAnchorEl,
+    onClose: closeActionMenu
+  }))), /*#__PURE__*/React__default.createElement("div", {
+    className: "p-4"
+  }, visibleColumns.map(function (column, colIndex) {
+    var extraCellClass = typeof cellClass === "function" ? cellClass({
+      row: row,
+      rowIndex: globalIndex,
+      column: column,
+      columnIndex: colIndex
+    }) : "";
+    var safeExtraCellClass = typeof extraCellClass === "string" ? extraCellClass.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)
+    }, /*#__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", {
+      className: "text-sm text-gray-900 sm:w-2/3 sm:pl-2 break-words"
+    }, renderCell(column, row, globalIndex)));
+  })), hasDetails && isExpanded && DetailsComponent && /*#__PURE__*/React__default.createElement("div", {
+    className: "border-t bg-gray-50 p-4"
+  }, /*#__PURE__*/React__default.createElement(DetailsComponent, {
+    row: row,
+    index: globalIndex
+  })));
+}
+
+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", "TheadComponent", "TfootComponent"];
+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; }
+var DEFAULT_DATA = [];
+var DEFAULT_COLUMNS = [];
+var Table = function Table(_ref) {
+  var _ref$data = _ref.data,
+    initialData = _ref$data === void 0 ? DEFAULT_DATA : _ref$data,
+    _ref$columns = _ref.columns,
+    initialColumns = _ref$columns === void 0 ? DEFAULT_COLUMNS : _ref$columns,
+    _ref$sortable = _ref.sortable,
+    sortable = _ref$sortable === void 0 ? true : _ref$sortable,
+    _ref$filterable = _ref.filterable,
+    filterable = _ref$filterable === void 0 ? false : _ref$filterable,
+    _ref$selectable = _ref.selectable,
+    selectable = _ref$selectable === void 0 ? false : _ref$selectable,
+    _ref$pagination = _ref.pagination,
+    pagination = _ref$pagination === void 0 ? false : _ref$pagination,
+    _ref$pageSize = _ref.pageSize,
+    pageSize = _ref$pageSize === void 0 ? 25 : _ref$pageSize,
+    onSort = _ref.onSort,
+    onFilter = _ref.onFilter,
+    onFetch = _ref.onFetch,
+    onFilterChange = _ref.onFilterChange,
+    onSelectionChange = _ref.onSelectionChange,
+    onRowClick = _ref.onRowClick,
+    _ref$hasDetails = _ref.hasDetails,
+    hasDetails = _ref$hasDetails === void 0 ? false : _ref$hasDetails,
+    _ref$DetailsComponent = _ref.DetailsComponent,
+    DetailsComponent = _ref$DetailsComponent === void 0 ? null : _ref$DetailsComponent,
+    className = _ref.className,
+    _ref$withAction = _ref.withAction,
+    withAction = _ref$withAction === void 0 ? true : _ref$withAction,
+    onAction = _ref.onAction,
+    actions = _ref.actions,
+    _ref$showSerial = _ref.showSerial,
+    showSerial = _ref$showSerial === void 0 ? true : _ref$showSerial,
+    cellClass = _ref.cellClass,
+    rowClass = _ref.rowClass,
+    _ref$globalSearch = _ref.globalSearch,
+    globalSearch = _ref$globalSearch === void 0 ? false : _ref$globalSearch,
+    _ref$limitOptions = _ref.limitOptions,
+    limitOptions = _ref$limitOptions === void 0 ? [10, 25, 50, 100] : _ref$limitOptions,
+    _ref$showLimitSelecto = _ref.showLimitSelector,
+    showLimitSelector = _ref$showLimitSelecto === void 0 ? true : _ref$showLimitSelecto,
+    onLimitChange = _ref.onLimitChange,
+    _ref$showReloadButton = _ref.showReloadButton,
+    showReloadButton = _ref$showReloadButton === void 0 ? true : _ref$showReloadButton,
+    renderReloadButton = _ref.renderReloadButton,
+    onReload = _ref.onReload,
+    _ref$stripedRows = _ref.stripedRows,
+    stripedRows = _ref$stripedRows === void 0 ? true : _ref$stripedRows,
+    _ref$stripedColors = _ref.stripedColors,
+    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,
+    _ref$TheadComponent = _ref.TheadComponent,
+    TheadComponent = _ref$TheadComponent === void 0 ? null : _ref$TheadComponent,
+    _ref$TfootComponent = _ref.TfootComponent,
+    TfootComponent = _ref$TfootComponent === void 0 ? null : _ref$TfootComponent,
+    props = _objectWithoutProperties$1(_ref, _excluded$k);
+  // State
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isMobileView = _useState2[0],
+    setIsMobileView = _useState2[1];
+  var _useState3 = useState(function () {
+      return Array.isArray(initialData) ? initialData : [];
+    }),
+    _useState4 = _slicedToArray(_useState3, 2),
+    tableData = _useState4[0],
+    setTableData = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    loading = _useState6[0],
+    _setLoading = _useState6[1];
+  var _useState7 = useState(pageSize),
+    _useState8 = _slicedToArray(_useState7, 2),
+    limit = _useState8[0],
+    setLimit = _useState8[1];
+  var _useState9 = useState(function () {
+      return typeof pageNumber === "number" ? pageNumber : 1;
+    }),
+    _useState0 = _slicedToArray(_useState9, 2),
+    currentPage = _useState0[0],
+    setCurrentPage = _useState0[1];
+  var _useState1 = useState(function () {
+      return Array.isArray(initialColumns) ? initialColumns.map(function (c) {
+        return _objectSpread$9({}, c);
+      }) : [];
+    }),
+    _useState10 = _slicedToArray(_useState1, 2),
+    columnsState = _useState10[0],
+    setColumnsState = _useState10[1];
+  var _useState11 = useState(false),
+    _useState12 = _slicedToArray(_useState11, 2),
+    showColumnMenu = _useState12[0],
+    setShowColumnMenu = _useState12[1];
+  var _useState13 = useState({
+      key: null,
+      direction: "asc"
+    }),
+    _useState14 = _slicedToArray(_useState13, 2),
+    sortConfig = _useState14[0],
+    setSortConfig = _useState14[1];
+  var _useState15 = useState({}),
+    _useState16 = _slicedToArray(_useState15, 2),
+    filters = _useState16[0],
+    setFilters = _useState16[1];
+  var _useState17 = useState(""),
+    _useState18 = _slicedToArray(_useState17, 2),
+    searchInput = _useState18[0],
+    setSearchInput = _useState18[1];
+  var _useState19 = useState(function () {
+      return new Set();
+    }),
+    _useState20 = _slicedToArray(_useState19, 2),
+    selectedRows = _useState20[0],
+    setSelectedRows = _useState20[1];
+  var _useState21 = useState(function () {
+      return new Set();
+    }),
+    _useState22 = _slicedToArray(_useState21, 2),
+    expandedRows = _useState22[0],
+    setExpandedRows = _useState22[1];
+  var _useState23 = useState(null),
+    _useState24 = _slicedToArray(_useState23, 2),
+    activeActionRowKey = _useState24[0],
+    setActiveActionRowKey = _useState24[1];
+  var _useState25 = useState(false),
+    _useState26 = _slicedToArray(_useState25, 2),
+    showMobileFilters = _useState26[0],
+    setShowMobileFilters = _useState26[1];
+
+  // Refs
+  var columnMenuRef = useRef(null);
+  var columnToggleBtnRef = useRef(null);
+  var actionMenuRef = useRef(null);
+  var actionButtonRefs = useRef({});
+
+  // Memoized values
+  var actionsToUse = useMemo(function () {
+    return actions !== undefined ? actions : DEFAULT_ACTIONS;
+  }, [actions]);
+
+  // Refs for stable initial values
+  var initialPageNumber = useRef(pageNumber);
+  var initialColumnsRef = useRef(initialColumns);
+  var initialDataRef = useRef(initialData);
+  useEffect(function () {
+    setLimit(pageSize);
+  }, [pageSize]);
+  useEffect(function () {
+    var isNotInitialPageNumber = typeof pageNumber === "number" && pageNumber !== initialPageNumber.current;
+    var isNotCurrentPage = typeof pageNumber === "number" && pageNumber !== currentPage;
+    if (isNotInitialPageNumber && isNotCurrentPage) {
+      setCurrentPage(pageNumber);
+      initialPageNumber.current = pageNumber;
+    } else if (isNotCurrentPage) {
+      setCurrentPage(pageNumber);
+    }
+  }, [pageNumber]);
+  useEffect(function () {
+    if (initialColumns !== initialColumnsRef.current) {
+      setColumnsState(Array.isArray(initialColumns) ? initialColumns.map(function (c) {
+        return _objectSpread$9({}, c);
+      }) : []);
+      initialColumnsRef.current = initialColumns;
+    }
+  }, [initialColumns]);
+  useEffect(function () {
+    if (initialData !== initialDataRef.current && Array.isArray(initialData)) {
+      setTableData(initialData);
+      initialDataRef.current = initialData;
+    }
+  }, [initialData]);
+  useEffect(function () {
+    var checkMobile = function checkMobile() {
+      return setIsMobileView(window.innerWidth < responsiveBreakpoint);
+    };
+    checkMobile();
+    window.addEventListener("resize", checkMobile);
+    return function () {
+      return window.removeEventListener("resize", checkMobile);
+    };
+  }, [responsiveBreakpoint]);
+
+  // Click-outside handlers
+  var closeColumnMenu = useCallback(function () {
+    return setShowColumnMenu(false);
+  }, []);
+  var closeActionMenu = useCallback(function () {
+    return setActiveActionRowKey(null);
+  }, []);
   useClickOutside([columnMenuRef, columnToggleBtnRef], showColumnMenu, closeColumnMenu);
   useClickOutside([actionMenuRef], activeActionRowKey !== null, closeActionMenu);
 
-  // Get active anchor element
+  // Computed values
   var activeAnchorEl = useMemo(function () {
     if (activeActionRowKey === null) return null;
     return actionButtonRefs.current[activeActionRowKey];
   }, [activeActionRowKey]);
-
-  // Visible columns (memoized)
   var visibleColumns = useMemo(function () {
     return columnsState.filter(function (col) {
       return col.isVisible !== false;
     });
   }, [columnsState]);
-
-  // Sorted data (memoized)
   var sortedData = useMemo(function () {
     if (serverSide || !sortConfig.key) return tableData;
     var key = sortConfig.key,
@@ -4278,8 +4771,6 @@ var Table = function Table(_ref2) {
       return direction === "asc" ? String(av).localeCompare(String(bv)) : String(bv).localeCompare(String(av));
     });
   }, [tableData, sortConfig, serverSide]);
-
-  // Filtered data (memoized)
   var filteredData = useMemo(function () {
     if (serverSide || !filterable || !Object.keys(filters).length) return sortedData;
     var q = (filters.global || "").toLowerCase();
@@ -4289,8 +4780,6 @@ var Table = function Table(_ref2) {
       });
     });
   }, [sortedData, filters, filterable, serverSide]);
-
-  // Pagination calculations (memoized)
   var _useMemo = useMemo(function () {
       var start = pagination ? (currentPage - 1) * limit : 0;
       var end = pagination ? start + limit : filteredData.length;
@@ -4307,22 +4796,31 @@ var Table = function Table(_ref2) {
     endIndex = _useMemo.endIndex,
     paginatedData = _useMemo.paginatedData,
     totalPages = _useMemo.totalPages;
-
-  // Column count for colspan (memoized)
   var visibleCount = useMemo(function () {
     return (showSerial ? 1 : 0) + visibleColumns.length + (selectable ? 1 : 0) + (hasDetails ? 1 : 0) + (withAction ? 1 : 0) + 1;
-  },
-  // column toggler
-  [showSerial, visibleColumns.length, selectable, hasDetails, withAction]);
-
-  // Row key map for selection (memoized per filtered data)
+  }, [showSerial, visibleColumns.length, selectable, hasDetails, withAction]);
   var rowKeyMap = useMemo(function () {
     return new Map(filteredData.map(function (r, i) {
       return [getRowKey(r, i), r];
     }));
   }, [filteredData]);
+  var allPageSelected = useMemo(function () {
+    if (paginatedData.length === 0) return false;
+    return paginatedData.every(function (r, i) {
+      return selectedRows.has(getRowKey(r, startIndex + i));
+    });
+  }, [paginatedData, selectedRows, startIndex]);
+  var limitOptionsForSelect = 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]);
 
-  // Callbacks (memoized to prevent child re-renders)
+  // Callbacks
   var toggleColumnVisibility = useCallback(function (key) {
     setColumnsState(function (prev) {
       return prev.map(function (c) {
@@ -4370,8 +4868,6 @@ var Table = function Table(_ref2) {
           return newSelection.add(k);
         });
       }
-
-      // Notify parent
       var selectedData = Array.from(newSelection).map(function (k) {
         return rowKeyMap.get(k);
       }).filter(Boolean);
@@ -4411,17 +4907,15 @@ var Table = function Table(_ref2) {
   }, [startIndex]);
   var toggleActions = useCallback(function (e, actionCellKey, row) {
     e.stopPropagation();
-    e.preventDefault(); // Prevent default to avoid any other click handlers
-
-    // Store the button reference
+    e.preventDefault();
     if (e.currentTarget) {
       actionButtonRefs.current[actionCellKey] = e.currentTarget;
     }
     setActiveActionRowKey(function (prev) {
       if (prev === actionCellKey) {
-        return null; // Close if clicking same button
+        return null;
       }
-      return actionCellKey; // Open new menu
+      return actionCellKey;
     });
   }, []);
   var handleOnAction = useCallback(function (action, row) {
@@ -4455,306 +4949,68 @@ var Table = function Table(_ref2) {
   var handlePageChange = useCallback(function (newPage) {
     setCurrentPage(newPage);
   }, []);
+  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];
+  }, []);
 
   // Data fetching effect
   useEffect(function () {
     if (!onFetch) return;
+    var mounted = true;
     onFetch({
       setData: function setData(rows) {
-        return setTableData(Array.isArray(rows) ? rows : []);
+        if (mounted) setTableData(Array.isArray(rows) ? rows : []);
+      },
+      setLoading: function setLoading(v) {
+        if (mounted) _setLoading(v);
       },
-      setLoading: setLoading,
       filters: filters,
       page: currentPage,
       limit: limit,
       sort: sortConfig
     });
-  }, [onFetch, filters, currentPage, limit, sortConfig]);
-
-  // Sync searchInput with filters.global
+    return function () {
+      mounted = false;
+    };
+  }, [filters, currentPage, limit, sortConfig]);
   useEffect(function () {
     setSearchInput(filters.global || "");
   }, [filters.global]);
 
-  // Render cell helper
-  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];
-  }, []);
-
-  // Render mobile card
-  var renderMobileCard = useCallback(function (row, rowIndexInPage) {
-    var globalIndex = startIndex + rowIndexInPage;
-    var key = getRowKey(row, globalIndex);
-    var actionCellKey = "actions-".concat(key);
-    var isSelected = selectedRows.has(key);
-    var isExpanded = expandedRows.has(key);
-    var extraRowClass = typeof rowClass === "function" ? rowClass({
-      row: row,
-      rowIndex: globalIndex
-    }) : "";
-    var safeExtraRowClass = typeof extraRowClass === "string" ? extraRowClass.trim() : "";
-    var stripeBg = stripedRows && !isSelected ? stripedColors[globalIndex % stripedColors.length] : undefined;
-    return /*#__PURE__*/React__default.createElement("div", {
-      key: key,
-      style: stripeBg ? {
-        backgroundColor: stripeBg
-      } : undefined,
-      className: cn$1("border rounded-lg mb-3 shadow-sm overflow-hidden transition-all duration-200", {
-        "cursor-pointer": !!onRowClick,
-        "bg-primary-50 border-primary-200": isSelected,
-        "hover:shadow-md": !isSelected
-      }, safeExtraRowClass),
-      onClick: function onClick() {
-        return onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(row, globalIndex);
-      }
-    }, /*#__PURE__*/React__default.createElement("div", {
-      className: "flex items-center justify-between p-4 border-b bg-gray-50"
-    }, /*#__PURE__*/React__default.createElement("div", {
-      className: "flex items-center gap-3"
-    }, hasDetails && /*#__PURE__*/React__default.createElement("button", {
-      onClick: function onClick(e) {
-        e.stopPropagation();
-        toggleExpandRow(row, rowIndexInPage);
-      },
-      "aria-expanded": isExpanded,
-      className: "p-1 rounded hover:bg-gray-200"
-    }, isExpanded ? "▾" : "▸"), selectable && /*#__PURE__*/React__default.createElement("input", {
-      type: "checkbox",
-      className: "rounded border-gray-300 h-4 w-4",
-      checked: isSelected,
-      onChange: function onChange(e) {
-        e.stopPropagation();
-        handleSelectRow(row, rowIndexInPage);
-      },
-      onClick: function onClick(e) {
-        return e.stopPropagation();
-      }
-    }), showSerial && /*#__PURE__*/React__default.createElement("span", {
-      className: "text-sm font-medium text-gray-600"
-    }, "#", globalIndex + 1)), withAction && /*#__PURE__*/React__default.createElement("div", {
-      className: "relative"
-    }, /*#__PURE__*/React__default.createElement("button", {
-      ref: function ref(el) {
-        if (el) {
-          actionButtonRefs.current[actionCellKey] = el;
-        }
-      },
-      onClick: function onClick(e) {
-        return toggleActions(e, actionCellKey, row);
-      },
-      "aria-expanded": activeActionRowKey === actionCellKey,
-      className: "p-1.5 rounded hover:bg-gray-200",
-      title: "Actions"
-    }, /*#__PURE__*/React__default.createElement(MoreVertical, {
-      className: "h-4 w-4"
-    })), activeActionRowKey === actionCellKey && /*#__PURE__*/React__default.createElement(ActionMenu, {
-      actions: actionsToUse,
-      row: row,
-      onAction: function onAction(action) {
-        return handleOnAction(action, row);
-      },
-      menuRef: actionMenuRef,
-      anchorEl: activeAnchorEl,
-      onClose: closeActionMenu
-    }))), /*#__PURE__*/React__default.createElement("div", {
-      className: "p-4"
-    }, visibleColumns.map(function (column, colIndex) {
-      var extraCellClass = typeof cellClass === "function" ? cellClass({
-        row: row,
-        rowIndex: globalIndex,
-        column: column,
-        columnIndex: colIndex
-      }) : "";
-      var safeExtraCellClass = typeof extraCellClass === "string" ? extraCellClass.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)
-      }, /*#__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", {
-        className: "text-sm text-gray-900 sm:w-2/3 sm:pl-2 break-words"
-      }, renderCell(column, row, globalIndex)));
-    })), hasDetails && isExpanded && DetailsComponent && /*#__PURE__*/React__default.createElement("div", {
-      className: "border-t bg-gray-50 p-4"
-    }, /*#__PURE__*/React__default.createElement(DetailsComponent, {
-      row: row,
-      index: globalIndex
-    })));
-  }, [startIndex, selectedRows, expandedRows, rowClass, stripedRows, stripedColors, onRowClick, hasDetails, selectable, showSerial, withAction, visibleColumns, cellClass, DetailsComponent, actionsToUse, activeActionRowKey, activeAnchorEl, toggleExpandRow, handleSelectRow, toggleActions, handleOnAction, closeActionMenu, renderCell]);
-
-  // Render mobile filters
-  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", {
-      className: "flex items-center justify-between mb-3"
-    }, /*#__PURE__*/React__default.createElement("h3", {
-      className: "text-sm font-medium text-gray-700"
-    }, "Filters"), /*#__PURE__*/React__default.createElement("button", {
-      onClick: function onClick() {
-        return setShowMobileFilters(function (s) {
-          return !s;
-        });
-      },
-      className: "text-xs text-gray-500 hover:text-gray-700"
-    }, showMobileFilters ? "Hide" : "Show")), showMobileFilters && /*#__PURE__*/React__default.createElement("div", {
-      className: "space-y-3"
-    }, globalSearch && /*#__PURE__*/React__default.createElement("div", {
-      className: "relative"
-    }, /*#__PURE__*/React__default.createElement("input", {
-      type: "text",
-      placeholder: "Search...",
-      className: "w-full rounded-md border border-gray-300 px-4 py-2 text-sm",
-      value: searchInput,
-      onChange: function onChange(e) {
-        return setSearchInput(e.target.value);
-      },
-      onKeyDown: onGlobalKeyDown
-    }), /*#__PURE__*/React__default.createElement(Search, {
-      className: "absolute right-3 top-2.5 h-4 w-4 text-gray-400"
-    })), filterable && visibleColumns.map(function (column) {
-      return /*#__PURE__*/React__default.createElement("div", {
-        key: column.key
-      }, /*#__PURE__*/React__default.createElement("label", {
-        className: "block text-xs font-medium text-gray-600 mb-1"
-      }, column.label), /*#__PURE__*/React__default.createElement("input", {
-        type: "text",
-        placeholder: "Filter ".concat(column.label),
-        className: "w-full rounded-md border border-gray-300 px-3 py-2 text-sm",
-        value: filters[column.key] || "",
-        onChange: function onChange(e) {
-          return handleFilter(column.key, e.target.value);
-        }
-      }));
-    })));
-  }, [showMobileFilters, globalSearch, searchInput, onGlobalKeyDown, filterable, visibleColumns, filters, handleFilter]);
-
-  // Check if all page rows are selected
-  var allPageSelected = useMemo(function () {
-    if (paginatedData.length === 0) return false;
-    return paginatedData.every(function (r, i) {
-      return selectedRows.has(getRowKey(r, startIndex + i));
-    });
-  }, [paginatedData, selectedRows, startIndex]);
-
-  // Limit options for selector
-  var limitOptionsForSelect = 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]);
-
-  // Render desktop table rows
-  var renderDesktopTableRows = useCallback(function () {
-    return paginatedData.map(function (row, rowIndexInPage) {
-      var globalIndex = startIndex + rowIndexInPage;
-      var key = getRowKey(row, globalIndex);
-      var actionCellKey = "actions-".concat(key);
-      var isSelected = selectedRows.has(key);
-      var isExpanded = expandedRows.has(key);
-      var extraRowClass = typeof rowClass === "function" ? rowClass({
-        row: row,
-        rowIndex: globalIndex
-      }) : "";
-      var safeExtraRowClass = typeof extraRowClass === "string" ? extraRowClass.trim() : "";
-      var stripeBg = stripedRows && !isSelected ? stripedColors[globalIndex % stripedColors.length] : undefined;
-      return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
-        key: key
-      }, /*#__PURE__*/React__default.createElement("tr", {
-        style: stripeBg ? {
-          backgroundColor: stripeBg
-        } : undefined,
-        className: cn$1("hover:bg-gray-50", {
-          "cursor-pointer": !!onRowClick,
-          "bg-primary-50": isSelected
-        }, safeExtraRowClass),
-        onClick: function onClick() {
-          return onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(row, globalIndex);
-        }
-      }, hasDetails && /*#__PURE__*/React__default.createElement("td", {
-        className: "px-4 py-4 text-sm"
-      }, /*#__PURE__*/React__default.createElement("button", {
-        onClick: function onClick(e) {
-          e.stopPropagation();
-          toggleExpandRow(row, rowIndexInPage);
-        },
-        "aria-expanded": isExpanded,
-        className: "p-1 rounded hover:bg-gray-100"
-      }, isExpanded ? "▾" : "▸")), showSerial && /*#__PURE__*/React__default.createElement("td", {
-        className: "px-4 py-4 whitespace-nowrap text-sm text-gray-900"
-      }, globalIndex + 1), selectable && /*#__PURE__*/React__default.createElement("td", {
-        className: "px-6 py-4",
-        onClick: function onClick(e) {
-          return e.stopPropagation();
-        }
-      }, /*#__PURE__*/React__default.createElement("input", {
-        type: "checkbox",
-        className: "rounded border-gray-300",
-        checked: isSelected,
-        onChange: function onChange() {
-          return handleSelectRow(row, rowIndexInPage);
-        }
-      })), visibleColumns.map(function (column, columnIndex) {
-        var extraCellClass = typeof cellClass === "function" ? cellClass({
-          row: row,
-          rowIndex: globalIndex,
-          column: column,
-          columnIndex: columnIndex
-        }) : "";
-        var safeExtraCellClass = typeof extraCellClass === "string" ? extraCellClass.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)
-        }, renderCell(column, row, globalIndex));
-      }), /*#__PURE__*/React__default.createElement("td", {
-        className: "px-4 py-4"
-      }), withAction && /*#__PURE__*/React__default.createElement("td", {
-        className: "px-4 py-4 text-sm text-right",
-        onClick: function onClick(e) {
-          return e.stopPropagation();
-        }
-      }, /*#__PURE__*/React__default.createElement("div", {
-        className: "relative inline-block"
-      }, /*#__PURE__*/React__default.createElement("button", {
-        ref: function ref(el) {
-          if (el) {
-            actionButtonRefs.current[actionCellKey] = el;
-          }
-        },
-        onClick: function onClick(e) {
-          return toggleActions(e, actionCellKey, row);
-        },
-        "aria-expanded": activeActionRowKey === actionCellKey,
-        className: "p-1 rounded hover:bg-gray-100",
-        title: "Actions"
-      }, /*#__PURE__*/React__default.createElement(MoreVertical, {
-        className: "h-4 w-4"
-      })), activeActionRowKey === actionCellKey && /*#__PURE__*/React__default.createElement(ActionMenu, {
-        actions: actionsToUse,
-        row: row,
-        onAction: function onAction(action) {
-          return handleOnAction(action, row);
-        },
-        menuRef: actionMenuRef,
-        anchorEl: activeAnchorEl,
-        onClose: closeActionMenu
-      })))), hasDetails && isExpanded && DetailsComponent && /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("td", {
-        colSpan: visibleCount,
-        className: "px-6 py-4 bg-gray-50"
-      }, /*#__PURE__*/React__default.createElement(DetailsComponent, {
-        row: row,
-        index: globalIndex
-      }))));
-    });
-  }, [paginatedData, startIndex, selectedRows, expandedRows, rowClass, stripedRows, stripedColors, onRowClick, hasDetails, showSerial, selectable, visibleColumns, cellClass, withAction, visibleCount, DetailsComponent, actionsToUse, activeActionRowKey, activeAnchorEl, toggleExpandRow, handleSelectRow, toggleActions, handleOnAction, closeActionMenu, renderCell]);
+  // Shared props for row components
+  var rowSharedProps = {
+    selectedRows: selectedRows,
+    expandedRows: expandedRows,
+    rowClass: rowClass,
+    stripedRows: stripedRows,
+    stripedColors: stripedColors,
+    onRowClick: onRowClick,
+    hasDetails: hasDetails,
+    showSerial: showSerial,
+    selectable: selectable,
+    visibleColumns: visibleColumns,
+    cellClass: cellClass,
+    withAction: withAction,
+    DetailsComponent: DetailsComponent,
+    actionsToUse: actionsToUse,
+    activeActionRowKey: activeActionRowKey,
+    activeAnchorEl: activeAnchorEl,
+    actionButtonRefs: actionButtonRefs,
+    actionMenuRef: actionMenuRef,
+    toggleExpandRow: toggleExpandRow,
+    handleSelectRow: handleSelectRow,
+    toggleActions: toggleActions,
+    handleOnAction: handleOnAction,
+    closeActionMenu: closeActionMenu,
+    renderCell: renderCell
+  };
   return /*#__PURE__*/React__default.createElement("div", {
     className: "w-full border rounded-lg md:rounded-md bg-white"
-  }, /*#__PURE__*/React__default.createElement("div", {
+  }, TheadComponent && typeof TheadComponent === "function" ? /*#__PURE__*/React__default.createElement(TheadComponent, {
+    columns: columnsState,
+    data: filteredData
+  }) : TheadComponent, /*#__PURE__*/React__default.createElement("div", {
     className: "flex flex-col md:flex-row justify-between items-start md:items-center gap-3 p-4 border-b"
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "flex flex-col sm:flex-row items-start sm:items-center gap-3 w-full md:w-auto"
@@ -4784,45 +5040,11 @@ var Table = function Table(_ref2) {
     className: "flex flex-col sm:flex-row items-start sm:items-center gap-3 w-full md:w-auto"
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "text-sm text-gray-700 whitespace-nowrap"
-  }, filteredData.length === 0 ? 0 : startIndex + 1, " -", " ", Math.min(endIndex, filteredData.length), " of ", filteredData.length, " ", "results"), pagination && /*#__PURE__*/React__default.createElement("div", {
-    className: "flex items-center gap-1"
-  }, totalPages >= 4 && /*#__PURE__*/React__default.createElement("button", {
-    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 handlePageChange(1);
-    },
-    "aria-label": "First page"
-  }, /*#__PURE__*/React__default.createElement(ChevronsLeft, {
-    className: "size-4 md:size-5 text-gray-800"
-  })), /*#__PURE__*/React__default.createElement("button", {
-    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 handlePageChange(Math.max(1, currentPage - 1));
-    },
-    "aria-label": "Previous page"
-  }, /*#__PURE__*/React__default.createElement(ChevronLeft, {
-    className: "size-4 md:size-5 text-gray-800"
-  })), /*#__PURE__*/React__default.createElement("button", {
-    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 handlePageChange(Math.min(totalPages, currentPage + 1));
-    },
-    "aria-label": "Next page"
-  }, /*#__PURE__*/React__default.createElement(ChevronRight, {
-    className: "size-4 md:size-5 text-gray-800"
-  })), totalPages >= 4 && /*#__PURE__*/React__default.createElement("button", {
-    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 handlePageChange(totalPages);
-    },
-    "aria-label": "Last page"
-  }, /*#__PURE__*/React__default.createElement(ChevronsRight, {
-    className: "size-4 md:size-5 text-gray-800"
-  }))))), globalSearch && /*#__PURE__*/React__default.createElement("div", {
+  }, filteredData.length === 0 ? 0 : startIndex + 1, " -", " ", Math.min(endIndex, filteredData.length), " of ", filteredData.length, " ", "results"), pagination && /*#__PURE__*/React__default.createElement(PaginationHeader, {
+    currentPage: currentPage,
+    totalPages: totalPages,
+    onPageChange: handlePageChange
+  }))), globalSearch && /*#__PURE__*/React__default.createElement("div", {
     className: "p-4 border-b"
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "flex flex-col sm:flex-row items-start sm:items-center gap-2"
@@ -4849,31 +5071,22 @@ var Table = function Table(_ref2) {
       handleFilter("global", "");
     },
     className: "whitespace-nowrap rounded-lg md:rounded-md border border-gray-300 px-4 py-3 md:py-2 text-sm hover:bg-gray-100 w-full sm:w-auto"
-  }, "Clear"))), filterable && isMobileView && renderMobileFilters(), showColumnMenu && /*#__PURE__*/React__default.createElement("div", {
-    ref: columnMenuRef,
-    className: "absolute right-4 mt-2 w-56 z-50 bg-white rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 p-3 lg:block sm:block hidden",
-    onClick: function onClick(e) {
-      return e.stopPropagation();
-    }
-  }, /*#__PURE__*/React__default.createElement("p", {
-    className: "text-sm font-medium text-center mb-2"
-  }, "Show / hide columns"), /*#__PURE__*/React__default.createElement("div", {
-    className: "max-h-56 overflow-auto"
-  }, columnsState.map(function (col) {
-    return /*#__PURE__*/React__default.createElement("label", {
-      key: col.key,
-      className: "flex cursor-pointer items-center gap-2 px-2 py-1.5 hover:bg-gray-50 rounded"
-    }, /*#__PURE__*/React__default.createElement("input", {
-      type: "checkbox",
-      checked: col.isVisible !== false,
-      onChange: function onChange() {
-        return toggleColumnVisibility(col.key);
-      },
-      className: "rounded"
-    }), /*#__PURE__*/React__default.createElement("span", {
-      className: "text-sm font-normal"
-    }, col.label));
-  }))), !isMobileView && /*#__PURE__*/React__default.createElement("div", {
+  }, "Clear"))), filterable && isMobileView && /*#__PURE__*/React__default.createElement(MobileFilters, {
+    showMobileFilters: showMobileFilters,
+    setShowMobileFilters: setShowMobileFilters,
+    globalSearch: globalSearch,
+    searchInput: searchInput,
+    setSearchInput: setSearchInput,
+    onGlobalKeyDown: onGlobalKeyDown,
+    filterable: filterable,
+    visibleColumns: visibleColumns,
+    filters: filters,
+    handleFilter: handleFilter
+  }), showColumnMenu && /*#__PURE__*/React__default.createElement(ColumnMenu, {
+    columns: columnsState,
+    onToggle: toggleColumnVisibility,
+    menuRef: columnMenuRef
+  }), !isMobileView && /*#__PURE__*/React__default.createElement("div", {
     className: "overflow-x-auto"
   }, /*#__PURE__*/React__default.createElement("table", _extends({
     className: cn$1("min-w-full divide-y divide-gray-200", className)
@@ -4975,7 +5188,15 @@ var Table = function Table(_ref2) {
     className: "h-8 w-8"
   })), /*#__PURE__*/React__default.createElement("span", {
     className: "text-sm text-gray-500"
-  }, "No results found.")))) : renderDesktopTableRows()))), isMobileView && /*#__PURE__*/React__default.createElement("div", {
+  }, "No results found.")))) : paginatedData.map(function (row, rowIndexInPage) {
+    return /*#__PURE__*/React__default.createElement(TableRow, _extends({
+      key: getRowKey(row, startIndex + rowIndexInPage),
+      row: row,
+      rowIndexInPage: rowIndexInPage,
+      startIndex: startIndex,
+      visibleCount: visibleCount
+    }, rowSharedProps));
+  })))), isMobileView && /*#__PURE__*/React__default.createElement("div", {
     className: "p-4"
   }, loading ? /*#__PURE__*/React__default.createElement("div", {
     className: "py-8 text-center"
@@ -4996,77 +5217,21 @@ var Table = function Table(_ref2) {
   })), /*#__PURE__*/React__default.createElement("span", {
     className: "text-sm text-gray-500"
   }, "No results found."))) : paginatedData.map(function (row, rowIndexInPage) {
-    return renderMobileCard(row, rowIndexInPage);
-  })), pagination && /*#__PURE__*/React__default.createElement("div", {
-    className: "p-4 border-t"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "flex flex-col sm:flex-row items-center justify-between gap-3"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "text-sm text-gray-600"
-  }, "Page ", currentPage, " of ", totalPages), /*#__PURE__*/React__default.createElement("div", {
-    className: "flex items-center gap-1 sm:gap-2"
-  }, totalPages >= 4 && /*#__PURE__*/React__default.createElement("button", {
-    className: cn$1("rounded-lg md:rounded-md border border-gray-300 disabled:opacity-50 hover:bg-gray-50", isMobileView ? "p-2" : "px-4 py-2 text-sm"),
-    disabled: currentPage === 1,
-    onClick: function onClick() {
-      return handlePageChange(1);
-    },
-    "aria-label": "First page"
-  }, isMobileView ? /*#__PURE__*/React__default.createElement(ChevronsLeft, {
-    className: "size-4 text-gray-800"
-  }) : "First"), /*#__PURE__*/React__default.createElement("button", {
-    className: cn$1("rounded-lg md:rounded-md border border-gray-300 disabled:opacity-50 hover:bg-gray-50", isMobileView ? "p-2" : "px-4 py-2 text-sm"),
-    disabled: currentPage === 1,
-    onClick: function onClick() {
-      return handlePageChange(Math.max(1, currentPage - 1));
-    },
-    "aria-label": "Previous page"
-  }, isMobileView ? /*#__PURE__*/React__default.createElement(ChevronLeft, {
-    className: "size-4 text-gray-800"
-  }) : "Previous"), /*#__PURE__*/React__default.createElement("div", {
-    className: "flex items-center gap-1"
-  }, Array.from({
-    length: Math.min(isMobileView ? 5 : 3, 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;
-    }
-    return /*#__PURE__*/React__default.createElement("button", {
-      key: pageNum,
-      className: cn$1("h-8 w-8 rounded-lg md:rounded-md text-sm", {
-        "bg-primary-600 text-white": pageNum === currentPage,
-        "border border-gray-300 hover:bg-gray-50": pageNum !== currentPage
-      }),
-      onClick: function onClick() {
-        return handlePageChange(pageNum);
-      }
-    }, pageNum);
-  })), /*#__PURE__*/React__default.createElement("button", {
-    className: cn$1("rounded-lg md:rounded-md border border-gray-300 disabled:opacity-50 hover:bg-gray-50", isMobileView ? "p-2" : "px-4 py-2 text-sm"),
-    disabled: currentPage === totalPages,
-    onClick: function onClick() {
-      return handlePageChange(Math.min(totalPages, currentPage + 1));
-    },
-    "aria-label": "Next page"
-  }, isMobileView ? /*#__PURE__*/React__default.createElement(ChevronRight, {
-    className: "size-4 text-gray-800"
-  }) : "Next"), totalPages >= 4 && /*#__PURE__*/React__default.createElement("button", {
-    className: cn$1("rounded-lg md:rounded-md border border-gray-300 disabled:opacity-50 hover:bg-gray-50", isMobileView ? "p-2" : "px-4 py-2 text-sm"),
-    disabled: currentPage === totalPages,
-    onClick: function onClick() {
-      return handlePageChange(totalPages);
-    },
-    "aria-label": "Last page"
-  }, isMobileView ? /*#__PURE__*/React__default.createElement(ChevronsRight, {
-    className: "size-4 text-gray-800"
-  }) : "Last")))));
+    return /*#__PURE__*/React__default.createElement(MobileCard, _extends({
+      key: getRowKey(row, startIndex + rowIndexInPage),
+      row: row,
+      rowIndexInPage: rowIndexInPage,
+      startIndex: startIndex
+    }, rowSharedProps));
+  })), TfootComponent && typeof TfootComponent === "function" ? /*#__PURE__*/React__default.createElement(TfootComponent, {
+    columns: columnsState,
+    data: filteredData
+  }) : TfootComponent, pagination && /*#__PURE__*/React__default.createElement(PaginationFooter, {
+    currentPage: currentPage,
+    totalPages: totalPages,
+    onPageChange: handlePageChange,
+    isMobileView: isMobileView
+  }));
 };
 
 var isCheckBoxInput = (element) => element.type === 'checkbox';
@@ -17595,7 +17760,7 @@ var canUseDOM = () => !!(typeof window !== "undefined" && typeof window.document
 var isDOM = /* @__PURE__ */ canUseDOM();
 var isRunningInReactNative = () => typeof navigator !== "undefined" && navigator.product === "ReactNative";
 var isReactNative = /* @__PURE__ */ isRunningInReactNative();
-var getUseIsomorphicLayoutEffect = () => isDOM || isReactNative ? React.useLayoutEffect : React.useEffect;
+var getUseIsomorphicLayoutEffect = () => isDOM || isReactNative ? React$1.useLayoutEffect : React$1.useEffect;
 var useIsomorphicLayoutEffect = /* @__PURE__ */ getUseIsomorphicLayoutEffect();
 
 // src/components/Context.ts
@@ -17605,17 +17770,17 @@ var gT = typeof globalThis !== "undefined" ? globalThis : (
   {}
 );
 function getContext() {
-  if (!React.createContext) return {};
+  if (!React$1.createContext) return {};
   const contextMap = gT[ContextKey] ??= /* @__PURE__ */ new Map();
-  let realContext = contextMap.get(React.createContext);
+  let realContext = contextMap.get(React$1.createContext);
   if (!realContext) {
-    realContext = React.createContext(
+    realContext = React$1.createContext(
       null
     );
     if (process.env.NODE_ENV !== "production") {
       realContext.displayName = "ReactRedux";
     }
-    contextMap.set(React.createContext, realContext);
+    contextMap.set(React$1.createContext, realContext);
   }
   return realContext;
 }
@@ -17624,7 +17789,7 @@ var ReactReduxContext = /* @__PURE__ */ getContext();
 // src/components/Provider.tsx
 function Provider(providerProps) {
   const { children, context, serverState, store } = providerProps;
-  const contextValue = React.useMemo(() => {
+  const contextValue = React$1.useMemo(() => {
     const subscription = createSubscription(store);
     const baseContextValue = {
       store,
@@ -17641,7 +17806,7 @@ function Provider(providerProps) {
       });
     }
   }, [store, serverState]);
-  const previousState = React.useMemo(() => store.getState(), [store]);
+  const previousState = React$1.useMemo(() => store.getState(), [store]);
   useIsomorphicLayoutEffect(() => {
     const { subscription } = contextValue;
     subscription.onStateChange = subscription.notifyNestedSubs;
@@ -17655,14 +17820,14 @@ function Provider(providerProps) {
     };
   }, [contextValue, previousState]);
   const Context = context || ReactReduxContext;
-  return /* @__PURE__ */ React.createElement(Context.Provider, { value: contextValue }, children);
+  return /* @__PURE__ */ React$1.createElement(Context.Provider, { value: contextValue }, children);
 }
 var Provider_default = Provider;
 
 // src/hooks/useReduxContext.ts
 function createReduxContextHook(context = ReactReduxContext) {
   return function useReduxContext2() {
-    const contextValue = React.useContext(context);
+    const contextValue = React$1.useContext(context);
     if (process.env.NODE_ENV !== "production" && !contextValue) {
       throw new Error(
         "could not find react-redux context value; please ensure the component is wrapped in a <Provider>"
@@ -17723,8 +17888,8 @@ function createSelectorHook(context = ReactReduxContext) {
     }
     const reduxContext = useReduxContext2();
     const { store, subscription, getServerState } = reduxContext;
-    const firstRun = React.useRef(true);
-    const wrappedSelector = React.useCallback(
+    const firstRun = React$1.useRef(true);
+    const wrappedSelector = React$1.useCallback(
       {
         [selector.name](state) {
           const selected = selector(state);
@@ -17787,7 +17952,7 @@ function createSelectorHook(context = ReactReduxContext) {
       wrappedSelector,
       equalityFn
     );
-    React.useDebugValue(selectedState);
+    React$1.useDebugValue(selectedState);
     return selectedState;
   };
   Object.assign(useSelector2, {