added and updated

src/components/ReactTable4/BasicTable.js

@@ -11,7 +11,6 @@ import {
   useRowSelect,
   useColumnOrder,
   useExpanded,
-  useResizeColumns,
 } from "react-table";
 
 import { COLUMNS } from "./columns";
@@ -239,6 +238,7 @@ const BasicTable = ({ settingsIcon }) => {
                         : " 🔼"
                       : ""}
                   </span>
+                  {/* <div>{column.canFilter ? column.render("Filter") : null}</div> */}
                 </th>
               ))}
             </tr>

src/components/ReactTable4/ColumnFilter.js

@@ -1,19 +1,14 @@
-import React from 'react';
+import React from "react";
 
 export const ColumnFilter = ({ column }) => {
-
+  const { filterValue, setFilter } = column;
-    const { filterValue, setFilter } = column 
 
   return (
-        
     <span>
-
+      <input
-            Search: {''}
+        value={filterValue || ""}
-
+        onChange={(e) => setFilter(e.target.value)}
-            <input value={filterValue || '' }
+      />
-            onChange={(e) => setFilter(e.target.value)} />
-
     </span>
-        
   );
 };

src/components/ReactTable4/MOCK_DATA.json

@@ -1,6 +1,6 @@
 [
   {
-    "name": "mahdi",
+    "name": "سامسونگ موبایل مدل 1",
     "order-date": "1399/09/27",
     "order-price": 25,
     "order-number": "09120023100",
@@ -10,73 +10,43 @@
     "history": "مهدی"
   },
   {
-    "name": "مهدی",
+    "name": "ایفون جدید 13",
-    "order-date": "1399/09/27",
+    "order-date": "1305/09/27",
-    "order-price": 27,
+    "order-price": 22,
-    "order-number": "09120023100",
-    "user-job": "مهندس ساختمان",
-    "order-status": 1,
-    "order-level": 1,
-    "history": "mahdimahdi"
-  },
-  {
-    "name": "mahdi",
-    "order-date": "1399/09/27",
-    "order-price": 25,
     "order-number": "09120023100",
     "user-job": "مهندس ساختمان",
-    "order-status": 1,
+    "order-status": 2,
-    "order-level": 1,
+    "order-level": 2,
     "history": "مهدی"
   },
   {
-    "name": "مهدی",
+    "name": "مک بوک پرو",
     "order-date": "1399/09/27",
-    "order-price": 27,
+    "order-price": 75,
-    "order-number": "09120023100",
-    "user-job": "مهندس ساختمان",
-    "order-status": 1,
-    "order-level": 1,
-    "history": "mahdimahdi"
-  },
-  {
-    "name": "mahdi",
-    "order-date": "1399/09/27",
-    "order-price": 25,
     "order-number": "09120023100",
     "user-job": "مهندس ساختمان",
-    "order-status": 1,
+    "order-status": 3,
-    "order-level": 1,
+    "order-level": 3,
     "history": "مهدی"
   },
   {
-    "name": "مهدی",
+    "name": "تبلت",
-    "order-date": "1399/09/27",
+    "order-date": "1305/09/27",
-    "order-price": 27,
+    "order-price": 44,
-    "order-number": "09120023100",
-    "user-job": "مهندس ساختمان",
-    "order-status": 1,
-    "order-level": 1,
-    "history": "mahdimahdi"
-  },
-  {
-    "name": "mahdi",
-    "order-date": "1399/09/27",
-    "order-price": 25,
     "order-number": "09120023100",
     "user-job": "مهندس ساختمان",
-    "order-status": 1,
+    "order-status": 4,
-    "order-level": 1,
+    "order-level": 4,
     "history": "مهدی"
   },
   {
-    "name": "مهدی",
+    "name": "کتاب جدید",
-    "order-date": "1399/09/27",
+    "order-date": "1305/09/27",
-    "order-price": 27,
+    "order-price": 13,
     "order-number": "09120023100",
-    "user-job": "مهندس ساختمان",
+    "user-job": "طناز",
-    "order-status": 1,
+    "order-status": 5,
-    "order-level": 1,
+    "order-level": 5,
-    "history": "mahdimahdi"
+    "history": "مهدی"
   }
 ]

src/components/ReactTable4/columns.js

@@ -2,7 +2,7 @@ import { format } from "date-fns";
 
 import Table, { SelectColumnFilter } from "./BasicTable"; // new
 
-import { ColumnFilter } from "./ColumnFilter";
+import { ColumnFilter } from "./ColumnFilter.js";
 
 import { OrderStatus } from "./OrderStatus";
 import { OrderLevel } from "./OrderLevel";
@@ -15,11 +15,13 @@ export const COLUMNS = [
     Footer: "نام و نام خانوادگی",
     accessor: "name",
     disableSortBy: true,
+    Filter: false,
   },
   {
     Header: "تاریخ سفارش",
     Footer: "تاریخ سفارش",
     accessor: "order-date",
+    Filter: false,
     Cell: ({ value }) => {
       return format(new Date(value), "dd/MM/yyyy");
     },
@@ -28,22 +30,25 @@ export const COLUMNS = [
     Header: "مبلغ سفارش",
     Footer: "مبلغ سفارش",
     accessor: "order-price",
-    Filter: ColumnFilter,
+    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,
   },
   {
@@ -51,13 +56,13 @@ export const COLUMNS = [
     Footer: "سطح اهمیت",
     accessor: "order-level",
     Cell: OrderLevel,
-    // Filter: SelectColumnFilter,
+    Filter: SelectColumnFilter,
-    // new
   },
   {
     Header: EditButtons,
     Footer: "ویرایش",
     accessor: "edit",
+    Filter: false,
     Cell: Buttons,
     disableSortBy: true,
   },