@dreamtree-org/twreact-ui 1.0.70 → 1.0.71

package/dist/index.js

@@ -3883,7 +3883,7 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
   }, error));
 });
 
-var _excluded$k = ["data", "columns", "sortable", "filterable", "selectable", "pagination", "pageSize", "onSort", "onFilter", "onFetch", "onFilterChange", "onSelectionChange", "onRowClick", "hasDetails", "DetailsComponent", "className", "withAction", "onAction", "actions", "showSerial", "cellClass", "rowClass", "globalSearch", "limitOptions", "showLimitSelector", "onLimitChange", "showReloadButton", "renderReloadButton", "onReload", "stripedRows", "stripedColors", "responsiveBreakpoint"];
+var _excluded$k = ["data", "columns", "sortable", "filterable", "selectable", "pagination", "pageSize", "onSort", "onFilter", "onFetch", "onFilterChange", "onSelectionChange", "onRowClick", "hasDetails", "DetailsComponent", "className", "withAction", "onAction", "actions", "showSerial", "cellClass", "rowClass", "globalSearch", "limitOptions", "showLimitSelector", "onLimitChange", "showReloadButton", "renderReloadButton", "onReload", "stripedRows", "stripedColors", "responsiveBreakpoint", "serverSide", "totalRecords", "pageNumber", "onPageChange"];
 function ownKeys$9(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$9(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$9(Object(t), true).forEach(function (r) { _defineProperty$4(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$9(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Table = function Table(_ref) {
@@ -3937,7 +3937,13 @@ var Table = function Table(_ref) {
     stripedColors = _ref$stripedColors === void 0 ? ["#ffffff", "#f7fafc"] : _ref$stripedColors,
     _ref$responsiveBreakp = _ref.responsiveBreakpoint,
     responsiveBreakpoint = _ref$responsiveBreakp === void 0 ? 768 : _ref$responsiveBreakp,
-    props = _objectWithoutProperties$1(_ref, _excluded$k);
+    _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.onPageChange;
+    var props = _objectWithoutProperties$1(_ref, _excluded$k);
   // State for responsive view
   var _useState = React.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -3998,7 +4004,7 @@ var Table = function Table(_ref) {
     _useState16 = _slicedToArray(_useState15, 2),
     expandedRows = _useState16[0],
     setExpandedRows = _useState16[1];
-  var _useState17 = React.useState(1),
+  var _useState17 = React.useState(typeof pageNumber === "number" ? pageNumber : 1),
     _useState18 = _slicedToArray(_useState17, 2),
     currentPage = _useState18[0],
     setCurrentPage = _useState18[1];
@@ -4028,6 +4034,14 @@ var Table = function Table(_ref) {
     openActionKey = _useState28[0],
     setOpenActionKey = _useState28[1];
   var openRef = React.useRef(null);
+  React.useEffect(function () {
+    if (typeof pageNumber === "number" && pageNumber !== currentPage) {
+      setCurrentPage(pageNumber);
+    }
+  }, [pageNumber]);
+  React.useEffect(function () {
+    setLimit(pageSize);
+  }, [pageSize]);
 
   // Check if mobile view
   React.useEffect(function () {
@@ -4047,9 +4061,6 @@ var Table = function Table(_ref) {
   var isValidList = function isValidList(d) {
     return Array.isArray(d);
   };
-  var setDataForExternal = function setDataForExternal(newData) {
-    if (isValidList(newData)) setTableData(newData);else setTableData([]);
-  };
 
   // Close column menu when clicking outside
   React.useEffect(function () {
@@ -4146,70 +4157,42 @@ var Table = function Table(_ref) {
 
   // Sorting
   var sortedData = React.useMemo(function () {
-    if (!sortConfig.key) return tableData;
+    if (serverSide || !sortConfig.key) return tableData;
     var key = sortConfig.key,
       direction = sortConfig.direction;
     return _toConsumableArray$1(tableData).sort(function (a, b) {
-      var aValue = a === null || a === void 0 ? void 0 : a[key];
-      var bValue = b === null || b === void 0 ? void 0 : b[key];
-      if (aValue == null && bValue == null) return 0;
-      if (aValue == null) return direction === "asc" ? -1 : 1;
-      if (bValue == null) return direction === "asc" ? 1 : -1;
-      if (typeof aValue === "number" && typeof bValue === "number") {
-        return direction === "asc" ? aValue - bValue : bValue - aValue;
-      }
-      var aStr = String(aValue).toLowerCase();
-      var bStr = String(bValue).toLowerCase();
-      if (aStr < bStr) return direction === "asc" ? -1 : 1;
-      if (aStr > bStr) return direction === "asc" ? 1 : -1;
-      return 0;
+      var av = a === null || a === void 0 ? void 0 : a[key];
+      var bv = b === null || b === void 0 ? void 0 : b[key];
+      if (av == null || bv == null) return 0;
+      if (typeof av === "number") return direction === "asc" ? av - bv : bv - av;
+      return direction === "asc" ? String(av).localeCompare(String(bv)) : String(bv).localeCompare(String(av));
     });
-  }, [tableData, sortConfig]);
+  }, [tableData, sortConfig, serverSide]);
 
   // Filtering
   var filteredData = React.useMemo(function () {
-    if (!filterable || Object.keys(filters).length === 0) return sortedData;
-    var globalQuery = String(filters.global || "").trim().toLowerCase();
+    if (serverSide || !filterable || !Object.keys(filters).length) return sortedData;
+    var q = (filters.global || "").toLowerCase();
     return sortedData.filter(function (row) {
-      // Per-column filters
-      var perColumnOk = Object.entries(filters).every(function (_ref2) {
-        var _ref3 = _slicedToArray(_ref2, 2),
-          key = _ref3[0],
-          value = _ref3[1];
-        if (key === "global") return true;
-        if (!value) return true;
-        var cell = row === null || row === void 0 ? void 0 : row[key];
-        if (cell == null) return false;
-        return String(cell).toLowerCase().includes(String(value).toLowerCase());
+      return Object.values(row || {}).some(function (v) {
+        return String(v).toLowerCase().includes(q);
       });
-      if (!perColumnOk) return false;
-
-      // Global filter
-      if (globalQuery) {
-        var matchesVisible = visibleColumns.some(function (col) {
-          var v = row === null || row === void 0 ? void 0 : row[col.key];
-          if (v == null) return false;
-          return String(v).toLowerCase().includes(globalQuery);
-        });
-        if (matchesVisible) return true;
-        return Object.values(row || {}).some(function (v) {
-          return v != null ? String(v).toLowerCase().includes(globalQuery) : false;
-        });
-      }
-      return true;
     });
-  }, [sortedData, filters, filterable, visibleColumns]);
-
+  }, [sortedData, filters, filterable, serverSide]);
   // Pagination indices
   var startIndex = pagination ? (currentPage - 1) * limit : 0;
   var endIndex = pagination ? startIndex + limit : filteredData.length;
 
   // Paginated view
   var paginatedData = React.useMemo(function () {
-    if (!pagination) return filteredData;
-    return filteredData.slice(startIndex, endIndex);
-  }, [filteredData, startIndex, endIndex, pagination]);
-  var totalPages = Math.max(1, Math.ceil(filteredData.length / limit));
+    if (!pagination || serverSide) return filteredData;
+    var start = (currentPage - 1) * limit;
+    return filteredData.slice(start, start + limit);
+  }, [filteredData, pagination, serverSide, currentPage, limit]);
+  var totalPages = React.useMemo(function () {
+    if (!pagination) return 1;
+    return serverSide ? Math.max(1, Math.ceil((totalRecords || 0) / limit)) : Math.max(1, Math.ceil(filteredData.length / limit));
+  }, [pagination, serverSide, totalRecords, filteredData.length, limit]);
 
   // Sorting handler
   var handleSort = function handleSort(key) {
@@ -4324,17 +4307,19 @@ var Table = function Table(_ref) {
   React.useEffect(function () {
     if (!onFetch) return;
     onFetch({
-      setData: setDataForExternal,
-      filters: filters,
+      setData: function setData(rows) {
+        return setTableData(Array.isArray(rows) ? rows : []);
+      },
       setLoading: setLoading,
-      pagination: {
-        currentPage: currentPage,
-        limit: limit,
-        totalPages: totalPages,
-        nextRecords: paginatedData
-      }
+      filters: filters,
+      page: currentPage,
+      limit: limit,
+      sort: sortConfig
     });
-  }, [filters, currentPage, limit]);
+  }, [onFetch, filters, currentPage, limit, sortConfig]);
+  React.useEffect(function () {
+    if (!serverSide) setTableData(data);
+  }, [data, serverSide]);
   React.useEffect(function () {
     if (!onFetch && isValidList(data)) setTableData(data);
   }, [data, onFetch]);
@@ -4352,13 +4337,11 @@ var Table = function Table(_ref) {
       applyGlobalSearch();
     }
   };
-  React.useEffect(function () {
-    setLimit(pageSize);
-  }, [pageSize]);
   var handleLimitChange = function handleLimitChange(nextLimit) {
     var parsed = Number(nextLimit);
     if (!Number.isFinite(parsed) || parsed <= 0) return;
     setLimit(parsed);
+    setCurrentPage(1);
     onLimitChange === null || onLimitChange === void 0 || onLimitChange(parsed);
   };
 
@@ -4701,7 +4684,7 @@ var Table = function Table(_ref) {
     }, /*#__PURE__*/React.createElement("input", {
       type: "text",
       placeholder: "Filter ".concat(column.label),
-      className: "w-full rounded-md border border-gray-300 px-3 py-1.5 text-sm",
+      className: "w-full rounded-md border border-gray-300 px-3 py-1.5 text-sm font-normal",
       value: filters[column.key] || "",
       onChange: function onChange(e) {
         return handleFilter(column.key, e.target.value);
@@ -4901,14 +4884,14 @@ var Table = function Table(_ref) {
     }
   }, "Next")))));
 };
-function ActionMenuPortal(_ref4) {
-  var anchorElem = _ref4.anchorElem,
-    anchorRow = _ref4.anchorRow,
-    _ref4$actions = _ref4.actions,
-    actions = _ref4$actions === void 0 ? [] : _ref4$actions;
-    _ref4.onClose;
-    var onAction = _ref4.onAction,
-    menuRef = _ref4.menuRef;
+function ActionMenuPortal(_ref2) {
+  var anchorElem = _ref2.anchorElem,
+    anchorRow = _ref2.anchorRow,
+    _ref2$actions = _ref2.actions,
+    actions = _ref2$actions === void 0 ? [] : _ref2$actions;
+    _ref2.onClose;
+    var onAction = _ref2.onAction,
+    menuRef = _ref2.menuRef;
   var _useState29 = React.useState({
       left: 0,
       top: 0,