added cancle icon

src/components/ReactTable4/GlobalFilter.js

@@ -5,7 +5,7 @@ import search from "./search-normal.svg";
 import settings from "./settings.svg";
 
 export const GlobalFilter = ({ filter, setFilter }) => {
-  // const [activeSearchBox, setActiveSearchBox] = useState(null);
+  const [activeSearchBox, setActiveSearchBox] = useState(false);
 
   const [value, setValue] = useState(filter);
 
@@ -14,13 +14,17 @@ export const GlobalFilter = ({ filter, setFilter }) => {
   }, 400);
 
   return (
-    <div
+    <div className="flex flex-row-reverse items-center relative ml-2">
-      className="flex flex-row-reverse items-center relative ml-2"
+      {activeSearchBox && (
-      // onClick={() => setActiveSearchBox(!activeSearchBox)}
+        <img
-    >
+          src={settings}
+          alt=""
+          className="w-4 h-4 absolute left-7 cursor-pointer"
+          onClick={() => setActiveSearchBox(false)}
+        />
+      )}
       <img
         src={search}
-        // src={activeSearchBox ? { search } : { settings }}
         alt=""
         className="w-4 h-4 absolute left-2 cursor-pointer"
       />
@@ -30,6 +34,8 @@ export const GlobalFilter = ({ filter, setFilter }) => {
           setValue(e.target.value);
           onChange(e.target.value);
         }}
+        onFocus={() => setActiveSearchBox(true)}
+        // onBlur={() => setActiveSearchBox(false)}
         type="text"
         className={`text-xs text-blue-400 rounded focus:outline-none placeholder-blue-400 border`}
         style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}