trotl-table 1.0.14 → 1.0.16

package/dist/index.cjs.js

@@ -9586,6 +9586,42 @@ const Modal = ({
   }, confirmLabel))));
 };
 
+// src/components/DotsLoading.jsx
+const style = `
+.dots-spinner {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 6px;
+  height: 24px;
+}
+.dots-spinner div {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background-color: #2980B9;
+  animation: dotPulse 1s infinite ease-in-out;
+}
+.dots-spinner div:nth-child(1) { animation-delay: 0s; }
+.dots-spinner div:nth-child(2) { animation-delay: 0.2s; }
+.dots-spinner div:nth-child(3) { animation-delay: 0.4s; }
+.dots-spinner div:nth-child(4) { animation-delay: 0.6s; }
+
+@keyframes dotPulse {
+  0%, 100% {
+    transform: scale(1);
+    opacity: 0.6;
+  }
+  50% {
+    transform: scale(1.5);
+    opacity: 1;
+  }
+}
+`;
+const DotsLoading = () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("style", null, style), /*#__PURE__*/React.createElement("div", {
+  className: "dots-spinner"
+}, /*#__PURE__*/React.createElement("div", null), /*#__PURE__*/React.createElement("div", null), /*#__PURE__*/React.createElement("div", null), /*#__PURE__*/React.createElement("div", null)));
+
 const ITEM_TYPE = "ROW";
 
 // Normalize data into grouped format
@@ -9772,6 +9808,8 @@ function TableInner({
   const [localData, setLocalData] = React.useState(data);
   React.useEffect(() => setLocalData(data), [data]);
   const listRef = React.useRef(null);
+  const headerRef = React.useRef(null);
+  const [headerPadRight, setHeaderPadRight] = React.useState(0);
   const normalizedGroups = React.useMemo(() => {
     return normalizeData(isGrouped ? localData : [], isGrouped ? [] : localData);
   }, [localData, isGrouped]);
@@ -9891,6 +9929,50 @@ function TableInner({
     setTableDataFlat(flattened);
   }, [flattened]);
 
+  // Detect vertical scrollbar on react-virtualized grid and adjust header padding
+  React.useEffect(() => {
+    const el = listRef.current;
+    if (!el) return;
+
+    // Try to find the actual scrollable grid element created by react-virtualized
+    const grid = el.querySelector('.ReactVirtualized__Grid');
+    const check = () => {
+      if (!grid) {
+        setHeaderPadRight(0);
+        return;
+      }
+      const hasVerticalScroll = grid.scrollHeight > grid.clientHeight;
+      // Compute scrollbar width if present
+      const sbWidth = hasVerticalScroll ? grid.offsetWidth - grid.clientWidth : 0;
+      // Fallback: typical scrollbar width ~17px on Windows
+      const pad = hasVerticalScroll ? sbWidth > 0 ? sbWidth : 17 : 0;
+      setHeaderPadRight(pad);
+    };
+
+    // Initial check after next frame to allow grid mount
+    const raf = requestAnimationFrame(check);
+
+    // Observe size changes
+    const ro = new ResizeObserver(check);
+    if (grid) ro.observe(grid);
+
+    // Observe content mutations (rows update)
+    const mo = new MutationObserver(check);
+    if (grid) mo.observe(grid, {
+      childList: true,
+      subtree: true
+    });
+    return () => {
+      cancelAnimationFrame(raf);
+      try {
+        ro.disconnect();
+      } catch {/* noop */}
+      try {
+        mo.disconnect();
+      } catch {/* noop */}
+    };
+  }, [listRef, tableDataFlat.length]);
+
   // useEffect(() => setTableDataFlat(flattened), [flattened]);
   React.useEffect(() => selectedRowsCallback(selectedRows), [selectedRows, selectedRowsCallback]);
 
@@ -10178,10 +10260,10 @@ function TableInner({
     })), showKey && /*#__PURE__*/React.createElement("div", {
       className: "table-cell key-cell"
     }, visualIndex), allColumns.map((col, i) => {
-      let cellStyle = col.isCustom && col.style ? {
+      let cellStyle = col.style ? {
         ...col.style
       } : undefined;
-      if (col.isCustom && col.style && col.style.width) {
+      if (col.style && col.style.width) {
         cellStyle = cellStyle || {};
         cellStyle.minWidth = col.style.width;
         cellStyle.maxWidth = col.style.width;
@@ -10277,11 +10359,13 @@ function TableInner({
     } : undefined
   }, /*#__PURE__*/React.createElement("div", {
     className: "table-header",
+    ref: headerRef,
     style: {
       position: "sticky",
       top: 0,
       zIndex: 10,
-      background: "#fff"
+      background: "#fff",
+      paddingRight: headerPadRight || undefined
     }
   }, /*#__PURE__*/React.createElement("div", {
     className: "table-row header-row"
@@ -10301,17 +10385,13 @@ function TableInner({
   })), showKey && /*#__PURE__*/React.createElement("div", {
     className: "table-cell key-cell"
   }, "#"), allColumns.map((col, i) => {
-    // For custom columns, apply width and textAlign to header cell
-    let cellStyle = col.isCustom && col.style ? {
+    let cellStyle = col.style ? {
       ...col.style,
-      cursor: undefined,
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: col.style.textAlign === 'center' ? 'center' : col.style.textAlign === 'right' ? 'flex-end' : 'flex-start'
+      cursor: col.isCustom ? undefined : "pointer"
     } : {
       cursor: col.isCustom ? undefined : "pointer"
     };
-    if (col.isCustom && col.style && col.style.width) {
+    if (col.style && col.style.width) {
       cellStyle.minWidth = col.style.width;
       cellStyle.maxWidth = col.style.width;
       cellStyle.width = col.style.width;
@@ -10327,9 +10407,7 @@ function TableInner({
   }, "Action"))), /*#__PURE__*/React.createElement("div", {
     className: "main-table",
     ref: listRef
-  }, tableDataFlat.length === 0 ? /*#__PURE__*/React.createElement("div", {
-    className: "table-empty"
-  }, "No items") : /*#__PURE__*/React.createElement(AutoSizer, null, ({
+  }, tableDataFlat.length === 0 ? /*#__PURE__*/React.createElement(DotsLoading, null) : /*#__PURE__*/React.createElement(AutoSizer, null, ({
     height,
     width
   }) => /*#__PURE__*/React.createElement(List, {