global filter and column filter working properly

src/components/ReactTable4/BasicTable.js

@@ -1,6 +1,7 @@
 import React, { useMemo } from "react";
 
 import "./index.scss";
+import { ColumnFilter } from "./ColumnFilter.js";
 
 import {
   useTable,
@@ -78,6 +79,12 @@ const BasicTable = ({ settingsIcon }) => {
   const columns = React.useMemo(() => COLUMNS, []);
   const data = useMemo(() => MOCK_DATA, []);
 
+  const defaultColumn = useMemo(() => {
+    return {
+      Filter: ColumnFilter,
+    };
+  }, []);
+
   //   اگر بخواهیم ردیف های جدولمون یکی در میان زنگ پس زمینه اشون با هم فرق کند
   const isEven = (idx) => idx % 2 === 0;
 
@@ -108,6 +115,7 @@ const BasicTable = ({ settingsIcon }) => {
     {
       columns,
       data,
+      defaultColumn,
       // initialState: { pageIndex: 2 }
     },
     useColumnOrder,
@@ -238,7 +246,7 @@ const BasicTable = ({ settingsIcon }) => {
                         : " 🔼"
                       : ""}
                   </span>
-                  {/* <div>{column.canFilter ? column.render("Filter") : null}</div> */}
+                  <div>{column.canFilter ? column.render("Filter") : null}</div>
                 </th>
               ))}
             </tr>

src/components/ReactTable4/EditButtons.js

@@ -1,15 +1,16 @@
 import React, { useState } from "react";
 
+import DropDown from "./DropDown";
+
 import filter from "./filter.svg";
 import plus from "./plus.svg";
-import more from "./more2.svg";
-import DropDown from "./DropDown";
 
 export function EditButtons({}) {
   const [activeFilter, setActiveFilter] = useState(null);
 
   return (
     <div className="flex flex-row items-center justify-end">
+      {/* add new row */}
       <button
         className=" flex flex-row items-center p-2 text-xs text-white rounded border-b-2 border-blue-600"
         style={{ backgroundColor: "#65A9FF" }}

src/components/ReactTable4/GlobalFilter.js

@@ -28,7 +28,15 @@ export const GlobalFilter = ({ filter, setFilter }) => {
         alt=""
         className="w-4 h-4 absolute left-2 cursor-pointer"
       />
+
       <input
+        value={filter || ""}
+        onChange={(e) => setFilter(e.target.value)}
+        type="text"
+        className={`text-xs text-blue-400 rounded focus:outline-none placeholder-blue-400 border`}
+        style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
+      />
+      {/* <input
         value={value || ""}
         onChange={(e) => {
           setValue(e.target.value);
@@ -39,7 +47,7 @@ export const GlobalFilter = ({ filter, setFilter }) => {
         type="text"
         className={`text-xs text-blue-400 rounded focus:outline-none placeholder-blue-400 border`}
         style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
-      />
+      /> */}
     </div>
   );
 };

src/components/ReactTable4/MOCK_DATA.json

@@ -17,5 +17,81 @@
     "birth_day": "1368/09/02",
     "Criminal record": "4 سال حبس",
     "uni": "تهران"
+  },
+  {
+    "name": "خسرو شکیبایی",
+    "order-date": "1340/04/13",
+    "order-price": 225.2569,
+    "order-number": "09390646589",
+    "user-job": "بازیگر",
+    "order-status": 2,
+    "order-level": 2,
+    "birth_place": "استان تهران شهر تهران",
+    "office_phone": "02144407010",
+    "education": "کارشناسی",
+    "behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق",
+    "job": "فروشنده لوازم خانگی",
+    "address": "خیابان  شریعتی نرسیده به خیابان دولت کوچه عباسی نبش تهیه غذای فارسی پلاک 4 واحد 3",
+    "field_study": "مدیریت صنعتی",
+    "birth_day": "1368/09/02",
+    "Criminal record": "4 سال حبس",
+    "uni": "تهران"
+  },
+  {
+    "name": "علی علوی",
+    "order-date": "1330/12/05",
+    "order-price": 910.325,
+    "order-number": "09120403285",
+    "user-job": "تاجر",
+    "order-status": 3,
+    "order-level": 3,
+    "birth_place": "استان تهران شهر تهران",
+    "office_phone": "02144407010",
+    "education": "کارشناسی",
+    "behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق",
+    "job": "فروشنده لوازم خانگی",
+    "address": "خیابان  شریعتی نرسیده به خیابان دولت کوچه عباسی نبش تهیه غذای فارسی پلاک 4 واحد 3",
+    "field_study": "مدیریت صنعتی",
+    "birth_day": "1368/09/02",
+    "Criminal record": "4 سال حبس",
+    "uni": "تهران"
+  },
+  {
+    "name": "پارسا ایرانی",
+    "order-date": "1372/01/08",
+    "order-price": 123456789,
+    "order-number": "09120336508",
+    "user-job": "حسابدار",
+    "order-status": 4,
+    "order-level": 4,
+    "birth_place": "استان تهران شهر تهران",
+    "office_phone": "02144407010",
+    "education": "کارشناسی",
+    "behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق",
+    "job": "فروشنده لوازم خانگی",
+    "address": "خیابان  شریعتی نرسیده به خیابان دولت کوچه عباسی نبش تهیه غذای فارسی پلاک 4 واحد 3",
+    "field_study": "مدیریت صنعتی",
+    "birth_day": "1368/09/02",
+    "Criminal record": "4 سال حبس",
+    "uni": "تهران"
+  },
+  {
+    "name": "محمد محمدی",
+    "order-date": "1389/01/26",
+    "order-price": 550000,
+    "order-number": "0913698574",
+    "user-job": "دکتر",
+    "order-status": 5,
+    "order-level": 5,
+    "birth_place": "استان تهران شهر تهران",
+    "office_phone": "02144407010",
+    "education": "کارشناسی",
+    "behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق",
+    "job": "فروشنده لوازم خانگی",
+    "address": "خیابان  شریعتی نرسیده به خیابان دولت کوچه عباسی نبش تهیه غذای فارسی پلاک 4 واحد 3",
+    "field_study": "مدیریت صنعتی",
+    "birth_day": "1368/09/02",
+    "Criminal record": "4 سال حبس",
+    "uni": "تهران"
   }
 ]

src/components/ReactTable4/columns.js

@@ -15,13 +15,12 @@ export const COLUMNS = [
     Footer: "نام و نام خانوادگی",
     accessor: "name",
     disableSortBy: true,
-    Filter: false,
+    disableFilters: true,
   },
   {
     Header: "تاریخ سفارش",
     Footer: "تاریخ سفارش",
     accessor: "order-date",
-    Filter: false,
     Cell: ({ value }) => {
       return format(new Date(value), "dd/MM/yyyy");
     },
@@ -30,25 +29,21 @@ export const COLUMNS = [
     Header: "مبلغ سفارش",
     Footer: "مبلغ سفارش",
     accessor: "order-price",
-    Filter: false,
   },
   {
     Header: "شماره سفارش",
     Footer: "شماره سفارش",
     accessor: "order-number",
-    Filter: false,
   },
   {
     Header: "شغل کاربر",
     Footer: "شغل کاربر",
     accessor: "user-job",
-    Filter: false,
   },
   {
     Header: "وضعیت سفارش",
     Footer: "وضعیت سفارش",
     accessor: "order-status",
-    Filter: false,
     Cell: OrderStatus,
   },
   {
@@ -62,8 +57,8 @@ export const COLUMNS = [
     Header: EditButtons,
     Footer: "ویرایش",
     accessor: "edit",
-    Filter: false,
     Cell: Buttons,
     disableSortBy: true,
+    disableFilters: true,
   },
 ];

src/components/ReactTable4/index.js

@@ -6,7 +6,6 @@ const ReactTable4 = ({ breadCrumbs, subTitle, title }) => {
   return (
     <div className="my-10  w-11/12 mx-auto">
       {/* breadCrumb */}
-
       <div className="flex flex-row items-center">
         {breadCrumbs.map((breadCrumb, index) => (
           <div className="flex flex-row items-center">
@@ -29,7 +28,6 @@ const ReactTable4 = ({ breadCrumbs, subTitle, title }) => {
           </div>
         ))}
       </div>
-
       <div className="my-7">
         {/* page Title */}
         <div className="flex flex-row items-center">