@ctlyst.id/internal-ui 3.4.2 → 3.4.3

package/dist/index.js

@@ -1419,7 +1419,7 @@ var useDataTable = ({
   };
 };
 var DataTable = React5.forwardRef((props, ref) => {
-  var _a, _b, _c, _d;
+  var _a, _b;
   const { isLoading, styles, headerSticky, onRowClick, container, columnPinning } = props;
   const { table, toggleAllRowsSelected, generateColumn } = useDataTable(props);
   const refTable = React5.useRef(null);
@@ -1427,32 +1427,43 @@ var DataTable = React5.forwardRef((props, ref) => {
     toggleAllRowsSelected
   }));
   let lastPinnedColumn = 0;
-  (_a = refTable.current) == null ? void 0 : _a.addEventListener("scroll", (s) => {
-    var _a2, _b2, _c2, _d2;
-    const element = s.currentTarget;
-    if (element.scrollLeft > 0) {
-      (_a2 = refTable.current) == null ? void 0 : _a2.setAttribute("data-pin-left", "true");
-    } else {
-      (_b2 = refTable.current) == null ? void 0 : _b2.removeAttribute("data-pin-left");
-    }
-    if (element.scrollLeft < element.scrollWidth - (lastPinnedColumn + element.offsetWidth)) {
-      (_c2 = refTable.current) == null ? void 0 : _c2.setAttribute("data-pin-right", "true");
-    } else {
-      (_d2 = refTable.current) == null ? void 0 : _d2.removeAttribute("data-pin-right");
-    }
-  });
+  React5.useEffect(() => {
+    var _a2;
+    (_a2 = refTable.current) == null ? void 0 : _a2.addEventListener("scroll", (s) => {
+      var _a3, _b2, _c, _d;
+      const element = s.currentTarget;
+      if (element.scrollLeft > 0) {
+        (_a3 = refTable.current) == null ? void 0 : _a3.setAttribute("data-pin-left", "true");
+      } else {
+        (_b2 = refTable.current) == null ? void 0 : _b2.removeAttribute("data-pin-left");
+      }
+      if (element.scrollLeft < element.scrollWidth - (lastPinnedColumn + element.offsetWidth)) {
+        (_c = refTable.current) == null ? void 0 : _c.setAttribute("data-pin-right", "true");
+      } else {
+        (_d = refTable.current) == null ? void 0 : _d.removeAttribute("data-pin-right");
+      }
+    });
+    window.addEventListener("resize", (ev) => {
+      var _a3, _b2, _c, _d, _e;
+      if (((_a3 = refTable.current) == null ? void 0 : _a3.offsetWidth) === ((_b2 = refTable.current) == null ? void 0 : _b2.scrollWidth)) {
+        (_c = refTable.current) == null ? void 0 : _c.removeAttribute("data-pin-right");
+        (_d = refTable.current) == null ? void 0 : _d.removeAttribute("data-pin-left");
+      } else {
+        (_e = refTable.current) == null ? void 0 : _e.setAttribute("data-pin-right", "true");
+      }
+    });
+  }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     import_react28.Box,
     {
       overflowX: "auto",
       overflowY: "hidden",
       position: "relative",
-      pl: ((_b = columnPinning == null ? void 0 : columnPinning.left) == null ? void 0 : _b.length) ? 0 : 4,
-      pr: ((_c = columnPinning == null ? void 0 : columnPinning.right) == null ? void 0 : _c.length) ? 0 : 4,
+      pl: ((_a = columnPinning == null ? void 0 : columnPinning.left) == null ? void 0 : _a.length) ? 0 : 4,
+      pr: ((_b = columnPinning == null ? void 0 : columnPinning.right) == null ? void 0 : _b.length) ? 0 : 4,
       maxW: "100%",
       w: "full",
       ref: refTable,
-      ...((_d = columnPinning == null ? void 0 : columnPinning.right) == null ? void 0 : _d.length) ? { "data-pin-right": true } : {},
       ...container,
       children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_react28.Table, { ...styles == null ? void 0 : styles.table, "data-loading": "true", children: [
         /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react28.Thead, { ...(styles == null ? void 0 : styles.tableHead, headerSticky ? { position: "sticky", top: 0, bg: "white", zIndex: 1 } : {}), children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react28.Tr, { mx: "2", ...styles == null ? void 0 : styles.tableRow, children: headerGroup.headers.map((header, index) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(