@udi-organization/udi-package 1.0.36 → 1.0.41

package/dist/index.cjs.js

@@ -0,0 +1,2458 @@
+'use strict';
+
+var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _arrayLikeToArray(r, a) {
+  (null == a || a > r.length) && (a = r.length);
+  for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
+  return n;
+}
+function _arrayWithHoles(r) {
+  if (Array.isArray(r)) return r;
+}
+function _arrayWithoutHoles(r) {
+  if (Array.isArray(r)) return _arrayLikeToArray(r);
+}
+function asyncGeneratorStep(n, t, e, r, o, a, c) {
+  try {
+    var i = n[a](c),
+      u = i.value;
+  } catch (n) {
+    return void e(n);
+  }
+  i.done ? t(u) : Promise.resolve(u).then(r, o);
+}
+function _asyncToGenerator(n) {
+  return function () {
+    var t = this,
+      e = arguments;
+    return new Promise(function (r, o) {
+      var a = n.apply(t, e);
+      function _next(n) {
+        asyncGeneratorStep(a, r, o, _next, _throw, "next", n);
+      }
+      function _throw(n) {
+        asyncGeneratorStep(a, r, o, _next, _throw, "throw", n);
+      }
+      _next(void 0);
+    });
+  };
+}
+function _defineProperty$1(e, r, t) {
+  return (r = _toPropertyKey$1(r)) in e ? Object.defineProperty(e, r, {
+    value: t,
+    enumerable: true,
+    configurable: true,
+    writable: true
+  }) : e[r] = t, e;
+}
+function _iterableToArray(r) {
+  if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);
+}
+function _iterableToArrayLimit(r, l) {
+  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (null != t) {
+    var e,
+      n,
+      i,
+      u,
+      a = [],
+      f = true,
+      o = false;
+    try {
+      if (i = (t = t.call(r)).next, 0 === l) ; else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
+    } catch (r) {
+      o = true, n = r;
+    } finally {
+      try {
+        if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
+      } finally {
+        if (o) throw n;
+      }
+    }
+    return a;
+  }
+}
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _nonIterableSpread() {
+  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function ownKeys$1(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 _objectSpread2(e) {
+  for (var r = 1; r < arguments.length; r++) {
+    var t = null != arguments[r] ? arguments[r] : {};
+    r % 2 ? ownKeys$1(Object(t), true).forEach(function (r) {
+      _defineProperty$1(e, r, t[r]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) {
+      Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
+    });
+  }
+  return e;
+}
+function _objectWithoutProperties$1(e, t) {
+  if (null == e) return {};
+  var o,
+    r,
+    i = _objectWithoutPropertiesLoose$1(e, t);
+  if (Object.getOwnPropertySymbols) {
+    var n = Object.getOwnPropertySymbols(e);
+    for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
+  }
+  return i;
+}
+function _objectWithoutPropertiesLoose$1(r, e) {
+  if (null == r) return {};
+  var t = {};
+  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
+    if (-1 !== e.indexOf(n)) continue;
+    t[n] = r[n];
+  }
+  return t;
+}
+function _regenerator() {
+  /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */
+  var e,
+    t,
+    r = "function" == typeof Symbol ? Symbol : {},
+    n = r.iterator || "@@iterator",
+    o = r.toStringTag || "@@toStringTag";
+  function i(r, n, o, i) {
+    var c = n && n.prototype instanceof Generator ? n : Generator,
+      u = Object.create(c.prototype);
+    return _regeneratorDefine(u, "_invoke", function (r, n, o) {
+      var i,
+        c,
+        u,
+        f = 0,
+        p = o || [],
+        y = false,
+        G = {
+          p: 0,
+          n: 0,
+          v: e,
+          a: d,
+          f: d.bind(e, 4),
+          d: function (t, r) {
+            return i = t, c = 0, u = e, G.n = r, a;
+          }
+        };
+      function d(r, n) {
+        for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) {
+          var o,
+            i = p[t],
+            d = G.p,
+            l = i[2];
+          r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0));
+        }
+        if (o || r > 1) return a;
+        throw y = true, n;
+      }
+      return function (o, p, l) {
+        if (f > 1) throw TypeError("Generator is already running");
+        for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) {
+          i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u);
+          try {
+            if (f = 2, i) {
+              if (c || (o = "next"), t = i[o]) {
+                if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object");
+                if (!t.done) return t;
+                u = t.value, c < 2 && (c = 0);
+              } else 1 === c && (t = i.return) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1);
+              i = e;
+            } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break;
+          } catch (t) {
+            i = e, c = 1, u = t;
+          } finally {
+            f = 1;
+          }
+        }
+        return {
+          value: t,
+          done: y
+        };
+      };
+    }(r, o, i), true), u;
+  }
+  var a = {};
+  function Generator() {}
+  function GeneratorFunction() {}
+  function GeneratorFunctionPrototype() {}
+  t = Object.getPrototypeOf;
+  var c = [][n] ? t(t([][n]())) : (_regeneratorDefine(t = {}, n, function () {
+      return this;
+    }), t),
+    u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c);
+  function f(e) {
+    return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e;
+  }
+  return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine(u), _regeneratorDefine(u, o, "Generator"), _regeneratorDefine(u, n, function () {
+    return this;
+  }), _regeneratorDefine(u, "toString", function () {
+    return "[object Generator]";
+  }), (_regenerator = function () {
+    return {
+      w: i,
+      m: f
+    };
+  })();
+}
+function _regeneratorDefine(e, r, n, t) {
+  var i = Object.defineProperty;
+  try {
+    i({}, "", {});
+  } catch (e) {
+    i = 0;
+  }
+  _regeneratorDefine = function (e, r, n, t) {
+    function o(r, n) {
+      _regeneratorDefine(e, r, function (e) {
+        return this._invoke(r, n, e);
+      });
+    }
+    r ? i ? i(e, r, {
+      value: n,
+      enumerable: !t,
+      configurable: !t,
+      writable: !t
+    }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2));
+  }, _regeneratorDefine(e, r, n, t);
+}
+function _slicedToArray(r, e) {
+  return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
+}
+function _toConsumableArray(r) {
+  return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread();
+}
+function _toPrimitive$1(t, r) {
+  if ("object" != typeof t || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r);
+    if ("object" != typeof i) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return ("string" === r ? String : Number)(t);
+}
+function _toPropertyKey$1(t) {
+  var i = _toPrimitive$1(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _unsupportedIterableToArray(r, a) {
+  if (r) {
+    if ("string" == typeof r) return _arrayLikeToArray(r, a);
+    var t = {}.toString.call(r).slice(8, -1);
+    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
+  }
+}
+
+var _excluded$1 = ["children", "onClick", "variant", "disabled", "className"];
+var Button = function Button(_ref) {
+  var children = _ref.children,
+    onClick = _ref.onClick,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'primary' : _ref$variant,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    props = _objectWithoutProperties$1(_ref, _excluded$1);
+  var baseStyles = {
+    padding: '10px 20px',
+    borderRadius: '6px',
+    border: 'none',
+    cursor: disabled ? 'not-allowed' : 'pointer',
+    fontSize: '14px',
+    fontWeight: '500',
+    opacity: disabled ? 0.6 : 1,
+    transition: 'all 0.2s ease'
+  };
+  var variantStyles = {
+    primary: {
+      backgroundColor: '#007bff',
+      color: 'white'
+    },
+    secondary: {
+      backgroundColor: '#6c757d',
+      color: 'white'
+    },
+    success: {
+      backgroundColor: '#28a745',
+      color: 'white'
+    },
+    danger: {
+      backgroundColor: '#dc3545',
+      color: 'white'
+    }
+  };
+  var buttonStyle = _objectSpread2(_objectSpread2({}, baseStyles), variantStyles[variant]);
+  return /*#__PURE__*/jsxRuntime.jsx("button", _objectSpread2(_objectSpread2({
+    style: buttonStyle,
+    onClick: onClick,
+    disabled: disabled,
+    className: className
+  }, props), {}, {
+    children: children
+  }));
+};
+
+var Pagination = function Pagination(_ref) {
+  var currentPage = _ref.currentPage,
+    totalPages = _ref.totalPages,
+    currentPageSize = _ref.currentPageSize,
+    onPageChange = _ref.onPageChange,
+    onPageSizeChange = _ref.onPageSizeChange,
+    isMobile = _ref.isMobile,
+    onDropdownFocus = _ref.onDropdownFocus,
+    onDropdownBlur = _ref.onDropdownBlur,
+    onMouseEnter = _ref.onMouseEnter;
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "udi-table-pagination",
+    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "pagination-info",
+      children: /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "page-size-selector",
+        children: /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "page-size-container",
+          onMouseEnter: onMouseEnter,
+          children: /*#__PURE__*/jsxRuntime.jsxs("select", {
+            id: "pageSize",
+            value: currentPageSize,
+            onChange: function onChange(e) {
+              return onPageSizeChange(Number(e.target.value));
+            },
+            onFocus: onDropdownFocus,
+            onBlur: onDropdownBlur,
+            className: "page-size-select",
+            children: [/*#__PURE__*/jsxRuntime.jsx("option", {
+              value: 5,
+              children: "5"
+            }), /*#__PURE__*/jsxRuntime.jsx("option", {
+              value: 10,
+              children: "10"
+            }), /*#__PURE__*/jsxRuntime.jsx("option", {
+              value: 20,
+              children: "20"
+            }), /*#__PURE__*/jsxRuntime.jsx("option", {
+              value: 50,
+              children: "50"
+            }), /*#__PURE__*/jsxRuntime.jsx("option", {
+              value: 100,
+              children: "100"
+            })]
+          })
+        })
+      })
+    }), totalPages > 1 && /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "pagination-controls",
+      children: isMobile ? /*#__PURE__*/jsxRuntime.jsx(MobilePaginationControls, {
+        currentPage: currentPage,
+        totalPages: totalPages,
+        onPageChange: onPageChange
+      }) : /*#__PURE__*/jsxRuntime.jsx(DesktopPaginationControls, {
+        currentPage: currentPage,
+        totalPages: totalPages,
+        onPageChange: onPageChange,
+        tr: tr
+      })
+    })]
+  });
+};
+
+/**
+ * 手機版分頁控制
+ */
+var MobilePaginationControls = function MobilePaginationControls(_ref2) {
+  var currentPage = _ref2.currentPage,
+    totalPages = _ref2.totalPages,
+    onPageChange = _ref2.onPageChange;
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsx("button", {
+      onClick: function onClick() {
+        return onPageChange(currentPage - 1);
+      },
+      disabled: currentPage === 0,
+      className: "pagination-button",
+      children: "\u2039"
+    }), /*#__PURE__*/jsxRuntime.jsxs("span", {
+      className: "current-page-mobile",
+      children: [currentPage + 1, " / ", totalPages]
+    }), /*#__PURE__*/jsxRuntime.jsx("button", {
+      onClick: function onClick() {
+        return onPageChange(currentPage + 1);
+      },
+      disabled: currentPage + 1 === totalPages,
+      className: "pagination-button",
+      children: "\u203A"
+    })]
+  });
+};
+
+/**
+ * 桌面版分頁控制
+ */
+var DesktopPaginationControls = function DesktopPaginationControls(_ref3) {
+  var currentPage = _ref3.currentPage,
+    totalPages = _ref3.totalPages,
+    onPageChange = _ref3.onPageChange,
+    tr = _ref3.tr;
+  // 生成頁碼按鈕
+  var renderPageButtons = function renderPageButtons() {
+    var pages = [];
+
+    // 將 currentPage（0-based）轉換為頁碼（1-based）
+    var currentPageNum = currentPage + 1;
+
+    // 計算要顯示的起始頁碼
+    var startPage;
+    if (totalPages <= 3) {
+      // 如果總頁數不超過3頁，從第1頁開始
+      startPage = 1;
+    } else if (currentPageNum === 1) {
+      // 如果在第1頁，顯示 1, 2, 3
+      startPage = 1;
+    } else if (currentPageNum === totalPages) {
+      // 如果在最後一頁，顯示最後3頁
+      startPage = totalPages - 2;
+    } else {
+      // 中間頁面，以當前頁為中心
+      startPage = currentPageNum - 1;
+    }
+
+    // 確保 startPage 不小於 1
+    startPage = Math.max(1, startPage);
+
+    // 生成3個頁碼按鈕
+    var _loop = function _loop() {
+      var pageNum = startPage + i;
+      var isValidPage = pageNum <= totalPages;
+      var isActive = isValidPage && currentPageNum === pageNum;
+      pages.push(/*#__PURE__*/jsxRuntime.jsx("button", {
+        onClick: function onClick() {
+          return isValidPage ? onPageChange(pageNum - 1) : null;
+        },
+        disabled: !isValidPage,
+        className: "pagination-button ".concat(isActive ? "active" : "", " ").concat(!isValidPage ? "disabled" : ""),
+        children: isValidPage ? pageNum : "-"
+      }, "page-btn-".concat(i)));
+    };
+    for (var i = 0; i < 3; i++) {
+      _loop();
+    }
+    return pages;
+  };
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsx("button", {
+      onClick: function onClick() {
+        return onPageChange(0);
+      },
+      disabled: currentPage === 0,
+      className: "pagination-button",
+      children: tr("First Page")
+    }), /*#__PURE__*/jsxRuntime.jsx("button", {
+      onClick: function onClick() {
+        return onPageChange(currentPage - 1);
+      },
+      disabled: currentPage === 0,
+      className: "pagination-button",
+      children: tr("Previous Page")
+    }), renderPageButtons(), /*#__PURE__*/jsxRuntime.jsx("button", {
+      onClick: function onClick() {
+        return onPageChange(currentPage + 1);
+      },
+      disabled: currentPage === totalPages - 1,
+      className: "pagination-button",
+      children: tr("Next Page")
+    }), /*#__PURE__*/jsxRuntime.jsx("button", {
+      onClick: function onClick() {
+        return onPageChange(totalPages - 1);
+      },
+      disabled: currentPage === totalPages - 1,
+      className: "pagination-button",
+      children: tr("Last Page")
+    })]
+  });
+};
+
+var DefaultContext = {
+  color: undefined,
+  size: undefined,
+  className: undefined,
+  style: undefined,
+  attr: undefined
+};
+var IconContext = React.createContext && /*#__PURE__*/React.createContext(DefaultContext);
+
+var _excluded = ["attr", "size", "title"];
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } } return target; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function Tree2Element(tree) {
+  return tree && tree.map((node, i) => /*#__PURE__*/React.createElement(node.tag, _objectSpread({
+    key: i
+  }, node.attr), Tree2Element(node.child)));
+}
+function GenIcon(data) {
+  return props => /*#__PURE__*/React.createElement(IconBase, _extends({
+    attr: _objectSpread({}, data.attr)
+  }, props), Tree2Element(data.child));
+}
+function IconBase(props) {
+  var elem = conf => {
+    var {
+        attr,
+        size,
+        title
+      } = props,
+      svgProps = _objectWithoutProperties(props, _excluded);
+    var computedSize = size || conf.size || "1em";
+    var className;
+    if (conf.className) className = conf.className;
+    if (props.className) className = (className ? className + " " : "") + props.className;
+    return /*#__PURE__*/React.createElement("svg", _extends({
+      stroke: "currentColor",
+      fill: "currentColor",
+      strokeWidth: "0"
+    }, conf.attr, attr, svgProps, {
+      className: className,
+      style: _objectSpread(_objectSpread({
+        color: props.color || conf.color
+      }, conf.style), props.style),
+      height: computedSize,
+      width: computedSize,
+      xmlns: "http://www.w3.org/2000/svg"
+    }), title && /*#__PURE__*/React.createElement("title", null, title), props.children);
+  };
+  return IconContext !== undefined ? /*#__PURE__*/React.createElement(IconContext.Consumer, null, conf => elem(conf)) : elem(DefaultContext);
+}
+
+// THIS FILE IS AUTO GENERATED
+function MdOutlineMenuBook (props) {
+  return GenIcon({"attr":{"viewBox":"0 0 24 24"},"child":[{"tag":"path","attr":{"fill":"none","d":"M0 0h24v24H0z"},"child":[]},{"tag":"path","attr":{"d":"M21 5c-1.11-.35-2.33-.5-3.5-.5-1.95 0-4.05.4-5.5 1.5-1.45-1.1-3.55-1.5-5.5-1.5S2.45 4.9 1 6v14.65c0 .25.25.5.5.5.1 0 .15-.05.25-.05C3.1 20.45 5.05 20 6.5 20c1.95 0 4.05.4 5.5 1.5 1.35-.85 3.8-1.5 5.5-1.5 1.65 0 3.35.3 4.75 1.05.1.05.15.05.25.05.25 0 .5-.25.5-.5V6c-.6-.45-1.25-.75-2-1zm0 13.5c-1.1-.35-2.3-.5-3.5-.5-1.7 0-4.15.65-5.5 1.5V8c1.35-.85 3.8-1.5 5.5-1.5 1.2 0 2.4.15 3.5.5v11.5z"},"child":[]},{"tag":"path","attr":{"d":"M17.5 10.5c.88 0 1.73.09 2.5.26V9.24c-.79-.15-1.64-.24-2.5-.24-1.7 0-3.24.29-4.5.83v1.66c1.13-.64 2.7-.99 4.5-.99zM13 12.49v1.66c1.13-.64 2.7-.99 4.5-.99.88 0 1.73.09 2.5.26V11.9c-.79-.15-1.64-.24-2.5-.24-1.7 0-3.24.3-4.5.83zM17.5 14.33c-1.7 0-3.24.29-4.5.83v1.66c1.13-.64 2.7-.99 4.5-.99.88 0 1.73.09 2.5.26v-1.52c-.79-.16-1.64-.24-2.5-.24z"},"child":[]}]})(props);
+}
+
+var TableHeader = function TableHeader(_ref) {
+  var name = _ref.name,
+    _ref$freeActions = _ref.freeActions,
+    freeActions = _ref$freeActions === void 0 ? [] : _ref$freeActions,
+    getState = _ref.getState;
+  var hasFreeActions = freeActions.length > 0;
+
+  // 如果沒有名稱也沒有 freeActions，不渲染任何內容
+  if (!name && !hasFreeActions) {
+    return null;
+  }
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "udi-table-header",
+    children: [name && /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "udi-table-name",
+      style: {
+        display: hasFreeActions ? "inline-block" : "block"
+      },
+      children: /*#__PURE__*/jsxRuntime.jsx("h3", {
+        children: name
+      })
+    }), hasFreeActions && /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "udi-table-free-actions",
+      style: {
+        display: name ? "inline-block" : "block"
+      },
+      children: freeActions.map(function (action, index) {
+        if (action.isFreeAction !== true) return null;
+        return /*#__PURE__*/jsxRuntime.jsx("button", {
+          onClick: function onClick() {
+            if (action.onClick) action.onClick({
+              getState: getState
+            });
+          },
+          title: action.title || "Action",
+          className: "udi-table-free-action-button",
+          style: _objectSpread2({}, action.style),
+          disabled: action.disabled,
+          children: action.icon ? action.icon : action.label ? action.label : /*#__PURE__*/jsxRuntime.jsx(MdOutlineMenuBook, {})
+        }, index);
+      })
+    })]
+  });
+};
+
+var BasicFilter = function BasicFilter(_ref) {
+  var columns = _ref.columns,
+    filterColumn = _ref.filterColumn,
+    filterText = _ref.filterText,
+    showAdvancedFilter = _ref.showAdvancedFilter,
+    advancedFilters = _ref.advancedFilters,
+    onFilterColumnChange = _ref.onFilterColumnChange,
+    onFilterTextChange = _ref.onFilterTextChange,
+    onToggleAdvancedFilter = _ref.onToggleAdvancedFilter,
+    onResetFilter = _ref.onResetFilter;
+  // 判斷是否有任何篩選條件
+  var hasAnyFilter = filterText || filterColumn !== "all" || Object.keys(advancedFilters).length > 0;
+
+  // 取得 placeholder 文字
+  var getPlaceholder = function getPlaceholder() {
+    if (filterColumn === "all") {
+      return "".concat(tr("Search")).concat(tr("All Fields"), "...");
+    }
+    var column = columns.find(function (col) {
+      return col.key === filterColumn;
+    });
+    return "".concat(tr("Search"), " ").concat((column === null || column === void 0 ? void 0 : column.title) || "", "...");
+  };
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "basic-filter",
+    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "filter-column-selector",
+      children: [/*#__PURE__*/jsxRuntime.jsxs("label", {
+        htmlFor: "filterColumn",
+        children: [tr("Search") + tr("Fields"), "\uFF1A"]
+      }), /*#__PURE__*/jsxRuntime.jsxs("select", {
+        id: "filterColumn",
+        value: filterColumn,
+        onChange: function onChange(e) {
+          return onFilterColumnChange(e.target.value);
+        },
+        className: "filter-column-select",
+        children: [/*#__PURE__*/jsxRuntime.jsx("option", {
+          value: "all",
+          children: tr("All Fields")
+        }), columns.map(function (column) {
+          return /*#__PURE__*/jsxRuntime.jsx("option", {
+            value: column.dataField,
+            children: column.title
+          }, column.dataField);
+        })]
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsx("input", {
+      type: "text",
+      placeholder: getPlaceholder(),
+      value: filterText,
+      onChange: function onChange(e) {
+        return onFilterTextChange(e.target.value);
+      },
+      className: "filter-input"
+    }), /*#__PURE__*/jsxRuntime.jsx("button", {
+      onClick: onToggleAdvancedFilter,
+      className: "advanced-filter-toggle",
+      children: showAdvancedFilter ? tr("Hide advanced search") : tr("Advanced search")
+    }), hasAnyFilter && /*#__PURE__*/jsxRuntime.jsx("button", {
+      onClick: onResetFilter,
+      className: "reset-button",
+      children: tr("Reset all filters")
+    })]
+  });
+};
+
+var AdvancedFilter = function AdvancedFilter(_ref) {
+  var columns = _ref.columns,
+    advancedFilters = _ref.advancedFilters,
+    onFilterChange = _ref.onFilterChange,
+    onClearFilters = _ref.onClearFilters;
+  var hasFilters = Object.keys(advancedFilters).length > 0;
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "advanced-filter",
+    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "advanced-filter-header",
+      children: [/*#__PURE__*/jsxRuntime.jsxs("h4", {
+        children: [tr("Advanced search"), " - ", tr("Multiple filters search")]
+      }), hasFilters && /*#__PURE__*/jsxRuntime.jsx("button", {
+        onClick: onClearFilters,
+        className: "clear-advanced-button",
+        children: tr("Clear advance filters")
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "advanced-filter-grid",
+      children: columns.map(function (column) {
+        return /*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "advanced-filter-item",
+          children: [/*#__PURE__*/jsxRuntime.jsxs("label", {
+            htmlFor: "advanced-".concat(column.dataField),
+            children: [column.title, "\uFF1A"]
+          }), /*#__PURE__*/jsxRuntime.jsx("input", {
+            id: "advanced-".concat(column.dataField),
+            type: "text",
+            placeholder: "".concat(tr("Filter"), " ").concat(column.title, "..."),
+            value: advancedFilters[column.dataField] || "",
+            onChange: function onChange(e) {
+              return onFilterChange(column.dataField, e.target.value);
+            },
+            className: "advanced-filter-input"
+          })]
+        }, column.dataField);
+      })
+    })]
+  });
+};
+
+var ScrollIndicator = function ScrollIndicator(_ref) {
+  var scrollPosition = _ref.scrollPosition,
+    currentPage = _ref.currentPage,
+    totalPages = _ref.totalPages,
+    totalCount = _ref.totalCount,
+    scrollbarInfo = _ref.scrollbarInfo,
+    isMobile = _ref.isMobile,
+    isTablet = _ref.isTablet;
+  // 取得裝置類型文字
+  var getDeviceType = function getDeviceType() {
+    if (isMobile) return "手機";
+    if (isTablet) return "平板";
+    return "桌面";
+  };
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "scroll-position-indicator",
+    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+      children: ["\u6EFE\u52D5\u4F4D\u7F6E: \u5782\u76F4 ", scrollPosition.verticalPercent.toFixed(1), "% | \u6C34\u5E73", " ", scrollPosition.horizontalPercent.toFixed(1), "%"]
+    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      children: ["\u5206\u9801: ", currentPage + 1, "/", totalPages, " | \u7E3D\u7B46\u6578: ", totalCount]
+    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      children: ["\u6EFE\u52D5\u689D: ", scrollbarInfo.hasVertical ? "垂直✓" : "垂直✗", " |", " ", scrollbarInfo.hasHorizontal ? "水平✓" : "水平✗"]
+    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      children: ["\u87A2\u5E55: ", getDeviceType(), " (", window.innerWidth, "x", window.innerHeight, ")"]
+    })]
+  });
+};
+
+var TableHead = function TableHead(_ref) {
+  var columns = _ref.columns,
+    sortable = _ref.sortable,
+    sortConfig = _ref.sortConfig,
+    onSort = _ref.onSort,
+    getGridSize = _ref.getGridSize,
+    _ref$actions = _ref.actions,
+    actions = _ref$actions === void 0 ? [] : _ref$actions,
+    _ref$actionFirst = _ref.actionFirst,
+    actionFirst = _ref$actionFirst === void 0 ? false : _ref$actionFirst;
+  // 取得排序圖示
+  var getSortIcon = function getSortIcon(columnKey) {
+    if (sortConfig.key === columnKey) {
+      return sortConfig.direction === "asc" ? "↑" : "↓";
+    }
+    return "↕";
+  };
+
+  // 取得欄位的 className
+  var getColumnClassName = function getColumnClassName(columnKey) {
+    var classes = [];
+    if (sortable) classes.push("sortable");
+    if (sortConfig.key === columnKey) {
+      classes.push("sorted");
+      classes.push(sortConfig.direction);
+    }
+    return classes.join(" ");
+  };
+  return /*#__PURE__*/jsxRuntime.jsx("thead", {
+    children: /*#__PURE__*/jsxRuntime.jsxs("tr", {
+      children: [actionFirst && actions.length > 0 && /*#__PURE__*/jsxRuntime.jsx("th", {}), columns.map(function (column) {
+        return /*#__PURE__*/jsxRuntime.jsx("th", {
+          onClick: function onClick() {
+            return onSort(column.dataField);
+          },
+          className: getColumnClassName(column.dataField),
+          style: _objectSpread2({}, getGridSize(column, {
+            isTitle: true
+          })),
+          children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+            className: "th-content",
+            children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+              children: column.title
+            }), sortable && /*#__PURE__*/jsxRuntime.jsx("span", {
+              className: "sort-icon",
+              children: getSortIcon(column.dataField)
+            })]
+          })
+        }, column.dataField);
+      }), !actionFirst && actions.length > 0 && /*#__PURE__*/jsxRuntime.jsx("th", {})]
+    })
+  });
+};
+
+var LoadingState = function LoadingState(_ref) {
+  var colSpan = _ref.colSpan;
+  return /*#__PURE__*/jsxRuntime.jsx("tr", {
+    children: /*#__PURE__*/jsxRuntime.jsx("td", {
+      colSpan: colSpan,
+      className: "loading-state",
+      children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "loading-spinner",
+        children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "spinner"
+        }), /*#__PURE__*/jsxRuntime.jsx("span", {
+          children: "loading..."
+        })]
+      })
+    })
+  });
+};
+
+var EmptyState = function EmptyState(_ref) {
+  var colSpan = _ref.colSpan,
+    _ref$message = _ref.message,
+    message = _ref$message === void 0 ? "No Data" : _ref$message;
+  return /*#__PURE__*/jsxRuntime.jsx("tr", {
+    children: /*#__PURE__*/jsxRuntime.jsx("td", {
+      colSpan: colSpan,
+      className: "no-data",
+      children: message
+    })
+  });
+};
+
+var ActionButton = function ActionButton(_ref) {
+  var action = _ref.action,
+    row = _ref.row,
+    actionIndex = _ref.actionIndex;
+  if (action.isFreeAction === true) return null;
+  if (action.render) {
+    return action.render(row);
+  }
+  if (action.skip) return null;
+  return /*#__PURE__*/jsxRuntime.jsx("button", {
+    onClick: function onClick() {
+      return action.onClick(row);
+    },
+    className: action.className || "action-button",
+    title: action.title || "Action",
+    style: {
+      all: "unset",
+      cursor: "pointer",
+      fontSize: "26px"
+    },
+    disabled: action.disabled,
+    children: action.icon
+  }, "action-".concat(actionIndex));
+};
+
+/**
+ * ActionCell 動作按鈕儲存格元件
+ * @param {Object} props
+ * @param {Array} props.actions - 動作按鈕陣列
+ * @param {Object} props.row - 行資料
+ */
+var ActionCell = function ActionCell(_ref2) {
+  var actions = _ref2.actions,
+    row = _ref2.row;
+  return /*#__PURE__*/jsxRuntime.jsx("td", {
+    style: {
+      width: "".concat(actions.length * 26, "px")
+    },
+    children: actions.map(function (action, actionIndex) {
+      return /*#__PURE__*/jsxRuntime.jsx(ActionButton, {
+        action: action,
+        row: row,
+        actionIndex: actionIndex
+      }, "action-".concat(actionIndex));
+    })
+  });
+};
+
+var TableRow = function TableRow(_ref) {
+  var row = _ref.row,
+    rowIndex = _ref.rowIndex,
+    columns = _ref.columns,
+    _ref$actions = _ref.actions,
+    actions = _ref$actions === void 0 ? [] : _ref$actions,
+    _ref$actionFirst = _ref.actionFirst,
+    actionFirst = _ref$actionFirst === void 0 ? false : _ref$actionFirst,
+    getGridSize = _ref.getGridSize,
+    tableName = _ref.tableName;
+  return /*#__PURE__*/jsxRuntime.jsxs("tr", {
+    children: [actionFirst && actions.length > 0 && /*#__PURE__*/jsxRuntime.jsx(ActionCell, {
+      actions: actions,
+      row: row
+    }), columns.map(function (column, colIndex) {
+      return /*#__PURE__*/jsxRuntime.jsx("td", {
+        title: row[column.dataField],
+        style: _objectSpread2(_objectSpread2({}, getGridSize(column)), column.style),
+        children: column.render ? column.render(row[column.dataField], row, rowIndex + 1, column.dataField, tableName) : row[column.dataField]
+      }, "cell-".concat(rowIndex, "-").concat(colIndex, "-").concat(column.dataField));
+    }), !actionFirst && actions.length > 0 && /*#__PURE__*/jsxRuntime.jsx(ActionCell, {
+      actions: actions,
+      row: row
+    })]
+  }, "row-".concat(rowIndex, "-").concat(row.id || ""));
+};
+
+/**
+ * useDataRequest - 處理表格資料請求的 Hook
+ *
+ * @param {Object} options - 配置選項
+ * @param {Function} options.onDataRequest - 外部傳入的資料請求 callback 函數
+ * @param {number} options.pageSize - 每頁顯示數量
+ * @param {boolean} options.isDev - 是否為開發模式
+ *
+ * @returns {Object} - 返回資料狀態和操作函數
+ */
+function useDataRequest(_ref) {
+  var onDataRequest = _ref.onDataRequest,
+    _ref$isDev = _ref.isDev,
+    isDev = _ref$isDev === void 0 ? false : _ref$isDev;
+  // 資料狀態
+  var _useState = React.useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    data = _useState2[0],
+    setData = _useState2[1];
+  var _useState3 = React.useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    loading = _useState4[0],
+    setLoading = _useState4[1];
+  var _useState5 = React.useState(0),
+    _useState6 = _slicedToArray(_useState5, 2),
+    totalCount = _useState6[0],
+    setTotalCount = _useState6[1];
+  var _useState7 = React.useState(null),
+    _useState8 = _slicedToArray(_useState7, 2),
+    error = _useState8[0],
+    setError = _useState8[1];
+  var _useState9 = React.useState(false),
+    _useState0 = _slicedToArray(_useState9, 2),
+    isInfiniteScroll = _useState0[0],
+    setIsInfiniteScroll = _useState0[1];
+
+  // 執行資料請求
+  var executeDataRequest = React.useCallback(/*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(params) {
+      var result, responseData, _t;
+      return _regenerator().w(function (_context) {
+        while (1) switch (_context.p = _context.n) {
+          case 0:
+            if (onDataRequest) {
+              _context.n = 1;
+              break;
+            }
+            return _context.a(2);
+          case 1:
+            setLoading(true);
+            setError(null);
+            _context.p = 2;
+            _context.n = 3;
+            return onDataRequest(params);
+          case 3:
+            result = _context.v;
+            responseData = Array.isArray(result === null || result === void 0 ? void 0 : result.data) ? result.data : [];
+            if (isInfiniteScroll) {
+              setData(function (prevData) {
+                return [].concat(_toConsumableArray(prevData), _toConsumableArray(responseData));
+              });
+            } else {
+              setData(responseData);
+            }
+            setTotalCount(result.totalCount || 0);
+            _context.n = 5;
+            break;
+          case 4:
+            _context.p = 4;
+            _t = _context.v;
+            if (isDev) {
+              console.error("❌ Callback Error:", _t);
+            }
+            setError(_t.message);
+            setData([]);
+            setTotalCount(0);
+          case 5:
+            _context.p = 5;
+            setLoading(false);
+            return _context.f(5);
+          case 6:
+            return _context.a(2);
+        }
+      }, _callee, null, [[2, 4, 5, 6]]);
+    }));
+    return function (_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }(), [onDataRequest, isInfiniteScroll, isDev]);
+
+  // 防抖的請求執行
+  var debouncedDataRequest = React.useMemo(function () {
+    var timeoutId;
+    return function (params) {
+      clearTimeout(timeoutId);
+      timeoutId = setTimeout(function () {
+        executeDataRequest(params);
+      }, 300);
+    };
+  }, [executeDataRequest]);
+
+  // 初始載入
+  var initialLoad = React.useCallback(function (currentPageSize) {
+    if (onDataRequest) {
+      var params = {
+        page: 0,
+        pageSize: currentPageSize,
+        search: "",
+        searchColumn: "all",
+        advancedFilters: {},
+        sortBy: null,
+        sortOrder: "asc"
+      };
+      executeDataRequest(params);
+    }
+  }, [onDataRequest, executeDataRequest]);
+
+  // 重置資料
+  var resetData = React.useCallback(function () {
+    setData([]);
+    setTotalCount(0);
+    setError(null);
+  }, []);
+  return {
+    // 狀態
+    data: data,
+    setData: setData,
+    loading: loading,
+    setLoading: setLoading,
+    totalCount: totalCount,
+    setTotalCount: setTotalCount,
+    error: error,
+    setError: setError,
+    isInfiniteScroll: isInfiniteScroll,
+    setIsInfiniteScroll: setIsInfiniteScroll,
+    // 操作函數
+    executeDataRequest: executeDataRequest,
+    debouncedDataRequest: debouncedDataRequest,
+    initialLoad: initialLoad,
+    resetData: resetData
+  };
+}
+
+/**
+ * useTableScroll - 處理表格滾動邏輯的 Hook
+ *
+ * @param {Object} options - 配置選項
+ * @param {Array} options.data - 表格資料（用於監聽資料變化時重新初始化滾動監聽）
+ *
+ * @returns {Object} - 返回滾動狀態和控制函數
+ */
+function useTableScroll() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+    _ref$data = _ref.data,
+    data = _ref$data === void 0 ? [] : _ref$data;
+  // 滾動位置狀態
+  var _useState = React.useState({
+      top: 0,
+      left: 0,
+      verticalPercent: 0,
+      horizontalPercent: 0
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    scrollPosition = _useState2[0],
+    setScrollPosition = _useState2[1];
+
+  // 滾動條資訊
+  var _useState3 = React.useState({
+      hasHorizontal: false,
+      hasVertical: false,
+      maxScrollLeft: 0,
+      maxScrollTop: 0
+    }),
+    _useState4 = _slicedToArray(_useState3, 2),
+    scrollbarInfo = _useState4[0],
+    setScrollbarInfo = _useState4[1];
+
+  // 表格容器 ref
+  var tableWrapperRef = React.useRef(null);
+
+  // 滾動事件處理（使用 throttle）
+  React.useEffect(function () {
+    var tableWrapper = tableWrapperRef.current;
+    if (!tableWrapper) return;
+
+    // 更新滾動條信息
+    var updateScrollbarInfo = function updateScrollbarInfo() {
+      var hasHorizontal = tableWrapper.scrollWidth > tableWrapper.clientWidth;
+      var hasVertical = tableWrapper.scrollHeight > tableWrapper.clientHeight;
+      var maxScrollLeft = Math.max(0, tableWrapper.scrollWidth - tableWrapper.clientWidth);
+      var maxScrollTop = Math.max(0, tableWrapper.scrollHeight - tableWrapper.clientHeight);
+      setScrollbarInfo({
+        hasHorizontal: hasHorizontal,
+        hasVertical: hasVertical,
+        maxScrollLeft: maxScrollLeft,
+        maxScrollTop: maxScrollTop,
+        scrollWidth: tableWrapper.scrollWidth,
+        scrollHeight: tableWrapper.scrollHeight,
+        clientWidth: tableWrapper.clientWidth,
+        clientHeight: tableWrapper.clientHeight
+      });
+    };
+
+    // 初始化滾動條信息
+    updateScrollbarInfo();
+    var isThrottled = false;
+    var handleScroll = function handleScroll(event) {
+      if (isThrottled) return;
+      isThrottled = true;
+      requestAnimationFrame(function () {
+        // browser api > 每次滾動事件(rerender)使用 requestAnimationFrame
+        var target = event.target;
+        var scrollTop = target.scrollTop;
+        var scrollLeft = target.scrollLeft;
+        var scrollHeight = target.scrollHeight;
+        var clientHeight = target.clientHeight;
+        var scrollWidth = target.scrollWidth;
+        var clientWidth = target.clientWidth;
+
+        // 計算滾動百分比
+        var verticalScrollPercent = scrollHeight > clientHeight ? scrollTop / (scrollHeight - clientHeight) * 100 : 0;
+        var horizontalScrollPercent = scrollWidth > clientWidth ? scrollLeft / (scrollWidth - clientWidth) * 100 : 0;
+        setScrollPosition({
+          top: scrollTop,
+          left: scrollLeft,
+          verticalPercent: parseFloat(verticalScrollPercent.toFixed(1)),
+          horizontalPercent: parseFloat(horizontalScrollPercent.toFixed(1))
+        });
+
+        // 更新滾動條信息（以防表格尺寸發生變化）
+        updateScrollbarInfo();
+        isThrottled = false;
+      });
+    };
+
+    // 監聽窗口大小變化
+    var handleResize = function handleResize() {
+      updateScrollbarInfo();
+    };
+    tableWrapper.addEventListener("scroll", handleScroll, {
+      passive: true
+    });
+    window.addEventListener("resize", handleResize);
+
+    // 使用 ResizeObserver 監聽表格內容變化（如果支援的話）
+    var resizeObserver;
+    if (window.ResizeObserver) {
+      resizeObserver = new ResizeObserver(function () {
+        updateScrollbarInfo();
+      });
+      resizeObserver.observe(tableWrapper);
+    }
+    return function () {
+      tableWrapper.removeEventListener("scroll", handleScroll);
+      window.removeEventListener("resize", handleResize);
+      if (resizeObserver) {
+        resizeObserver.disconnect();
+      }
+    };
+  }, [data]); // 當數據變化時重新初始化
+
+  // 滾動控制函數
+  var scrollControl = React.useCallback(function (axis, value) {
+    var tableWrapper = tableWrapperRef.current;
+    if (!tableWrapper) return;
+    var maxScrollTop = tableWrapper.scrollHeight - tableWrapper.clientHeight;
+    var maxScrollLeft = tableWrapper.scrollWidth - tableWrapper.clientWidth;
+    var scrollValue = axis === "top" ? Math.min(value, maxScrollTop) : Math.min(value, maxScrollLeft);
+    if (axis === "top") {
+      tableWrapper.scrollTop = scrollValue;
+    } else {
+      tableWrapper.scrollLeft = scrollValue;
+    }
+  }, []);
+
+  // 便捷滾動方法
+  var scrollTo = React.useCallback(function () {
+    var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    var top = options.top,
+      left = options.left;
+    if (top !== undefined) scrollControl("top", top);
+    if (left !== undefined) scrollControl("left", left);
+  }, [scrollControl]);
+
+  // 滾動到頂部
+  var scrollToTop = React.useCallback(function () {
+    scrollControl("top", 0);
+  }, [scrollControl]);
+
+  // 滾動到底部
+  var scrollToBottom = React.useCallback(function () {
+    var tableWrapper = tableWrapperRef.current;
+    if (!tableWrapper) return;
+    scrollControl("top", tableWrapper.scrollHeight);
+  }, [scrollControl]);
+
+  // 滾動到最左邊
+  var scrollToLeft = React.useCallback(function () {
+    scrollControl("left", 0);
+  }, [scrollControl]);
+
+  // 滾動到最右邊
+  var scrollToRight = React.useCallback(function () {
+    var tableWrapper = tableWrapperRef.current;
+    if (!tableWrapper) return;
+    scrollControl("left", tableWrapper.scrollWidth);
+  }, [scrollControl]);
+
+  // 取得滾動狀態
+  var getScrollState = React.useCallback(function () {
+    return _objectSpread2(_objectSpread2(_objectSpread2({}, scrollPosition), scrollbarInfo), {}, {
+      isAtTop: scrollPosition.verticalPercent === 0,
+      isAtBottom: scrollPosition.verticalPercent === 100,
+      isAtLeft: scrollPosition.horizontalPercent === 0,
+      isAtRight: scrollPosition.horizontalPercent === 100
+    });
+  }, [scrollPosition, scrollbarInfo]);
+  return {
+    // 狀態
+    scrollPosition: scrollPosition,
+    scrollbarInfo: scrollbarInfo,
+    // Ref
+    tableWrapperRef: tableWrapperRef,
+    // 控制函數
+    scrollControl: scrollControl,
+    scrollTo: scrollTo,
+    scrollToTop: scrollToTop,
+    scrollToBottom: scrollToBottom,
+    scrollToLeft: scrollToLeft,
+    scrollToRight: scrollToRight,
+    // 取得狀態函數
+    getScrollState: getScrollState
+  };
+}
+
+/**
+ * useTableFilter - 處理表格篩選邏輯的 Hook
+ *
+ * @param {Object} options - 配置選項
+ * @param {Function} options.onFilterChange - 當篩選變化時的 callback（可選，用於通知外部重置分頁等）
+ *
+ * @returns {Object} - 返回篩選狀態和操作函數
+ */
+function useTableFilter() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+    onFilterChange = _ref.onFilterChange;
+  // 基本篩選狀態
+  var _useState = React.useState(""),
+    _useState2 = _slicedToArray(_useState, 2),
+    filterText = _useState2[0],
+    setFilterText = _useState2[1];
+  var _useState3 = React.useState("all"),
+    _useState4 = _slicedToArray(_useState3, 2),
+    filterColumn = _useState4[0],
+    setFilterColumn = _useState4[1];
+
+  // 進階篩選狀態
+  var _useState5 = React.useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    showAdvancedFilter = _useState6[0],
+    setShowAdvancedFilter = _useState6[1];
+  var _useState7 = React.useState({}),
+    _useState8 = _slicedToArray(_useState7, 2),
+    advancedFilters = _useState8[0],
+    setAdvancedFilters = _useState8[1];
+
+  // 更新篩選文字
+  var updateFilterText = React.useCallback(function (value) {
+    setFilterText(value);
+    onFilterChange === null || onFilterChange === void 0 || onFilterChange();
+  }, [onFilterChange]);
+
+  // 更新篩選欄位
+  var updateFilterColumn = React.useCallback(function (value) {
+    setFilterColumn(value);
+    onFilterChange === null || onFilterChange === void 0 || onFilterChange();
+  }, [onFilterChange]);
+
+  // 重置所有篩選
+  var resetFilter = React.useCallback(function () {
+    setFilterText("");
+    setFilterColumn("all");
+    setAdvancedFilters({});
+    onFilterChange === null || onFilterChange === void 0 || onFilterChange();
+  }, [onFilterChange]);
+
+  // 處理進階篩選變更
+  var handleAdvancedFilterChange = React.useCallback(function (columnKey, value) {
+    setAdvancedFilters(function (prev) {
+      return _objectSpread2(_objectSpread2({}, prev), {}, _defineProperty$1({}, columnKey, value));
+    });
+    onFilterChange === null || onFilterChange === void 0 || onFilterChange();
+  }, [onFilterChange]);
+
+  // 清除進階篩選
+  var clearAdvancedFilters = React.useCallback(function () {
+    setAdvancedFilters({});
+    onFilterChange === null || onFilterChange === void 0 || onFilterChange();
+  }, [onFilterChange]);
+
+  // 切換進階篩選顯示
+  var toggleAdvancedFilter = React.useCallback(function () {
+    setShowAdvancedFilter(function (prev) {
+      return !prev;
+    });
+  }, []);
+
+  // 檢查是否有任何篩選條件
+  var hasBasicFilter = filterText !== "" || filterColumn !== "all";
+  var hasAdvancedFilter = Object.keys(advancedFilters).length > 0;
+  var hasAnyFilter = hasBasicFilter || hasAdvancedFilter;
+
+  // 計算活動的篩選數量
+  var activeFiltersCount = Object.keys(advancedFilters).filter(function (key) {
+    return advancedFilters[key];
+  }).length + (filterText ? 1 : 0);
+
+  // 取得篩選狀態
+  var getFilterState = React.useCallback(function () {
+    return {
+      filterText: filterText,
+      filterColumn: filterColumn,
+      advancedFilters: advancedFilters,
+      showAdvancedFilter: showAdvancedFilter,
+      hasBasicFilter: hasBasicFilter,
+      hasAdvancedFilter: hasAdvancedFilter,
+      hasAnyFilter: hasAnyFilter,
+      activeFiltersCount: activeFiltersCount
+    };
+  }, [filterText, filterColumn, advancedFilters, showAdvancedFilter, hasBasicFilter, hasAdvancedFilter, hasAnyFilter, activeFiltersCount]);
+  return {
+    // 狀態
+    filterText: filterText,
+    filterColumn: filterColumn,
+    showAdvancedFilter: showAdvancedFilter,
+    advancedFilters: advancedFilters,
+    // 狀態 setters (直接暴露以供特殊情況使用)
+    setFilterText: setFilterText,
+    setFilterColumn: setFilterColumn,
+    setShowAdvancedFilter: setShowAdvancedFilter,
+    setAdvancedFilters: setAdvancedFilters,
+    // 操作函數
+    updateFilterText: updateFilterText,
+    updateFilterColumn: updateFilterColumn,
+    resetFilter: resetFilter,
+    handleAdvancedFilterChange: handleAdvancedFilterChange,
+    clearAdvancedFilters: clearAdvancedFilters,
+    toggleAdvancedFilter: toggleAdvancedFilter,
+    // 計算屬性
+    hasBasicFilter: hasBasicFilter,
+    hasAdvancedFilter: hasAdvancedFilter,
+    hasAnyFilter: hasAnyFilter,
+    activeFiltersCount: activeFiltersCount,
+    // 取得狀態函數
+    getFilterState: getFilterState
+  };
+}
+
+/**
+ * useResponsive - 處理響應式螢幕尺寸檢測的 Hook
+ *
+ * @param {Object} options - 配置選項
+ * @param {number} options.mobileBreakpoint - 手機斷點（預設 768）
+ * @param {number} options.tabletBreakpoint - 平板斷點（預設 992）
+ *
+ * @returns {Object} - 返回響應式狀態
+ */
+function useResponsive() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+    _ref$mobileBreakpoint = _ref.mobileBreakpoint,
+    mobileBreakpoint = _ref$mobileBreakpoint === void 0 ? 768 : _ref$mobileBreakpoint,
+    _ref$tabletBreakpoint = _ref.tabletBreakpoint,
+    tabletBreakpoint = _ref$tabletBreakpoint === void 0 ? 992 : _ref$tabletBreakpoint;
+  var _useState = React.useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isMobile = _useState2[0],
+    setIsMobile = _useState2[1];
+  var _useState3 = React.useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isTablet = _useState4[0],
+    setIsTablet = _useState4[1];
+  var _useState5 = React.useState(typeof window !== "undefined" ? window.innerWidth : 0),
+    _useState6 = _slicedToArray(_useState5, 2),
+    screenWidth = _useState6[0],
+    setScreenWidth = _useState6[1];
+  var _useState7 = React.useState(typeof window !== "undefined" ? window.innerHeight : 0),
+    _useState8 = _slicedToArray(_useState7, 2),
+    screenHeight = _useState8[0],
+    setScreenHeight = _useState8[1];
+  React.useEffect(function () {
+    var checkScreenSize = function checkScreenSize() {
+      var width = window.innerWidth;
+      var height = window.innerHeight;
+      setScreenWidth(width);
+      setScreenHeight(height);
+      setIsMobile(width < mobileBreakpoint);
+      setIsTablet(width >= mobileBreakpoint && width < tabletBreakpoint);
+    };
+
+    // 初始檢查
+    checkScreenSize();
+
+    // 監聽視窗大小變化
+    window.addEventListener("resize", checkScreenSize);
+    return function () {
+      return window.removeEventListener("resize", checkScreenSize);
+    };
+  }, [mobileBreakpoint, tabletBreakpoint]);
+
+  // 計算屬性
+  var isDesktop = !isMobile && !isTablet;
+
+  // 取得響應式狀態
+  var getResponsiveState = React.useCallback(function () {
+    return {
+      isMobile: isMobile,
+      isTablet: isTablet,
+      isDesktop: isDesktop,
+      screenWidth: screenWidth,
+      screenHeight: screenHeight
+    };
+  }, [isMobile, isTablet, isDesktop, screenWidth, screenHeight]);
+  return {
+    // 狀態
+    isMobile: isMobile,
+    isTablet: isTablet,
+    isDesktop: isDesktop,
+    screenWidth: screenWidth,
+    screenHeight: screenHeight,
+    // 取得狀態函數
+    getResponsiveState: getResponsiveState
+  };
+}
+
+/**
+ * useTableSort - 處理表格排序邏輯的 Hook
+ *
+ * @param {Object} options - 配置選項
+ * @param {boolean} options.sortable - 是否可排序（預設 true）
+ * @param {Function} options.onSortChange - 當排序變化時的 callback（可選）
+ *
+ * @returns {Object} - 返回排序狀態和操作函數
+ */
+function useTableSort() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+    _ref$sortable = _ref.sortable,
+    sortable = _ref$sortable === void 0 ? true : _ref$sortable,
+    onSortChange = _ref.onSortChange;
+  // 排序狀態
+  var _useState = React.useState({
+      key: null,
+      direction: "asc"
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    sortConfig = _useState2[0],
+    setSortConfig = _useState2[1];
+
+  // 處理排序
+  var handleSort = React.useCallback(function (key) {
+    if (!sortable) return;
+    setSortConfig(function (prev) {
+      var direction = "asc";
+      if (prev.key === key && prev.direction === "asc") {
+        direction = "desc";
+      }
+      return {
+        key: key,
+        direction: direction
+      };
+    });
+    onSortChange === null || onSortChange === void 0 || onSortChange();
+  }, [sortable, onSortChange]);
+
+  // 重置排序
+  var resetSort = React.useCallback(function () {
+    setSortConfig({
+      key: null,
+      direction: "asc"
+    });
+    onSortChange === null || onSortChange === void 0 || onSortChange();
+  }, [onSortChange]);
+
+  // 設定排序
+  var setSort = React.useCallback(function (key) {
+    var direction = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "asc";
+    setSortConfig({
+      key: key,
+      direction: direction
+    });
+    onSortChange === null || onSortChange === void 0 || onSortChange();
+  }, [onSortChange]);
+
+  // 切換排序方向
+  var toggleSortDirection = React.useCallback(function () {
+    setSortConfig(function (prev) {
+      return _objectSpread2(_objectSpread2({}, prev), {}, {
+        direction: prev.direction === "asc" ? "desc" : "asc"
+      });
+    });
+    onSortChange === null || onSortChange === void 0 || onSortChange();
+  }, [onSortChange]);
+
+  // 計算屬性
+  var isSorted = sortConfig.key !== null;
+  var sortBy = sortConfig.key;
+  var sortOrder = sortConfig.direction;
+
+  // 取得排序狀態
+  var getSortState = React.useCallback(function () {
+    return {
+      sortConfig: sortConfig,
+      sortBy: sortBy,
+      sortOrder: sortOrder,
+      isSorted: isSorted
+    };
+  }, [sortConfig, sortBy, sortOrder, isSorted]);
+  return {
+    // 狀態
+    sortConfig: sortConfig,
+    sortBy: sortBy,
+    sortOrder: sortOrder,
+    isSorted: isSorted,
+    // 狀態 setter
+    setSortConfig: setSortConfig,
+    // 操作函數
+    handleSort: handleSort,
+    resetSort: resetSort,
+    setSort: setSort,
+    toggleSortDirection: toggleSortDirection,
+    // 取得狀態函數
+    getSortState: getSortState
+  };
+}
+
+/**
+ * 表格尺寸計算 Hook
+ * 處理欄位寬度計算、行高計算等尺寸相關邏輯
+ *
+ * @param {Object} options - 配置選項
+ * @param {Array} options.columns - 欄位配置陣列
+ * @param {boolean} options.enableAutoWidth - 是否啟用自動寬度計算
+ * @param {string|number} options.tableWidth - 表格寬度（支援百分比或數字）
+ * @param {number} options.tableContainerWidth - 表格容器寬度（像素）
+ * @param {number} options.mainRowHeight - 主要行高
+ * @param {number} options.mainColumnWidth - 主要欄位寬度
+ * @param {boolean} options.isDev - 開發模式（顯示 debug 訊息）
+ * @returns {Object} 包含尺寸計算相關的函數
+ */
+var useTableDimensions = function useTableDimensions(_ref) {
+  var _ref$columns = _ref.columns,
+    columns = _ref$columns === void 0 ? [] : _ref$columns,
+    _ref$enableAutoWidth = _ref.enableAutoWidth,
+    enableAutoWidth = _ref$enableAutoWidth === void 0 ? false : _ref$enableAutoWidth,
+    _ref$tableWidth = _ref.tableWidth,
+    tableWidth = _ref$tableWidth === void 0 ? "200%" : _ref$tableWidth,
+    _ref$tableContainerWi = _ref.tableContainerWidth,
+    tableContainerWidth = _ref$tableContainerWi === void 0 ? 1000 : _ref$tableContainerWi,
+    mainRowHeight = _ref.mainRowHeight,
+    mainColumnWidth = _ref.mainColumnWidth,
+    _ref$isDev = _ref.isDev,
+    isDev = _ref$isDev === void 0 ? false : _ref$isDev;
+  /**
+   * 計算每個欄位的實際寬度
+   * @returns {Object|null} 欄位寬度映射 { columnId: widthInPx } 或 null（不啟用時）
+   */
+  var calculateColumnWidths = React.useMemo(function () {
+    // 如果沒有啟用自動寬度，返回 null（使用舊邏輯）
+    if (!enableAutoWidth) return null;
+
+    // 解析 tableWidth（支援百分比字串，如 "200%"）
+    var widthPercentage = typeof tableWidth === "string" && tableWidth.endsWith("%") ? parseFloat(tableWidth) : 200; // 預設 200%
+
+    // 計算實際總寬度
+    var totalWidth = tableContainerWidth * widthPercentage / 100;
+
+    // 統計固定寬度和彈性欄位
+    var totalFixedWidth = 0;
+    var totalFlexRatio = 0;
+    var widthMap = {};
+
+    // 第一輪：計算固定寬度總和和彈性比例總和
+    columns.forEach(function (column) {
+      if (column.width && typeof column.width === "number") {
+        // 固定 px 寬度
+        totalFixedWidth += column.width;
+        widthMap[column.dataField] = {
+          type: "fixed",
+          value: column.width
+        };
+      } else {
+        // 彈性寬度（使用 flexRatio 或預設 1）
+        var flexRatio = column.flexRatio || 1;
+        totalFlexRatio += flexRatio;
+        widthMap[column.dataField] = {
+          type: "flex",
+          ratio: flexRatio
+        };
+      }
+    });
+
+    // 計算剩餘寬度
+    var remainingWidth = totalWidth - totalFixedWidth;
+
+    // 第二輪：計算彈性欄位的實際寬度
+    var result = {};
+    columns.forEach(function (column) {
+      var info = widthMap[column.dataField];
+      if (info.type === "fixed") {
+        result[column.dataField] = info.value;
+      } else {
+        // 按比例分配剩餘寬度
+        result[column.dataField] = totalFlexRatio > 0 ? remainingWidth * info.ratio / totalFlexRatio : 0;
+      }
+    });
+    if (isDev) {
+      console.log("📊 自動寬度計算:", {
+        totalWidth: totalWidth,
+        totalFixedWidth: totalFixedWidth,
+        remainingWidth: remainingWidth,
+        totalFlexRatio: totalFlexRatio,
+        result: result
+      });
+    }
+    return result;
+  }, [columns, enableAutoWidth, tableWidth, tableContainerWidth, isDev]);
+
+  /**
+   * 通用的尺寸計算函數
+   * @param {number} mainSize - 主要尺寸
+   * @param {number} singleSize - 單獨尺寸
+   * @returns {string} CSS 尺寸值
+   */
+  var calculateSize = React.useCallback(function (mainSize, singleSize) {
+    if (singleSize) return "".concat(singleSize, "px");
+    if (mainSize) return "".concat(mainSize, "px");
+    return "auto";
+  }, []);
+
+  /**
+   * 計算行高
+   * @param {number} singleRowHeight - 單獨行高
+   * @returns {string} CSS 高度值
+   */
+  var rowHeight = React.useCallback(function (singleRowHeight) {
+    return calculateSize(mainRowHeight, singleRowHeight);
+  }, [mainRowHeight, calculateSize]);
+
+  /**
+   * 計算欄位寬度
+   * @param {number} singleColumnWidth - 單獨欄位寬度
+   * @returns {string} CSS 寬度值
+   */
+  var columnWidth = React.useCallback(function (singleColumnWidth) {
+    return calculateSize(mainColumnWidth, singleColumnWidth);
+  }, [mainColumnWidth, calculateSize]);
+
+  /**
+   * 獲取網格尺寸（包含寬度和高度）
+   * @param {Object} column - 欄位配置
+   * @param {Object} options - 選項
+   * @param {boolean} options.isTitle - 是否為標題列
+   * @returns {Object} CSS 尺寸物件
+   */
+  var getGridSize = React.useCallback(function (column) {
+    var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    var _options$isTitle = options.isTitle,
+      isTitle = _options$isTitle === void 0 ? false : _options$isTitle;
+    var width = column.width,
+      height = column.height,
+      _column$minWidth = column.minWidth,
+      minWidth = _column$minWidth === void 0 ? width : _column$minWidth,
+      _column$maxWidth = column.maxWidth,
+      maxWidth = _column$maxWidth === void 0 ? width : _column$maxWidth,
+      _column$minHeight = column.minHeight,
+      minHeight = _column$minHeight === void 0 ? height : _column$minHeight,
+      _column$maxHeight = column.maxHeight,
+      maxHeight = _column$maxHeight === void 0 ? height : _column$maxHeight;
+    var finalWidth, finalMinWidth, finalMaxWidth;
+    if (enableAutoWidth && calculateColumnWidths) {
+      // 自動計算的寬度
+      var calculatedWidth = calculateColumnWidths[column.dataField];
+      if (calculatedWidth) {
+        finalWidth = "".concat(calculatedWidth, "px");
+        finalMinWidth = minWidth ? "".concat(minWidth, "px") : "".concat(calculatedWidth * 0.5, "px"); // 預設最小為 50%
+        finalMaxWidth = maxWidth ? "".concat(maxWidth, "px") : "".concat(calculatedWidth * 1.5, "px"); // 預設最大為 150%
+      } else {
+        // 如果計算失敗，fallback 到舊邏輯
+        finalWidth = columnWidth(width);
+        finalMinWidth = columnWidth(minWidth);
+        finalMaxWidth = columnWidth(maxWidth);
+      }
+    } else {
+      // 舊邏輯：保持原樣，向後兼容
+      finalWidth = columnWidth(width);
+      finalMinWidth = columnWidth(minWidth);
+      finalMaxWidth = columnWidth(maxWidth);
+    }
+
+    // 基本結果（只有寬度）
+    var result = {
+      width: finalWidth,
+      minWidth: finalMinWidth,
+      maxWidth: finalMaxWidth
+    };
+
+    // 只有當 isTitle = false 時才添加高度相關屬性
+    if (!isTitle) {
+      var finalHeight = rowHeight(height);
+      var finalMinHeight = rowHeight(minHeight);
+      var finalMaxHeight = rowHeight(maxHeight);
+      result.height = finalHeight;
+      result.minHeight = finalMinHeight;
+      result.maxHeight = finalMaxHeight;
+    }
+    return result;
+  }, [enableAutoWidth, calculateColumnWidths, columnWidth, rowHeight]);
+  return {
+    getGridSize: getGridSize,
+    calculateColumnWidths: calculateColumnWidths,
+    rowHeight: rowHeight,
+    columnWidth: columnWidth
+  };
+};
+
+/**
+ * 表格分頁 Hook
+ * 處理分頁狀態和邏輯
+ *
+ * @param {Object} options - 配置選項
+ * @param {number} options.pageSize - 初始每頁顯示數量
+ * @param {number} options.totalCount - 總記錄數
+ * @returns {Object} 包含分頁相關的狀態和方法
+ */
+var useTablePagination = function useTablePagination(_ref) {
+  var _ref$pageSize = _ref.pageSize,
+    pageSize = _ref$pageSize === void 0 ? 10 : _ref$pageSize,
+    _ref$totalCount = _ref.totalCount,
+    totalCount = _ref$totalCount === void 0 ? 0 : _ref$totalCount;
+  // 分頁狀態 (使用 0-based index)
+  var _useState = React.useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    currentPage = _useState2[0],
+    setCurrentPage = _useState2[1];
+  var _useState3 = React.useState(pageSize),
+    _useState4 = _slicedToArray(_useState3, 2),
+    currentPageSize = _useState4[0],
+    setCurrentPageSize = _useState4[1];
+
+  // 計算總頁數
+  var totalPages = React.useMemo(function () {
+    return Math.ceil(totalCount / currentPageSize);
+  }, [totalCount, currentPageSize]);
+
+  // 分頁處理
+  var handlePageChange = React.useCallback(function (page) {
+    setCurrentPage(page);
+  }, []);
+
+  // 處理每頁顯示數量變更
+  var handlePageSizeChange = React.useCallback(function (newPageSize) {
+    setCurrentPageSize(newPageSize);
+    setCurrentPage(0); // 重置到第一頁
+  }, []);
+
+  // 重置分頁到第一頁
+  var resetToFirstPage = React.useCallback(function () {
+    setCurrentPage(0);
+  }, []);
+
+  // 分頁資訊（供外部使用）
+  var paginationInfo = React.useMemo(function () {
+    return {
+      currentPage: currentPage,
+      currentPageSize: currentPageSize,
+      totalPages: totalPages,
+      totalCount: totalCount,
+      hasNextPage: currentPage < totalPages - 1,
+      hasPreviousPage: currentPage > 0,
+      startIndex: currentPage * currentPageSize + 1,
+      endIndex: Math.min((currentPage + 1) * currentPageSize, totalCount),
+      isFirstPage: currentPage === 0,
+      isLastPage: currentPage === totalPages - 1
+    };
+  }, [currentPage, currentPageSize, totalPages, totalCount]);
+  return {
+    // 狀態
+    currentPage: currentPage,
+    setCurrentPage: setCurrentPage,
+    currentPageSize: currentPageSize,
+    setCurrentPageSize: setCurrentPageSize,
+    totalPages: totalPages,
+    // 方法
+    handlePageChange: handlePageChange,
+    handlePageSizeChange: handlePageSizeChange,
+    resetToFirstPage: resetToFirstPage,
+    // 分頁資訊
+    paginationInfo: paginationInfo
+  };
+};
+
+/**
+ * 表格 API Hook
+ * 處理表格對外暴露的所有方法和狀態
+ * 使用 useImperativeHandle 將內部狀態和方法暴露給 ref
+ *
+ * @param {Object} options - 配置選項
+ * @param {React.Ref} options.ref - 外部傳入的 ref
+ * @param {Object} options.dataState - 資料狀態
+ * @param {Object} options.paginationState - 分頁狀態
+ * @param {Object} options.filterState - 篩選狀態
+ * @param {Object} options.sortState - 排序狀態
+ * @param {Object} options.scrollState - 滾動狀態
+ * @param {Object} options.responsiveState - 響應式狀態
+ * @param {Object} options.config - 表格配置
+ * @param {Object} options.interactionState - 互動狀態
+ */
+var useTableApi = function useTableApi(_ref) {
+  var ref = _ref.ref,
+    _ref$dataState = _ref.dataState,
+    data = _ref$dataState.data,
+    loading = _ref$dataState.loading,
+    error = _ref$dataState.error,
+    totalCount = _ref$dataState.totalCount,
+    executeDataRequest = _ref$dataState.executeDataRequest,
+    _ref$paginationState = _ref.paginationState,
+    currentPage = _ref$paginationState.currentPage,
+    setCurrentPage = _ref$paginationState.setCurrentPage,
+    currentPageSize = _ref$paginationState.currentPageSize,
+    setCurrentPageSize = _ref$paginationState.setCurrentPageSize,
+    totalPages = _ref$paginationState.totalPages,
+    _ref$filterState = _ref.filterState,
+    filterText = _ref$filterState.filterText,
+    setFilterText = _ref$filterState.setFilterText,
+    filterColumn = _ref$filterState.filterColumn,
+    setFilterColumn = _ref$filterState.setFilterColumn,
+    advancedFilters = _ref$filterState.advancedFilters,
+    setAdvancedFilters = _ref$filterState.setAdvancedFilters,
+    showAdvancedFilter = _ref$filterState.showAdvancedFilter,
+    _ref$sortState = _ref.sortState,
+    sortConfig = _ref$sortState.sortConfig,
+    resetSort = _ref$sortState.resetSort,
+    _ref$scrollState = _ref.scrollState,
+    scrollPosition = _ref$scrollState.scrollPosition,
+    scrollbarInfo = _ref$scrollState.scrollbarInfo,
+    tableWrapperRef = _ref$scrollState.tableWrapperRef,
+    scrollControl = _ref$scrollState.scrollControl,
+    _ref$responsiveState = _ref.responsiveState,
+    isMobile = _ref$responsiveState.isMobile,
+    isTablet = _ref$responsiveState.isTablet,
+    _ref$config = _ref.config,
+    sortable = _ref$config.sortable,
+    filterable = _ref$config.filterable,
+    className = _ref$config.className,
+    enableAutoWidth = _ref$config.enableAutoWidth,
+    isDev = _ref$config.isDev,
+    columns = _ref$config.columns,
+    name = _ref$config.name,
+    isHovered = _ref.interactionState.isHovered;
+  React.useImperativeHandle(ref, function () {
+    return {
+      // ========== 數據操作方法 ==========
+
+      // 執行數據請求的函數 - 這是外部會調用的主要函數
+      executeRequest: function executeRequest() {
+        var customParams = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+        var params = _objectSpread2({
+          page: currentPage,
+          pageSize: currentPageSize,
+          search: filterText,
+          searchColumn: filterColumn,
+          advancedFilters: advancedFilters,
+          sortBy: sortConfig.key,
+          sortOrder: sortConfig.direction
+        }, customParams);
+        executeDataRequest(params);
+      },
+      // 重新載入（使用當前參數）
+      reload: function reload() {
+        var params = {
+          page: currentPage,
+          pageSize: currentPageSize,
+          search: filterText,
+          searchColumn: filterColumn,
+          advancedFilters: advancedFilters,
+          sortBy: sortConfig.key,
+          sortOrder: sortConfig.direction
+        };
+        executeDataRequest(params);
+      },
+      // 重置篩選並執行請求
+      resetFilters: function resetFilters() {
+        setFilterText("");
+        setFilterColumn("all");
+        setAdvancedFilters({});
+        setCurrentPage(0);
+        resetSort();
+
+        // 重置後立即執行請求
+        var params = {
+          page: 0,
+          pageSize: currentPageSize,
+          search: "",
+          searchColumn: "all",
+          advancedFilters: {},
+          sortBy: null,
+          sortOrder: "asc"
+        };
+        executeDataRequest(params);
+      },
+      // ========== 分頁操作方法 ==========
+
+      setPage: function setPage(page) {
+        setCurrentPage(page);
+      },
+      setPageSize: function setPageSize(size) {
+        setCurrentPageSize(size);
+        setCurrentPage(0);
+      },
+      // ========== 狀態獲取方法 ==========
+
+      // 完整的狀態 API - 提供所有詳細信息
+      getState: function getState() {
+        return {
+          // 基本數據狀態
+          data: data,
+          loading: loading,
+          error: error,
+          totalCount: totalCount,
+          tableWrapperRef: tableWrapperRef.current,
+          tableName: name,
+          // 分頁狀態
+          pagination: {
+            currentPage: currentPage,
+            pageSize: currentPageSize,
+            totalPages: Math.ceil(totalCount / currentPageSize),
+            hasNextPage: currentPage < Math.ceil(totalCount / currentPageSize),
+            hasPreviousPage: currentPage > 1,
+            startIndex: (currentPage - 1) * currentPageSize + 1,
+            endIndex: Math.min(currentPage * currentPageSize, totalCount),
+            isFirstPage: currentPage === 1,
+            isLastPage: currentPage === Math.ceil(totalCount / currentPageSize)
+          },
+          // 滾動狀態
+          scroll: {
+            position: scrollPosition,
+            scrollbar: scrollbarInfo,
+            isAtTop: scrollPosition.verticalPercent === 0,
+            isAtBottom: scrollPosition.verticalPercent === 100,
+            isAtLeft: scrollPosition.horizontalPercent === 0,
+            isAtRight: scrollPosition.horizontalPercent === 100,
+            canScrollVertically: scrollbarInfo.hasVertical,
+            canScrollHorizontally: scrollbarInfo.hasHorizontal
+          },
+          // 排序狀態
+          sort: {
+            sortConfig: sortConfig,
+            sortBy: sortConfig.key,
+            sortOrder: sortConfig.direction,
+            isSorted: sortConfig.key !== null
+          },
+          // 篩選狀態
+          filter: {
+            filterText: filterText,
+            filterColumn: filterColumn,
+            advancedFilters: advancedFilters,
+            showAdvancedFilter: showAdvancedFilter,
+            hasBasicFilter: filterText !== "" || filterColumn !== "all",
+            hasAdvancedFilter: Object.keys(advancedFilters).length > 0,
+            hasAnyFilter: filterText !== "" || filterColumn !== "all" || Object.keys(advancedFilters).length > 0,
+            activeFiltersCount: Object.keys(advancedFilters).filter(function (key) {
+              return advancedFilters[key];
+            }).length + (filterText ? 1 : 0)
+          },
+          // 表格配置狀態
+          config: {
+            sortable: sortable,
+            filterable: filterable,
+            className: className,
+            enableAutoWidth: enableAutoWidth,
+            isDev: isDev,
+            columnsCount: columns.length,
+            columns: columns.map(function (col) {
+              return {
+                dataField: col.dataField,
+                title: col.title,
+                width: col.width,
+                sortable: sortable
+              };
+            })
+          },
+          // 響應式狀態
+          responsive: {
+            isMobile: isMobile,
+            isTablet: isTablet,
+            isDesktop: !isMobile && !isTablet,
+            screenWidth: window.innerWidth,
+            screenHeight: window.innerHeight
+          },
+          // 元數據
+          meta: {
+            timestamp: new Date().toISOString(),
+            version: "1.0.0",
+            componentName: "UdiTable"
+          },
+          isHovered: isHovered
+        };
+      },
+      // 簡化版狀態 API - 只返回核心信息
+      getCoreState: function getCoreState() {
+        return {
+          currentPage: currentPage,
+          totalPages: Math.ceil(totalCount / currentPageSize),
+          totalCount: totalCount,
+          pageSize: currentPageSize,
+          loading: loading,
+          error: error,
+          scrollPosition: scrollPosition,
+          hasData: data.length > 0
+        };
+      },
+      // 滾動位置 API
+      getScrollState: function getScrollState() {
+        return _objectSpread2(_objectSpread2(_objectSpread2({}, scrollPosition), scrollbarInfo), {}, {
+          isAtTop: scrollPosition.verticalPercent === 0,
+          isAtBottom: scrollPosition.verticalPercent === 100,
+          isAtLeft: scrollPosition.horizontalPercent === 0,
+          isAtRight: scrollPosition.horizontalPercent === 100
+        });
+      },
+      // 分頁狀態 API
+      getPaginationState: function getPaginationState() {
+        return {
+          currentPage: currentPage + 1,
+          // Display 1-based page number
+          totalPages: Math.ceil(totalCount / currentPageSize),
+          pageSize: currentPageSize,
+          totalCount: totalCount,
+          hasNextPage: currentPage < Math.ceil(totalCount / currentPageSize) - 1,
+          hasPreviousPage: currentPage > 0,
+          startIndex: currentPage * currentPageSize + 1,
+          endIndex: Math.min((currentPage + 1) * currentPageSize, totalCount)
+        };
+      },
+      // 篩選狀態 API
+      getFilterState: function getFilterState() {
+        return {
+          filterText: filterText,
+          filterColumn: filterColumn,
+          advancedFilters: advancedFilters,
+          showAdvancedFilter: showAdvancedFilter,
+          hasAnyFilter: filterText !== "" || filterColumn !== "all" || Object.keys(advancedFilters).length > 0
+        };
+      },
+      // 排序狀態 API
+      getSortState: function getSortState() {
+        return _objectSpread2(_objectSpread2({}, sortConfig), {}, {
+          isSorted: sortConfig.key !== null
+        });
+      },
+      // 滾動控制 API
+      scrollControl: scrollControl,
+      tableWrapperRef: tableWrapperRef.current
+    };
+  }, [data, loading, totalCount, error, currentPage, currentPageSize, sortConfig, filterText, filterColumn, advancedFilters, showAdvancedFilter, scrollPosition, scrollbarInfo, enableAutoWidth, isMobile, isTablet, sortable, filterable, className, isDev, columns, executeDataRequest, setFilterText, setFilterColumn, setAdvancedFilters, setCurrentPage, setCurrentPageSize, resetSort, scrollControl, tableWrapperRef, totalPages, name, isHovered]);
+};
+
+/**
+ * 表格互動 Hook
+ * 處理表格的互動狀態（hover、dropdown 等）
+ *
+ * @param {Object} options - 配置選項
+ * @param {boolean} options.syncTableControl - 是否同步表格控制
+ * @param {React.RefObject} options.currentTableRef - 當前表格 ref
+ * @param {React.RefObject} options.tableWrapperRef - 表格容器 ref
+ * @returns {Object} 包含互動狀態和處理函數
+ */
+var useTableInteraction = function useTableInteraction(_ref) {
+  var _ref$syncTableControl = _ref.syncTableControl,
+    syncTableControl = _ref$syncTableControl === void 0 ? false : _ref$syncTableControl,
+    _ref$currentTableRef = _ref.currentTableRef,
+    currentTableRef = _ref$currentTableRef === void 0 ? null : _ref$currentTableRef,
+    _ref$tableWrapperRef = _ref.tableWrapperRef,
+    tableWrapperRef = _ref$tableWrapperRef === void 0 ? null : _ref$tableWrapperRef;
+  // 互動狀態
+  var _useState = React.useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isHovered = _useState2[0],
+    setIsHovered = _useState2[1];
+  var _useState3 = React.useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isDropdownOpen = _useState4[0],
+    setIsDropdownOpen = _useState4[1];
+
+  // 滑鼠進入處理
+  var handleMouseEnter = React.useCallback(function () {
+    setIsHovered(true);
+    if (syncTableControl && currentTableRef && tableWrapperRef) {
+      currentTableRef.current = tableWrapperRef.current;
+    }
+  }, [syncTableControl, currentTableRef, tableWrapperRef]);
+
+  // 滑鼠離開處理（延遲 200ms）
+  var handleMouseLeave = React.useCallback(function () {
+    setTimeout(function () {
+      setIsHovered(false);
+    }, 200);
+  }, []);
+
+  // Dropdown 獲得焦點處理
+  var handleDropdownFocus = React.useCallback(function () {
+    setIsDropdownOpen(true);
+  }, []);
+
+  // Dropdown 失去焦點處理
+  var handleDropdownBlur = React.useCallback(function () {
+    setIsDropdownOpen(false);
+  }, []);
+  return {
+    // 狀態
+    isHovered: isHovered,
+    isDropdownOpen: isDropdownOpen,
+    // 處理函數
+    handleMouseEnter: handleMouseEnter,
+    handleMouseLeave: handleMouseLeave,
+    handleDropdownFocus: handleDropdownFocus,
+    handleDropdownBlur: handleDropdownBlur
+  };
+};
+
+var UdiTable = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var _ref$current;
+  var _ref$onDataRequest = _ref.onDataRequest,
+    onDataRequest = _ref$onDataRequest === void 0 ? null : _ref$onDataRequest,
+    _ref$columns = _ref.columns,
+    columns = _ref$columns === void 0 ? [] : _ref$columns,
+    _ref$pageSize = _ref.pageSize,
+    pageSize = _ref$pageSize === void 0 ? 10 : _ref$pageSize,
+    _ref$sortable = _ref.sortable,
+    sortable = _ref$sortable === void 0 ? true : _ref$sortable,
+    _ref$filterable = _ref.filterable,
+    filterable = _ref$filterable === void 0 ? true : _ref$filterable,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? "" : _ref$className,
+    _ref$isDev = _ref.isDev,
+    isDev = _ref$isDev === void 0 ? false : _ref$isDev,
+    _ref$syncTableControl = _ref.syncTableControl,
+    syncTableControl = _ref$syncTableControl === void 0 ? false : _ref$syncTableControl,
+    _ref$currentTableRef = _ref.currentTableRef,
+    currentTableRef = _ref$currentTableRef === void 0 ? {
+      currentTableRef: currentTableRef
+    } : _ref$currentTableRef,
+    _ref$name = _ref.name,
+    name = _ref$name === void 0 ? null : _ref$name,
+    setTablePage = _ref.setTablePage,
+    _ref$actions = _ref.actions,
+    actions = _ref$actions === void 0 ? [] : _ref$actions,
+    _ref$actionFirst = _ref.actionFirst,
+    actionFirst = _ref$actionFirst === void 0 ? false : _ref$actionFirst,
+    _ref$paginationEnable = _ref.paginationEnabled,
+    paginationEnabled = _ref$paginationEnable === void 0 ? true : _ref$paginationEnable,
+    _ref$tableHeight = _ref.tableHeight,
+    tableHeight = _ref$tableHeight === void 0 ? "60px" : _ref$tableHeight,
+    _ref$tableWidth = _ref.tableWidth,
+    tableWidth = _ref$tableWidth === void 0 ? "200%" : _ref$tableWidth,
+    mainRowHeight = _ref.mainRowHeight,
+    mainColumnWidth = _ref.mainColumnWidth,
+    _ref$enableAutoWidth = _ref.enableAutoWidth,
+    enableAutoWidth = _ref$enableAutoWidth === void 0 ? false : _ref$enableAutoWidth,
+    _ref$tableContainerWi = _ref.tableContainerWidth,
+    tableContainerWidth = _ref$tableContainerWi === void 0 ? 1000 : _ref$tableContainerWi;
+  // 使用 useDataRequest hook 處理資料請求
+  var _useDataRequest = useDataRequest({
+      onDataRequest: onDataRequest,
+      isDev: isDev
+    }),
+    data = _useDataRequest.data,
+    loading = _useDataRequest.loading,
+    totalCount = _useDataRequest.totalCount,
+    error = _useDataRequest.error,
+    executeDataRequest = _useDataRequest.executeDataRequest,
+    debouncedDataRequest = _useDataRequest.debouncedDataRequest,
+    initialLoad = _useDataRequest.initialLoad;
+
+  // 使用 useTableScroll hook 處理滾動邏輯
+  var _useTableScroll = useTableScroll({
+      data: data
+    }),
+    scrollPosition = _useTableScroll.scrollPosition,
+    scrollbarInfo = _useTableScroll.scrollbarInfo,
+    tableWrapperRef = _useTableScroll.tableWrapperRef,
+    scrollControl = _useTableScroll.scrollControl;
+
+  // 使用 useResponsive hook 處理響應式邏輯
+  var _useResponsive = useResponsive(),
+    isMobile = _useResponsive.isMobile,
+    isTablet = _useResponsive.isTablet;
+
+  // 使用 useTablePagination hook 處理分頁邏輯
+  var _useTablePagination = useTablePagination({
+      pageSize: pageSize,
+      totalCount: totalCount
+    }),
+    currentPage = _useTablePagination.currentPage,
+    setCurrentPage = _useTablePagination.setCurrentPage,
+    currentPageSize = _useTablePagination.currentPageSize,
+    setCurrentPageSize = _useTablePagination.setCurrentPageSize,
+    totalPages = _useTablePagination.totalPages,
+    handlePageChange = _useTablePagination.handlePageChange,
+    handlePageSizeChange = _useTablePagination.handlePageSizeChange;
+
+  // 使用 useTableFilter hook 處理篩選邏輯
+  var _useTableFilter = useTableFilter({
+      onFilterChange: function onFilterChange() {
+        return setCurrentPage(0);
+      }
+    }),
+    filterText = _useTableFilter.filterText,
+    filterColumn = _useTableFilter.filterColumn,
+    showAdvancedFilter = _useTableFilter.showAdvancedFilter,
+    advancedFilters = _useTableFilter.advancedFilters,
+    setFilterText = _useTableFilter.setFilterText,
+    setFilterColumn = _useTableFilter.setFilterColumn,
+    setAdvancedFilters = _useTableFilter.setAdvancedFilters,
+    resetFilter = _useTableFilter.resetFilter,
+    handleAdvancedFilterChange = _useTableFilter.handleAdvancedFilterChange,
+    clearAdvancedFilters = _useTableFilter.clearAdvancedFilters,
+    toggleAdvancedFilter = _useTableFilter.toggleAdvancedFilter;
+
+  // 使用 useTableSort hook 處理排序邏輯
+  var _useTableSort = useTableSort({
+      sortable: sortable,
+      onSortChange: function onSortChange() {
+        return setCurrentPage(0);
+      }
+    }),
+    sortConfig = _useTableSort.sortConfig,
+    handleSort = _useTableSort.handleSort,
+    resetSort = _useTableSort.resetSort;
+
+  // 使用 useTableDimensions hook 處理尺寸計算
+  var _useTableDimensions = useTableDimensions({
+      columns: columns,
+      enableAutoWidth: enableAutoWidth,
+      tableWidth: tableWidth,
+      tableContainerWidth: tableContainerWidth,
+      mainRowHeight: mainRowHeight,
+      mainColumnWidth: mainColumnWidth,
+      isDev: isDev
+    }),
+    getGridSize = _useTableDimensions.getGridSize;
+
+  // 使用 useTableInteraction hook 處理互動邏輯
+  var _useTableInteraction = useTableInteraction({
+      syncTableControl: syncTableControl,
+      currentTableRef: currentTableRef,
+      tableWrapperRef: tableWrapperRef
+    }),
+    isHovered = _useTableInteraction.isHovered,
+    handleMouseEnter = _useTableInteraction.handleMouseEnter,
+    handleMouseLeave = _useTableInteraction.handleMouseLeave,
+    handleDropdownFocus = _useTableInteraction.handleDropdownFocus,
+    handleDropdownBlur = _useTableInteraction.handleDropdownBlur;
+
+  //===========
+  React.useEffect(function () {
+    setTablePage === null || setTablePage === void 0 || setTablePage(function (prev) {
+      return _objectSpread2(_objectSpread2({}, prev), {}, _defineProperty$1(_defineProperty$1({}, "".concat(name, "Page"), currentPage), "".concat(name, "PageSize"), currentPageSize));
+    });
+  }, [currentPageSize, currentPage]);
+
+  // 使用 useTableApi hook 暴露給外部的方法
+  useTableApi({
+    ref: ref,
+    dataState: {
+      data: data,
+      loading: loading,
+      error: error,
+      totalCount: totalCount,
+      executeDataRequest: executeDataRequest
+    },
+    paginationState: {
+      currentPage: currentPage,
+      setCurrentPage: setCurrentPage,
+      currentPageSize: currentPageSize,
+      setCurrentPageSize: setCurrentPageSize,
+      totalPages: totalPages
+    },
+    filterState: {
+      filterText: filterText,
+      setFilterText: setFilterText,
+      filterColumn: filterColumn,
+      setFilterColumn: setFilterColumn,
+      advancedFilters: advancedFilters,
+      setAdvancedFilters: setAdvancedFilters,
+      showAdvancedFilter: showAdvancedFilter
+    },
+    sortState: {
+      sortConfig: sortConfig,
+      resetSort: resetSort
+    },
+    scrollState: {
+      scrollPosition: scrollPosition,
+      scrollbarInfo: scrollbarInfo,
+      tableWrapperRef: tableWrapperRef,
+      scrollControl: scrollControl
+    },
+    responsiveState: {
+      isMobile: isMobile,
+      isTablet: isTablet
+    },
+    config: {
+      sortable: sortable,
+      filterable: filterable,
+      className: className,
+      enableAutoWidth: enableAutoWidth,
+      isDev: isDev,
+      columns: columns,
+      name: name
+    },
+    interactionState: {
+      isHovered: isHovered
+    }
+  });
+
+  // 初始載入
+  //=======
+  React.useEffect(function () {
+    initialLoad(currentPageSize);
+  }, []);
+
+  // 監聽篩選和排序變化
+  //=======
+  React.useEffect(function () {
+    if (!onDataRequest) return;
+    var params = {
+      page: currentPage,
+      pageSize: currentPageSize,
+      search: filterText,
+      searchColumn: filterColumn,
+      advancedFilters: advancedFilters,
+      sortBy: sortConfig.key,
+      sortOrder: sortConfig.direction
+    };
+    debouncedDataRequest(params);
+  }, [currentPage, currentPageSize, filterText, filterColumn, advancedFilters, sortConfig]);
+  var freeActions = React.useMemo(function () {
+    return actions.filter(function (action) {
+      return action.isFreeAction === true;
+    });
+  }, [actions]);
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(TableHeader, {
+      name: name,
+      freeActions: freeActions,
+      getState: (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.getState
+    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "udi-table-container ".concat(className),
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      children: [error && /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "error-message",
+        children: ["\u274C ", tr("Fetch Failed"), ": ", error]
+      }), filterable && /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "udi-table-filter",
+        children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "filter-section",
+          children: [/*#__PURE__*/jsxRuntime.jsx(BasicFilter, {
+            columns: columns,
+            filterColumn: filterColumn,
+            filterText: filterText,
+            showAdvancedFilter: showAdvancedFilter,
+            advancedFilters: advancedFilters,
+            onFilterColumnChange: function onFilterColumnChange(value) {
+              setFilterColumn(value);
+              setCurrentPage(0);
+            },
+            onFilterTextChange: function onFilterTextChange(value) {
+              setFilterText(value);
+              setCurrentPage(0);
+            },
+            onToggleAdvancedFilter: toggleAdvancedFilter,
+            onResetFilter: resetFilter
+          }), showAdvancedFilter && /*#__PURE__*/jsxRuntime.jsx(AdvancedFilter, {
+            columns: columns,
+            advancedFilters: advancedFilters,
+            onFilterChange: handleAdvancedFilterChange,
+            onClearFilters: clearAdvancedFilters
+          })]
+        })
+      }), isDev && /*#__PURE__*/jsxRuntime.jsx(ScrollIndicator, {
+        scrollPosition: scrollPosition,
+        currentPage: currentPage,
+        totalPages: totalPages,
+        totalCount: totalCount,
+        scrollbarInfo: scrollbarInfo,
+        isMobile: isMobile,
+        isTablet: isTablet
+      }), /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "udi-table-wrapper-container",
+        style: {
+          position: "relative"
+        },
+        children: /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "udi-table-wrapper",
+          ref: tableWrapperRef,
+          style: tableHeight ? {
+            height: "".concat(tableHeight, "px")
+          } : {},
+          children: /*#__PURE__*/jsxRuntime.jsxs("table", {
+            className: "udi-table",
+            style: {
+              width: "".concat(tableWidth)
+            },
+            children: [/*#__PURE__*/jsxRuntime.jsx(TableHead, {
+              columns: columns,
+              sortable: sortable,
+              sortConfig: sortConfig,
+              onSort: handleSort,
+              getGridSize: getGridSize,
+              actions: actions,
+              actionFirst: actionFirst
+            }), /*#__PURE__*/jsxRuntime.jsx("tbody", {
+              children: loading ? /*#__PURE__*/jsxRuntime.jsx(LoadingState, {
+                colSpan: columns.length
+              }) : data.length > 0 ? data.map(function (row, rowIndex) {
+                return /*#__PURE__*/jsxRuntime.jsx(TableRow, {
+                  row: row,
+                  rowIndex: rowIndex,
+                  columns: columns,
+                  actions: actions,
+                  actionFirst: actionFirst,
+                  getGridSize: getGridSize,
+                  tableName: name
+                }, "row-".concat(rowIndex, "-").concat(row.id || ""));
+              }) : /*#__PURE__*/jsxRuntime.jsx(EmptyState, {
+                colSpan: columns.length
+              })
+            })]
+          })
+        })
+      }), paginationEnabled && /*#__PURE__*/jsxRuntime.jsx(Pagination, {
+        currentPage: currentPage,
+        totalPages: totalPages,
+        currentPageSize: currentPageSize,
+        onPageChange: handlePageChange,
+        onPageSizeChange: handlePageSizeChange,
+        isMobile: isMobile,
+        onDropdownFocus: handleDropdownFocus,
+        onDropdownBlur: handleDropdownBlur,
+        onMouseEnter: handleMouseEnter
+      })]
+    })]
+  });
+});
+UdiTable.displayName = "UdiTable";
+
+function greet(name) {
+  return "Hello, ".concat(name, "! 105");
+}
+function add(a, b) {
+  return a + b;
+}
+
+exports.Button = Button;
+exports.UdiTable = UdiTable;
+exports.add = add;
+exports.greet = greet;
+//# sourceMappingURL=index.cjs.js.map