update

src/App.js

@@ -89,7 +89,7 @@ function App() {
         {/* <Design2 /> */}
         {/* <TableDesign1 /> */}
         {/* <ReactTable2 /> */}
-        {/* <ReactTable3 /> */}
+        <ReactTable3 />
         <ReactTable4 />
         {/* <Digikala /> */}
         {/* <DigikalaShop /> */}

src/components/ReactTable4/NumberRangeColumnFilter.js

@@ -1,59 +0,0 @@
-import React from "react";
-
-const NumberRangeColumnFilter = ({
-  column: { filterValue = [], preFilteredRows, setFilter, id },
-}) => {
-  const [min, max] = React.useMemo(() => {
-    let min = preFilteredRows.length ? preFilteredRows[0].values[id] : 0;
-    let max = preFilteredRows.length ? preFilteredRows[0].values[id] : 0;
-    preFilteredRows.forEach((row) => {
-      min = Math.min(row.values[id], min);
-      max = Math.max(row.values[id], max);
-    });
-    return [min, max];
-  }, [id, preFilteredRows]);
-
-  return (
-    <div
-      style={{
-        display: "flex",
-      }}
-    >
-      <input
-        value={filterValue[0] || ""}
-        type="number"
-        onChange={(e) => {
-          const val = e.target.value;
-          setFilter((old = []) => [
-            val ? parseInt(val, 10) : undefined,
-            old[1],
-          ]);
-        }}
-        placeholder={`Min (${min})`}
-        style={{
-          width: "70px",
-          marginRight: "0.5rem",
-        }}
-      />
-      to
-      <input
-        value={filterValue[1] || ""}
-        type="number"
-        onChange={(e) => {
-          const val = e.target.value;
-          setFilter((old = []) => [
-            old[0],
-            val ? parseInt(val, 10) : undefined,
-          ]);
-        }}
-        placeholder={`Max (${max})`}
-        style={{
-          width: "70px",
-          marginLeft: "0.5rem",
-        }}
-      />
-    </div>
-  );
-};
-
-export default NumberRangeColumnFilter;

src/components/ReactTable4/columns.js

@@ -7,7 +7,6 @@ import { EditButtons } from "./EditButtons";
 import { SelectColumnFilter } from "./SelectColumnFilter.js";
 import { SelectColumnFilter2 } from "./SelectColumnFilter2.js";
 import { SliderColumnFilter } from "./SliderColumnFilter.js";
-import NumberRangeColumnFilter from "./NumberRangeColumnFilter";
 
 export const COLUMNS = ({ setFiltering, filtering, addTab }) => [
   {
@@ -20,8 +19,7 @@ export const COLUMNS = ({ setFiltering, filtering, addTab }) => [
     Header: "تاریخ سفارش",
     Footer: "ستون تاریخ سفارش",
     accessor: "order_date",
-    // Filter: SliderColumnFilter,
+    Filter: SliderColumnFilter,
-    Filter: NumberRangeColumnFilter,
     Cell: ({ value }) => {
       return format(new Date(value), "dd/MM/yyyy");
     },
@@ -30,7 +28,7 @@ export const COLUMNS = ({ setFiltering, filtering, addTab }) => [
     Header: "مبلغ سفارش",
     Footer: "ستون مبلغ سفارش",
     accessor: "order_price",
-    Filter: NumberRangeColumnFilter,
+    Filter: SliderColumnFilter,
   },
   {
     Header: "شماره سفارش",
@@ -58,7 +56,7 @@ export const COLUMNS = ({ setFiltering, filtering, addTab }) => [
   },
   {
     Header: () => EditButtons({ setFiltering, filtering, addTab }),
-    Footer: "ستون ویرایش",
+    Footer: "ستون ",
     accessor: "edit",
     Cell: ({ row }) => Buttons({ row, addTab }),
     disableSortBy: true,

src/components/ReactTable4/index.js

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