added and updated

src/components/ReactTable4/BasicTable.js

@@ -65,7 +65,6 @@ const BasicTable = ({ settingsIcon }) => {
       columns,
       data,
       defaultColumn,
-      // initialState: { pageIndex: 2 }
     },
     useColumnOrder,
     useFilters,
@@ -107,18 +106,6 @@ const BasicTable = ({ settingsIcon }) => {
   // const firstPageRows = rows.slice(0, 10);
   return (
     <>
-      {/* filter */}
-      {/* <div className="customeClass1">
-        {headerGroups.map((headerGroup) =>
-          headerGroup.headers.map((column) =>
-            column.Filter ? (
-              <div className="mt-2 sm:mt-0 customeClass2" key={column.id}>
-                {column.render("Filter")}
-              </div>
-            ) : null
-          )
-        )}
-      </div> */}
       {/* toggle columns */}
       {/* <div>
         <div>
@@ -197,15 +184,18 @@ const BasicTable = ({ settingsIcon }) => {
                   </span>
                 </th>
               ))}
-              {/* <div>{column.canFilter ? column.render("Filter") : null}</div> */}
             </tr>
           ))}
         </thead>
-        <thead>
+        {/* filters */}
+        <thead style={{ backgroundColor: "#FAFBFF" }}>
           {headerGroups.map((headerGroup) => (
             <tr {...headerGroup.getHeaderGroupProps()}>
               {headerGroup.headers.map((column) => (
-                <th {...column.getHeaderProps()}>
+                <th
+                  {...column.getHeaderProps()}
+                  className="py-2 text-right text-sm"
+                >
                   {column.canFilter ? column.render("Filter") : null}
                 </th>
               ))}

src/components/ReactTable4/ColumnSearch.js

@@ -1,14 +1,36 @@
-import React from "react";
+import React, { useState } from "react";
+
+import search from "./search-normal.svg";
+import settings from "./settings.svg";
 
 export const ColumnSearch = ({ column }) => {
   const { filterValue, setFilter } = column;
+  const [activeSearchBox, setActiveSearchBox] = useState(false);
 
   return (
-    <span>
-      <input
-        value={filterValue || ""}
-        onChange={(e) => setFilter(e.target.value)}
-      />
-    </span>
+    <div className="rounded-md flex flex-row items-center">
+      <div className="flex flex-row items-center relative">
+        {activeSearchBox && (
+          <img
+            src={settings}
+            alt=""
+            className="w-4 h-4 absolute left-7 cursor-pointer"
+            onClick={() => setActiveSearchBox(false)}
+          />
+        )}
+        <img
+          src={search}
+          alt=""
+          className="w-4 h-4 absolute left-2 cursor-pointer"
+        />
+        <input
+          value={filterValue || ""}
+          onChange={(e) => setFilter(e.target.value)}
+          onFocus={() => setActiveSearchBox(true)}
+          className={`text-xs text-blue-400 rounded focus:outline-none placeholder-blue-400 border p-1`}
+          style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
+        />
+      </div>
+    </div>
   );
 };