trotl-table 1.0.8 → 1.0.10

package/README.md

@@ -25,7 +25,8 @@ yarn add trotl-table
 ```
 
 ## Versions
-
+```js
+1.0.9 => fix readme, whatever
 1.0.8 => fix readme
 1.0.7 => removed context (better for npm consumers)
 1.0.6 => ...
@@ -34,6 +35,7 @@ yarn add trotl-table
 1.0.3 => ...
 1.0.2 => prepare for npm consumers
 1.0.1 => initial release
+```
 
 ## ⚡ Quick Start
 

package/dist/index.cjs.js

@@ -9683,11 +9683,36 @@ 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);
+
+  // Recognize "entry" in URL search param and set as searchTerm if present
+  // Extract window.location.search to a variable for useEffect dependency
+  const locationSearch = typeof window !== "undefined" ? window.location.search : "";
+  React.useEffect(() => {
+    if (!enableSearchUrlParam) {
+      setSearchTerm(extraSearchTerm);
+      return;
+    }
+    const params = new URLSearchParams(locationSearch);
+    const entrySearch = params.get("entry");
+    const urlSearch = params.get("search");
+    console.log(urlSearch);
+    if (entrySearch) {
+      setSearchTerm(entrySearch);
+    } else if (urlSearch) {
+      setSearchTerm(urlSearch);
+    } else {
+      setSearchTerm(extraSearchTerm);
+    }
+  }, [locationSearch, enableSearchUrlParam, extraSearchTerm]);
   const toggleRowSelection = React.useCallback(rowId => {
     setSelectedRows(prev => prev.includes(rowId) ? prev.filter(r => r !== rowId) : [...prev, rowId]);
   }, []);
@@ -9705,7 +9730,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 +9740,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 +9884,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", {