trotl-table 1.0.9 → 1.0.11

package/README.md

@@ -26,7 +26,8 @@ yarn add trotl-table
 
 ## Versions
 ```js
-1.0.9 => fix readme
+1.0.9 => add search input
+1.0.9 => fix readme, whatever
 1.0.8 => fix readme
 1.0.7 => removed context (better for npm consumers)
 1.0.6 => ...

package/dist/index.cjs.js

@@ -9683,11 +9683,59 @@ function Table({
   viewCallback = () => {},
   deleteCallback = null,
   buttons = ["view", "edit", "delete"],
-  enableDragRow = false // new prop
+  enableDragRow = false,
+  enableSearchUrlParam = false
 }) {
   // Local selection & sorting state (removed TableContext dependency)
   const [selectedRows, setSelectedRows] = React.useState([]);
   const [sorting, setSorting] = React.useState(null);
+
+  // Option to read search param from URL
+  const [searchTerm, setSearchTerm] = React.useState(extraSearchTerm);
+
+  // Listen to URL changes via popstate (back/forward) and custom events
+  React.useEffect(() => {
+    if (!enableSearchUrlParam) {
+      setSearchTerm(extraSearchTerm);
+      return;
+    }
+    const updateSearchFromUrl = () => {
+      const params = new URLSearchParams(window.location.search);
+      const entrySearch = params.get("entry");
+      const urlSearch = params.get("search");
+      if (entrySearch) {
+        setSearchTerm(entrySearch);
+      } else if (urlSearch) {
+        setSearchTerm(urlSearch);
+      } else {
+        setSearchTerm(extraSearchTerm);
+      }
+    };
+
+    // Initial sync
+    updateSearchFromUrl();
+
+    // Listen for URL changes (back/forward navigation)
+    window.addEventListener('popstate', updateSearchFromUrl);
+
+    // Listen for programmatic URL changes if you use history.pushState/replaceState
+    const originalPushState = window.history.pushState;
+    const originalReplaceState = window.history.replaceState;
+    window.history.pushState = function (...args) {
+      originalPushState.apply(this, args);
+      updateSearchFromUrl();
+    };
+    window.history.replaceState = function (...args) {
+      originalReplaceState.apply(this, args);
+      updateSearchFromUrl();
+    };
+    return () => {
+      window.removeEventListener('popstate', updateSearchFromUrl);
+      // Restore original methods
+      window.history.pushState = originalPushState;
+      window.history.replaceState = originalReplaceState;
+    };
+  }, [enableSearchUrlParam, extraSearchTerm]);
   const toggleRowSelection = React.useCallback(rowId => {
     setSelectedRows(prev => prev.includes(rowId) ? prev.filter(r => r !== rowId) : [...prev, rowId]);
   }, []);
@@ -9705,7 +9753,9 @@ function Table({
       return null;
     });
   };
-  console.log(extraSearchTerm);
+
+  // console.log(extraSearchTerm)
+
   const [localData, setLocalData] = React.useState(data);
   React.useEffect(() => setLocalData(data), [data]);
   const listRef = React.useRef(null);
@@ -9713,14 +9763,14 @@ function Table({
     return normalizeData(isGrouped ? localData : [], isGrouped ? [] : localData);
   }, [localData, isGrouped]);
   const filterRows = React.useCallback(rows => {
-    if (!extraSearchTerm) return rows;
-    const query = extraSearchTerm.toLowerCase();
+    if (!searchTerm) return rows;
+    const query = searchTerm.toLowerCase();
     return rows.filter(row => columns.some(col => {
       const val = row[col.accessor];
       if (val == null) return false;
       return String(val).toLowerCase().includes(query);
     }));
-  }, [extraSearchTerm, columns]);
+  }, [searchTerm, columns]);
 
   // Natural-ish comparator: handles nulls, numbers, strings, ISO dates
   const compare = (x, y, dir = "asc") => {
@@ -9857,15 +9907,16 @@ function Table({
 
   // RENDER CELL
   const highlight = React.useCallback(text => {
-    if (!extraSearchTerm || typeof text !== "string") return text;
+    // Use the actual searchTerm (from URL or prop) for highlighting
+    if (!searchTerm || typeof text !== "string") return text;
     const lower = text.toLowerCase();
-    const query = extraSearchTerm.toLowerCase();
+    const query = searchTerm.toLowerCase();
     const idx = lower.indexOf(query);
     if (idx === -1) return text;
     return /*#__PURE__*/React.createElement(React.Fragment, null, text.slice(0, idx), /*#__PURE__*/React.createElement("span", {
       className: "highlight"
     }, text.slice(idx, idx + query.length)), text.slice(idx + query.length));
-  }, [extraSearchTerm]);
+  }, [searchTerm]);
   const renderCell = React.useCallback((v, accessor) => {
     if (accessor === "deadlineISO") {
       return v ? new Date(v).toLocaleString("sl-SI", {