trotl-table 1.0.28 → 1.0.29

package/dist/index.cjs.js

@@ -9795,10 +9795,37 @@ function TableInner({
     };
   }
 
+  // Use refs for callbacks to prevent infinite loops from dependency changes
+  const selectedRowsCallbackRef = React.useRef(selectedRowsCallback);
+  const refreshTriggerRef = React.useRef(refreshTrigger);
+  const viewCallbackRef = React.useRef(viewCallback);
+  const editCallbackRef = React.useRef(editCallback);
+  const deleteCallbackRef = React.useRef(deleteCallback);
+
+  // Update refs when callbacks change
+  React.useEffect(() => {
+    selectedRowsCallbackRef.current = selectedRowsCallback;
+  }, [selectedRowsCallback]);
+  React.useEffect(() => {
+    refreshTriggerRef.current = refreshTrigger;
+  }, [refreshTrigger]);
+  React.useEffect(() => {
+    viewCallbackRef.current = viewCallback;
+  }, [viewCallback]);
+  React.useEffect(() => {
+    editCallbackRef.current = editCallback;
+  }, [editCallback]);
+  React.useEffect(() => {
+    deleteCallbackRef.current = deleteCallback;
+  }, [deleteCallback]);
+
   // Local selection & sorting state (removed TableContext dependency)
   const [selectedRows, setSelectedRows] = React.useState([]);
   const [sorting, setSorting] = React.useState(null);
 
+  // Memoize columns to prevent filter dependency issues
+  const memoizedColumns = React.useMemo(() => columns, [JSON.stringify(columns)]);
+
   // Option to read search param from URL
   const [searchTerm, setSearchTerm] = React.useState(extraSearchTerm);
   // Track current URL search so date filters rerun when params change
@@ -9950,12 +9977,12 @@ function TableInner({
     // Then apply text search filter
     if (!searchTerm) return dateFiltered;
     const query = searchTerm.toLowerCase();
-    return dateFiltered.filter(row => columns.some(col => {
+    return dateFiltered.filter(row => memoizedColumns.some(col => {
       const val = row[col.accessor];
       if (val == null) return false;
       return String(val).toLowerCase().includes(query);
     }));
-  }, [searchTerm, columns, urlSearchString]);
+  }, [searchTerm, memoizedColumns, urlSearchString]);
 
   // Natural-ish comparator: handles nulls, numbers, strings, ISO dates
   const compare = (x, y, dir = "asc") => {
@@ -10108,15 +10135,19 @@ function TableInner({
   }, [listRef, tableDataFlat.length]);
 
   // useEffect(() => setTableDataFlat(flattened), [flattened]);
-  React.useEffect(() => selectedRowsCallback(selectedRows), [selectedRows, selectedRowsCallback]);
+  React.useEffect(() => {
+    // Only call the callback if selectedRows actually changed
+    // Use the ref to avoid infinite loops from callback changing on every render
+    selectedRowsCallbackRef.current?.(selectedRows);
+  }, [selectedRows]);
 
   // DELETE
   const [showConfirm, setShowConfirm] = React.useState(false);
   const [pendingDelete, setPendingDelete] = React.useState(null);
   const confirmDelete = async () => {
     if (!pendingDelete) return;
-    if (deleteCallback) {
-      const res = await deleteCallback(pendingDelete);
+    if (deleteCallbackRef.current) {
+      const res = await deleteCallbackRef.current(pendingDelete);
       if (!res?.success) return;
     }
     setLocalData(prev => {
@@ -10129,7 +10160,7 @@ function TableInner({
         return (prev || []).filter(r => r.id !== pendingDelete.id);
       }
     });
-    refreshTrigger?.();
+    refreshTriggerRef.current?.();
     setShowConfirm(false);
     setPendingDelete(null);
   };
@@ -10458,13 +10489,13 @@ function TableInner({
       style: {
         background: "#646cffaa"
       },
-      onClick: () => viewCallback(row)
+      onClick: () => viewCallbackRef.current(row)
     }, translate("view")), showEdit && /*#__PURE__*/React.createElement("button", {
       className: "action-btn-table",
       style: {
         background: "#4caf50"
       },
-      onClick: () => editCallback(row)
+      onClick: () => editCallbackRef.current(row)
     }, translate("edit")), showDelete && /*#__PURE__*/React.createElement("button", {
       className: "action-btn-table",
       style: {
@@ -10488,7 +10519,7 @@ function TableInner({
       }, content);
     }
     return content;
-  }, [tableDataFlat, columns, selectedRows, toggleRowSelection, groupRowsById, renderCell, showActions, showDelete, showEdit, showKey, showView, viewCallback, editCallback, enableDragRow, moveRow, enableMultiSelect, rowHeight, tableId, customColumns]);
+  }, [tableDataFlat, memoizedColumns, selectedRows, toggleRowSelection, groupRowsById, renderCell, showActions, showDelete, showEdit, showKey, showView, enableDragRow, moveRow, enableMultiSelect, rowHeight, tableId, customColumns]);
   const rowHeightGetter = ({
     index
   }) => tableDataFlat[index]?.type === "group" ? groupHeaderHeight : rowHeight;