update

src/App.js

@@ -100,7 +100,7 @@ function App() {
         {/* <TableDesign1 /> */}
         {/* <ReactTable2 /> */}
         {/* <ReactTable3 /> */}
-        {/* <ReactTable4 /> */}
+        <ReactTable4 />
         {/* <Digikala /> */}
         {/* <HeaderDesign1 />
         <div className="flex">

src/components/ReactTable4/GlobalFilter.js

@@ -55,3 +55,49 @@ export const GlobalFilter = ({ filter, setFilter }) => {
         style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
       /> */
 }
+
+// ? اگر میخواستم کاری کنم که وقتی رویه سرچ باکس میزدم ایکن ضربدر هاید میشد و ایکن کنسل میومد باید از این کد استفاده میکردم
+
+// import React, { useState } from "react";
+// import { useAsyncDebounce } from "react-table";
+
+// import search from "./search-normal.svg";
+// import cancleIcon from "./zarbedar-icon.svg";
+
+// export const GlobalFilter = ({ filter, setFilter }) => {
+//   const [activeSearchBox, setActiveSearchBox] = useState(false);
+
+//   const [value, setValue] = useState(filter);
+
+//   const onChange = useAsyncDebounce((value) => {
+//     setFilter(value || undefined);
+//   }, 400);
+
+//   return (
+//     <div className="flex flex-row-reverse items-center relative ml-2 ">
+//       {activeSearchBox === true ? (
+//         <img
+//           src={cancleIcon}
+//           alt=""
+//           className="w-3 h-3 absolute left-2 cursor-pointer"
+//         />
+//       ) : (
+//         <img
+//           src={search}
+//           alt=""
+//           className="w-4 h-4 absolute left-2 cursor-pointer"
+//         />
+//       )}
+//       <input
+//         value={filter || ""}
+//         onChange={(e) => setFilter(e.target.value)}
+//         onFocus={() => setActiveSearchBox(true)}
+//         onBlur={() => setActiveSearchBox(false)}
+//         type="text"
+//         className={`text-xs text-blue-400 rounded focus:outline-none border focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20`}
+//         style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
+//       />
+//       {console.log(activeSearchBox)}{" "}
+//     </div>
+//   );
+// };