filter column added

src/components/ReactTable4/BasicTable.js

@@ -1,7 +1,7 @@
 import React, { useMemo } from "react";
 
 import "./index.scss";
-import { ColumnFilter } from "./ColumnFilter.js";
+import { ColumnSearch } from "./ColumnSearch.js";
 
 import {
   useTable,
@@ -24,64 +24,13 @@ import { Settings } from "./Settings";
 import { Checkbox } from "./Checkbox";
 import MOCK_DATA from "./MOCK_DATA.json";
 
-// This is a custom filter UI for selecting
-// a unique option from a list
-export function SelectColumnFilter({
-  column: { filterValue, setFilter, preFilteredRows, id, render },
-}) {
-  const options = React.useMemo(() => {
-    const options = new Set();
-    preFilteredRows.forEach((row) => {
-      options.add(row.values[id]);
-    });
-    return [...options.values()];
-  }, [id, preFilteredRows]);
-
-  // Render a multi-select box
-  return (
-    <label className="flex gap-x-2 items-baseline">
-      <span className="text-gray-700">{render("Header")}: </span>
-      <select
-        className="rounded-md border-gray-300 shadow-sm text-xs focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
-        name={id}
-        id={id}
-        value={filterValue}
-        onChange={(e) => {
-          setFilter(e.target.value || undefined);
-        }}
-      >
-        <option className="text-xs" value="">
-          همه
-        </option>
-        {options.map((option, i) => (
-          <option key={i} value={option} className="text-xs">
-            {(() => {
-              if (option === 1) {
-                return "وضعیت عادی";
-              } else if (option === 2) {
-                return "اعلان سطح هشدار";
-              } else if (option === 3) {
-                return "بررسی و پیگیری";
-              } else if (option === 4) {
-                return "وضعیت بحرانی";
-              } else {
-                return " وضعیت پایدار";
-              }
-            })()}{" "}
-          </option>
-        ))}
-      </select>
-    </label>
-  );
-}
-
 const BasicTable = ({ settingsIcon }) => {
   const columns = React.useMemo(() => COLUMNS, []);
   const data = useMemo(() => MOCK_DATA, []);
 
   const defaultColumn = useMemo(() => {
     return {
-      Filter: ColumnFilter,
+      Filter: ColumnSearch,
     };
   }, []);
 
@@ -246,7 +195,18 @@ const BasicTable = ({ settingsIcon }) => {
                         : " 🔼"
                       : ""}
                   </span>
-                  <div>{column.canFilter ? column.render("Filter") : null}</div>
+                </th>
+              ))}
+              {/* <div>{column.canFilter ? column.render("Filter") : null}</div> */}
+            </tr>
+          ))}
+        </thead>
+        <thead>
+          {headerGroups.map((headerGroup) => (
+            <tr {...headerGroup.getHeaderGroupProps()}>
+              {headerGroup.headers.map((column) => (
+                <th {...column.getHeaderProps()}>
+                  {column.canFilter ? column.render("Filter") : null}
                 </th>
               ))}
             </tr>
@@ -260,6 +220,7 @@ const BasicTable = ({ settingsIcon }) => {
             prepareRow(row);
             return (
               <React.Fragment>
+                <tr></tr>
                 <tr
                   {...row.getRowProps()}
                   //   className={isEven(idx) ? "bg-gray-600" : "bg-white"}

src/components/ReactTable4/ColumnSearch.js

@@ -1,6 +1,6 @@
 import React from "react";
 
-export const ColumnFilter = ({ column }) => {
+export const ColumnSearch = ({ column }) => {
   const { filterValue, setFilter } = column;
 
   return (

src/components/ReactTable4/GlobalFilter.js

@@ -32,6 +32,8 @@ export const GlobalFilter = ({ filter, setFilter }) => {
       <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 placeholder-blue-400 border`}
         style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}

src/components/ReactTable4/SelectColumnFilter.js

@@ -0,0 +1,46 @@
+import React from "react";
+
+export const SelectColumnFilter = ({
+  column: { filterValue, setFilter, preFilteredRows, id, render },
+}) => {
+  const options = React.useMemo(() => {
+    const options = new Set();
+    preFilteredRows.forEach((row) => {
+      options.add(row.values[id]);
+    });
+    return [...options.values()];
+  }, [id, preFilteredRows]);
+
+  return (
+    <select
+      className="rounded-md border-gray-300 shadow-sm text-xs focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
+      name={id}
+      id={id}
+      value={filterValue}
+      onChange={(e) => {
+        setFilter(e.target.value || undefined);
+      }}
+    >
+      <option className="text-xs" value="">
+        همه
+      </option>
+      {options.map((option, i) => (
+        <option key={i} value={option} className="text-xs">
+          {(() => {
+            if (option === 1) {
+              return "وضعیت عادی";
+            } else if (option === 2) {
+              return "اعلان سطح هشدار";
+            } else if (option === 3) {
+              return "بررسی و پیگیری";
+            } else if (option === 4) {
+              return "وضعیت بحرانی";
+            } else {
+              return " وضعیت پایدار";
+            }
+          })()}{" "}
+        </option>
+      ))}
+    </select>
+  );
+};

src/components/ReactTable4/columns.js

@@ -1,13 +1,12 @@
 import { format } from "date-fns";
 
-import Table, { SelectColumnFilter } from "./BasicTable"; // new
-
-import { ColumnFilter } from "./ColumnFilter.js";
+import Table from "./BasicTable"; // new
 
 import { OrderStatus } from "./OrderStatus";
 import { OrderLevel } from "./OrderLevel";
 import { Buttons } from "./Buttons";
 import { EditButtons } from "./EditButtons";
+import { SelectColumnFilter } from "./SelectColumnFilter.js";
 
 export const COLUMNS = [
   {