update added

src/App.js

@@ -42,7 +42,8 @@ import Design1 from "./components/ProductSalesAmount/Design1";
 import Design2 from "./components/ProductSalesAmount/Design2";
 import TableDesign1 from "./components/Table/Design1";
 import ReactTable2 from "./components/ReactTable2";
-import ReactTable3 from "./components/ReactTable3";
+// import ReactTable3 from "./components/ReactTable3";
+import ReactTable4 from "./components/ReactTable4";
 
 import Switch from "./components/Switch";
 
@@ -89,7 +90,8 @@ function App() {
         {/* <Design2 /> */}
         {/* <TableDesign1 /> */}
         {/* <ReactTable2 /> */}
-        <ReactTable3 />
+        {/* <ReactTable3 /> */}
+        <ReactTable4 />
       </div>
     </Provider>
   );

src/components/ReactTable3/index.js

@@ -5,7 +5,7 @@ import BasicTable from "./BasicTable";
 const ReactTable3 = ({ breadCrumbs, subTitle, title }) => {
   return (
     <div className="my-10  w-11/12 mx-auto">
-      <h1 className="text-3lg bg-pink-600 text-whtite rounded shadow-sm p-4 text-center text-white">
+      <h1 className="text-9xl bg-pink-600 text-whtite rounded shadow-sm p-4 text-center text-white">
         search box pop up CLICK ON THE SEARCH ICON AND SEE THE RESULT
       </h1>
       {/* breadCrumb */}

src/components/ReactTable4/BasicTable.js

@@ -0,0 +1,382 @@
+import React, { useMemo } from "react";
+
+import "./index.scss";
+
+import {
+  useTable,
+  useSortBy,
+  useGlobalFilter,
+  useFilters,
+  usePagination,
+  useRowSelect,
+  useColumnOrder,
+  useExpanded,
+  useResizeColumns,
+} from "react-table";
+
+import { COLUMNS } from "./columns";
+import { GlobalFilter } from "./GlobalFilter";
+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 = () => {
+  const columns = React.useMemo(() => COLUMNS, []);
+  const data = useMemo(() => MOCK_DATA, []);
+
+  //   اگر بخواهیم ردیف های جدولمون یکی در میان زنگ پس زمینه اشون با هم فرق کند
+  const isEven = (idx) => idx % 2 === 0;
+
+  const {
+    getTableProps,
+    getTableBodyProps,
+    headerGroups,
+    footerGroups,
+    rows,
+    page,
+    nextPage,
+    previousPage,
+    canNextPage,
+    canPreviousPage,
+    pageOptions,
+    gotoPage,
+    pageCount,
+    setPageSize,
+    prepareRow,
+    allColumns,
+    getToggleHideAllColumnsProps,
+    setColumnOrder,
+    selectedFlatRows,
+    state,
+    setGlobalFilter,
+    resetResizing,
+  } = useTable(
+    {
+      columns,
+      data,
+      // initialState: { pageIndex: 2 }
+    },
+    useColumnOrder,
+    useFilters,
+    useGlobalFilter,
+    useSortBy,
+    useExpanded,
+    usePagination,
+    useRowSelect,
+    (hooks) => {
+      hooks.visibleColumns.push((columns) => {
+        return [
+          {
+            id: "selection",
+            Header: ({ getToggleAllRowsSelectedProps }) => (
+              <Checkbox {...getToggleAllRowsSelectedProps()} />
+            ),
+            Cell: ({ row }) => (
+              <Checkbox {...row.getToggleRowSelectedProps()} />
+            ),
+          },
+          ...columns,
+        ];
+      });
+    }
+  );
+
+  const changeOrder = () => {
+    setColumnOrder([
+      "name",
+      "order-number",
+      "user-job",
+      "order-level",
+      "order-status",
+      "order-price",
+    ]);
+  };
+
+  const { globalFilter, pageIndex, pageSize } = state;
+  // const firstPageRows = rows.slice(0, 10);
+  return (
+    <>
+      <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>
+      <div className="flex flex-row items-center justify-end mb-3 mx-4">
+        {/*  search box */}
+        {/* <GlobalFilter filter={globalFilter} setFilter={setGlobalFilter} /> */}
+        {/* pagination */}
+        <div
+          className="border border-blue-400 rounded-sm py-1 px-2 flex flex-items-center"
+          style={{}}
+        >
+          {/* go to page */}
+          <div>
+            <input
+              className="ml-1 text-xs p-1 rounded border-blue-400"
+              type="number"
+              defaultValue={pageIndex + 1}
+              onChange={(e) => {
+                const pageNumber = e.target.value
+                  ? Number(e.target.value) - 1
+                  : 0;
+                gotoPage(pageNumber);
+              }}
+              style={{ width: "50px" }}
+            />
+            <span className={`text-xs`} style={{ color: "#65A9FF" }}>
+              {" "}
+              برو به صفحه{" "}
+            </span>
+          </div>
+          {/*  */}
+          <div className={`bg-gray-400 w-0.5 my-2 mx-1`}></div>
+          {/* arrows */}
+          <button
+            className="rounded py-1 px-2 mx-1 text-xs"
+            style={{ backgroundColor: "#F5F9FF", color: "#65A9FF" }}
+            onClick={() => gotoPage(0)}
+            disabled={!canPreviousPage}
+          >
+            {"<<"}
+          </button>
+          <button
+            className="rounded py-1 px-2 mx-1 text-xs"
+            style={{ backgroundColor: "#F5F9FF", color: "#65A9FF" }}
+            onClick={() => previousPage()}
+            disabled={!canPreviousPage}
+          >
+            {"<"}
+          </button>
+          <button
+            className="rounded py-1 px-2 mx-1 text-xs"
+            style={{ backgroundColor: "#F5F9FF", color: "#65A9FF" }}
+            onClick={() => nextPage()}
+            disabled={!canNextPage}
+          >
+            {">"}
+          </button>
+          <button
+            className="rounded py-1 px-2 mx-1 text-xs"
+            style={{ backgroundColor: "#F5F9FF", color: "#65A9FF" }}
+            onClick={() => gotoPage(pageCount - 1)}
+            disabled={!canNextPage}
+          >
+            {">>"}
+          </button>
+        </div>
+      </div>
+      {/*  */}
+      {/* toggle columns */}
+      {/* <div>
+        <div>
+          <Checkbox {...getToggleHideAllColumnsProps()} /> Toggle All
+        </div>
+        {allColumns.map((column) => (
+          <div key={column.id}>
+            <label>
+              <input type="checkbox" {...column.getToggleHiddenProps()} />
+              {column.Header}
+            </label>
+          </div>
+        ))}
+      </div> */}
+      {/* Change Column Order */}
+      {/* <button onClick={changeOrder}> Change Column Order </button> */}
+      <table
+        {...getTableProps()}
+        className="min-w-full divide-y divide-gray-200"
+      >
+        <thead className="" style={{ backgroundColor: "#F3F8FF" }}>
+          {headerGroups.map((headerGroup) => (
+            <tr {...headerGroup.getHeaderGroupProps()}>
+              {headerGroup.headers.map((column) => (
+                <th
+                  {...column.getHeaderProps(column.getSortByToggleProps())}
+                  scope="col"
+                  className="cursor-pointer p-4 text-right text-sm font-medium"
+                  style={{ color: "#3287B9" }}
+                >
+                  {column.render("Header")}
+                  <span>
+                    {column.isSorted
+                      ? column.isSortedDesc
+                        ? " 🔽"
+                        : " 🔼"
+                      : ""}
+                  </span>
+                </th>
+              ))}
+            </tr>
+          ))}
+        </thead>
+
+        <tbody
+          {...getTableBodyProps()}
+          className="divide-y divide-gray-200 bg-white"
+        >
+          {page.map((row, idx) => {
+            prepareRow(row);
+            return (
+              <React.Fragment>
+                <tr
+                  {...row.getRowProps()}
+                  //   className={isEven(idx) ? "bg-gray-600" : "bg-white"}
+                >
+                  {row.cells.map((cell) => {
+                    return (
+                      <td
+                        {...cell.getCellProps()}
+                        className="p-4 whitespace-nowrap text-xs"
+                        role="cell"
+                        style={{ color: "#00253A" }}
+                      >
+                        {cell.render("Cell")}
+                      </td>
+                    );
+                  })}
+                </tr>
+                {row.isExpanded ? (
+                  <tr>
+                    <td colSpan={headerGroups[0].headers.length}>
+                      {renderRowSubComponent({ row: row.values })}
+                    </td>
+                  </tr>
+                ) : null}
+              </React.Fragment>
+            );
+          })}
+        </tbody>
+
+        <tfoot
+          className={`bg-blue-900 ${rows.length > 10 ? "w-full" : "hidden"}`}
+        >
+          {footerGroups.map((footerGroup) => (
+            <tr {...footerGroup.getFooterGroupProps()}>
+              {footerGroup.headers.map((column) => (
+                <td
+                  {...column.getFooterProps}
+                  className="px-4 py-2 text-right text-xs"
+                  style={{ color: "#fff" }}
+                >
+                  {column.render("Footer")}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tfoot>
+      </table>
+      <pre>
+        <code>
+          {JSON.stringify(
+            {
+              selectedFlatRows: selectedFlatRows.map((row) => row.original),
+            },
+            null,
+            2
+          )}
+        </code>
+      </pre>
+
+      <div className="mt-3 ">
+        <span className="text-sm ml-4">
+          صفحه{" "}
+          <strong className="text-indigo-500">
+            {pageIndex + 1} از {pageOptions.length}
+          </strong>
+          {""}
+        </span>
+
+        <select
+          className="text-white text-sm rounded cursor-pointer"
+          style={{
+            backgroundColor: "#65A9FF",
+            borderColor: "#65A9FF",
+          }}
+          value={pageSize}
+          onChange={(e) => setPageSize(Number(e.target.value))}
+        >
+          {[7, 10, 25, 50].map((pageSize) => (
+            <option
+              key={pageSize}
+              value={pageSize}
+              className=" text-sm"
+              style={{
+                direction: "ltr",
+                textAlign: "right",
+              }}
+            >
+              نمایش {pageSize}
+            </option>
+          ))}
+        </select>
+      </div>
+    </>
+  );
+};
+
+function renderRowSubComponent({ row }) {
+  return (
+    <div className="pl-2 pr-5 bg-blue-200">
+      نام‌: {row.name}
+      <br />
+      <button className="bg-blue-400">ویرایش</button>
+    </div>
+  );
+}
+export default BasicTable;

src/components/ReactTable4/Buttons.js

@@ -0,0 +1,31 @@
+import arrowIcon from "./arrow-icon.svg";
+import more from "./more2.svg";
+import edit from "./edit.svg";
+
+import { useState } from "react";
+
+export function Buttons({ row }) {
+  const [activeDetails, setActiveDetails] = useState(null);
+  return (
+    <div className="flex flex-row items-center justify-end">
+      <button
+        className="flex flex-row items-center justify-around  p-2 rounded border border-gray-300 mx-1"
+        onClick={() => setActiveDetails(!activeDetails)}
+        {...row.getToggleRowExpandedProps()}
+      >
+        جزیات
+        <img
+          src={arrowIcon}
+          alt=""
+          className={`w-3 cursor-pointer mr-2 ${
+            activeDetails ? "rotate-60" : "rotate-90"
+          }`}
+        />
+      </button>
+      <div className="p-2 rounded border border-gray-300 cursor-pointer mx-1">
+        <img src={edit} alt="" className="w-4" />
+      </div>
+      <img src={more} alt="" className="w-5 cursor-pointer mx-1" />
+    </div>
+  );
+}

src/components/ReactTable4/Checkbox.js

@@ -0,0 +1,16 @@
+import React from "react";
+
+export const Checkbox = React.forwardRef(({ indeterminate, ...rest }, ref) => {
+  const defaultRef = React.useRef();
+  const resolvedRef = ref || defaultRef;
+
+  React.useEffect(() => {
+    resolvedRef.current.indeterminate = indeterminate;
+  }, [resolvedRef, indeterminate]);
+
+  return (
+    <>
+      <input type="checkbox" ref={resolvedRef} {...rest} />
+    </>
+  );
+});

src/components/ReactTable4/ColumnFilter.js

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

src/components/ReactTable4/EditButtons.js

@@ -0,0 +1,126 @@
+import React, { useState } from "react";
+
+import filter from "./filter.svg";
+import plus from "./plus.svg";
+import more from "./more2.svg";
+
+export function EditButtons({ buttons }) {
+  const [selectedButton, setSelectedButton] = useState(null);
+  return (
+    <div className="flex flex-row items-center justify-end">
+      {buttons.map((button, index) => (
+        <div>
+          <button
+            id="dropdownButton"
+            data-dropdown-toggle="dropdown"
+            type="button"
+            className={`flex flex-row items-center justify-around p-1 rounded-md bg-opacity-30 mx-1 ${
+              button.border
+            } ${button.borderColor} ${
+              selectedButton === button ? "border" : "border-0"
+            }`}
+            key={index}
+            style={{
+              backgroundColor: button.backgroundColor,
+              padding: button.padding,
+            }}
+            onClick={() =>
+              setSelectedButton(selectedButton === button ? null : button)
+            }
+          >
+            <p className={` text-white`}>{button.title}</p>
+            <img
+              src={button.logo}
+              alt=""
+              className={`cursor-pointer ${button.width} ${button.height} ${
+                button.title === null ? "mr-0" : "mx-2"
+              }`}
+            />
+          </button>
+          <div
+            id="dropdown"
+            className="hidden z-10 w-44 text-base list-none bg-red-600 rounded divide-y divide-gray-100 shadow dark:bg-gray-700"
+          >
+            {button.buttonSubItems === !null &&
+              button.buttonSubItems.map((buttonSubItem, i) => (
+                <p>{buttonSubItem.title}</p>
+              ))}
+
+            {/* <ul className="py-1" aria-labelledby="dropdownButton">
+              {button.buttonSubItems === !null &&
+                button.buttonSubItems.map((buttonSubItem, i) => (
+                  <li className="bg-red-400">{buttonSubItem.title}</li>
+                ))}
+            </ul> */}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+EditButtons.defaultProps = {
+  buttons: [
+    {
+      logo: plus,
+      width: "w-3",
+      height: "h-3",
+      title: "ثبت جدید",
+      backgroundColor: "#65A9FF",
+      border: "border-b-4",
+      borderColor: "#3686EC",
+      padding: "4px 7px",
+      components: "d",
+      buttonSubItems: [],
+    },
+    {
+      logo: filter,
+      width: "w-5",
+      height: "h-5",
+      title: null,
+      backgroundColor: "#F3F8FF",
+      border: null,
+      borderColor: null,
+      components: "a",
+      buttonSubItems: [],
+    },
+    {
+      logo: more,
+      width: "w-5",
+      height: "h-5",
+      title: null,
+      textColor: null,
+      backgroundColor: "#F3F8FF",
+      border: null,
+      borderColor: null,
+      components: "a",
+      buttonSubItems: [
+        {
+          title: "دراپ داون 1",
+        },
+        {
+          title: "دراپ داون 2",
+        },
+        {
+          title: "دراپ داون 3",
+        },
+        {
+          title: "دراپ داون 4",
+        },
+        {
+          title: "دراپ داون 5",
+        },
+      ],
+    },
+  ],
+};
+
+// {
+//   logo: settings,
+//   width: "w-5",
+//   height: "h-5",
+//   title: null,
+//   textColor: null,
+//   backgroundColor: "#F3F8FF",
+//   components: "b",
+// },

src/components/ReactTable4/GlobalFilter.js

@@ -0,0 +1,27 @@
+import React, { useState } from "react";
+import { useAsyncDebounce } from "react-table";
+
+import search from "./search-normal.svg";
+
+export const GlobalFilter = ({ filter, setFilter }) => {
+  const [openModal, setOpenModal] = useState(true);
+
+  const [value, setValue] = useState(filter);
+
+  const onChange = useAsyncDebounce((value) => {
+    setFilter(value || undefined);
+  }, 400);
+
+  return (
+    <input
+      value={value || ""}
+      onChange={(e) => {
+        setValue(e.target.value);
+        onChange(e.target.value);
+      }}
+      type="text"
+      placeholder="نام کالا را جستجو کنید..."
+      className="text-xs rounded-sm pr-4 pl-10 py-2 w-full border border-gray-400 font-light text-lightGrayTextColor	placeholder-gray-400 focus:outline-none"
+    />
+  );
+};

src/components/ReactTable4/MOCK_DATA.json

@@ -0,0 +1,182 @@
+[
+  {
+    "name": "مایکروویر سامسونگ مدل 1",
+    "order-date": "1399/09/27",
+    "order-price": 27,
+    "order-number": "09120023100",
+    "user-job": "مهندس ساختمان",
+    "order-status": 1,
+    "order-level": 1
+  },
+  {
+    "name": "مایکروویر سامسونگ مدل 2",
+    "order-date": "1399/09/25",
+    "order-price": 26,
+    "order-number": "09120023100",
+    "user-job": "مهندس ساختمان",
+    "order-status": 2,
+    "order-level": 2
+  },
+  {
+    "name": "مایکروویر سامسونگ مدل 3",
+    "order-date": "1399/09/22",
+    "order-price": 44,
+    "order-number": "09120023100",
+    "user-job": "مهندس ساختمان",
+    "order-status": 3,
+    "order-level": 3
+  },
+  {
+    "name": "لپ تاپ مک بوک اپل",
+    "order-date": "1410/09/27",
+    "order-price": 73,
+    "order-number": "09120023100",
+    "user-job": "مهندس ساختمان",
+    "order-status": 4,
+    "order-level": 4
+  },
+  {
+    "name": "تبلت اپل",
+    "order-date": "1375/09/25",
+    "order-price": 96,
+    "order-number": "09120023100",
+    "user-job": "مهندس ساختمان",
+    "order-status": 5,
+    "order-level": 5
+  },
+  {
+    "name": "مایکروویر سامسونگ مدل 1",
+    "order-date": "1399/09/27",
+    "order-price": 27,
+    "order-number": "09120023100",
+    "user-job": "مهندس ساختمان",
+    "order-status": 1,
+    "order-level": 1
+  },
+  {
+    "name": "مایکروویر سامسونگ مدل 2",
+    "order-date": "1399/09/25",
+    "order-price": 26,
+    "order-number": "09120023100",
+    "user-job": "مهندس ساختمان",
+    "order-status": 2,
+    "order-level": 2
+  },
+  {
+    "name": "مایکروویر سامسونگ مدل 3",
+    "order-date": "1399/09/22",
+    "order-price": 44,
+    "order-number": "09120023100",
+    "user-job": "مهندس ساختمان",
+    "order-status": 3,
+    "order-level": 3
+  },
+  {
+    "name": "لپ تاپ مک بوک اپل",
+    "order-date": "1410/09/27",
+    "order-price": 73,
+    "order-number": "09120023100",
+    "user-job": "مهندس ساختمان",
+    "order-status": 4,
+    "order-level": 4
+  },
+  {
+    "name": "تبلت اپل",
+    "order-date": "1375/09/25",
+    "order-price": 96,
+    "order-number": "09120023100",
+    "user-job": "مهندس ساختمان",
+    "order-status": 5,
+    "order-level": 5
+  },
+  {
+    "name": "مایکروویر سامسونگ مدل 1",
+    "order-date": "1399/09/27",
+    "order-price": 27,
+    "order-number": "09120023100",
+    "user-job": "مهندس ساختمان",
+    "order-status": 1,
+    "order-level": 1
+  },
+  {
+    "name": "مایکروویر سامسونگ مدل 2",
+    "order-date": "1399/09/25",
+    "order-price": 26,
+    "order-number": "09120023100",
+    "user-job": "مهندس ساختمان",
+    "order-status": 2,
+    "order-level": 2
+  },
+  {
+    "name": "مایکروویر سامسونگ مدل 3",
+    "order-date": "1399/09/22",
+    "order-price": 44,
+    "order-number": "09120023100",
+    "user-job": "مهندس ساختمان",
+    "order-status": 3,
+    "order-level": 3
+  },
+  {
+    "name": "لپ تاپ مک بوک اپل",
+    "order-date": "1410/09/27",
+    "order-price": 73,
+    "order-number": "09120023100",
+    "user-job": "مهندس ساختمان",
+    "order-status": 4,
+    "order-level": 4
+  },
+  {
+    "name": "تبلت اپل",
+    "order-date": "1375/09/25",
+    "order-price": 96,
+    "order-number": "09120023100",
+    "user-job": "مهندس ساختمان",
+    "order-status": 5,
+    "order-level": 5
+  },
+  {
+    "name": "مایکروویر سامسونگ مدل 1",
+    "order-date": "1399/09/27",
+    "order-price": 27,
+    "order-number": "09120023100",
+    "user-job": "مهندس ساختمان",
+    "order-status": 1,
+    "order-level": 1
+  },
+  {
+    "name": "مایکروویر سامسونگ مدل 2",
+    "order-date": "1399/09/25",
+    "order-price": 26,
+    "order-number": "09120023100",
+    "user-job": "مهندس ساختمان",
+    "order-status": 2,
+    "order-level": 2
+  },
+  {
+    "name": "مایکروویر سامسونگ مدل 3",
+    "order-date": "1399/09/22",
+    "order-price": 44,
+    "order-number": "09120023100",
+    "user-job": "مهندس ساختمان",
+    "order-status": 3,
+    "order-level": 3
+  },
+  {
+    "name": "لپ تاپ مک بوک اپل",
+    "order-date": "1410/09/27",
+    "order-price": 73,
+    "order-number": "09120023100",
+    "user-job": "مهندس ساختمان",
+    "order-status": 4,
+    "order-level": 4
+  },
+  {
+    "name": "تبلت اپل",
+    "order-date": "1375/09/25",
+    "order-price": 96,
+    "order-number": "09120023100",
+    "user-job": "مهندس ساختمان",
+    "order-status": 5,
+    "order-level": 5
+  }
+]

src/components/ReactTable4/NOTUSINGBasicTableDefaultCode.js

@@ -0,0 +1,302 @@
+import React, { useMemo } from "react";
+
+import {
+  useTable,
+  useSortBy,
+  useGlobalFilter,
+  useFilters,
+  usePagination,
+  useRowSelect,
+  useColumnOrder,
+} from "react-table";
+
+import { COLUMNS } from "./columns";
+
+import { GlobalFilter } from "./GlobalFilter";
+
+import { Checkbox } from "./Checkbox";
+
+import MOCK_DATA from "./MOCK_DATA.json";
+
+const BasicTable = () => {
+  const columns = React.useMemo(() => COLUMNS, []);
+  const data = useMemo(() => MOCK_DATA, []);
+
+  const {
+    getTableProps,
+    getTableBodyProps,
+    headerGroups,
+    footerGroups,
+    rows,
+    page,
+    nextPage,
+    previousPage,
+    canNextPage,
+    canPreviousPage,
+    pageOptions,
+    gotoPage,
+    pageCount,
+    setPageSize,
+    prepareRow,
+    allColumns,
+    getToggleHideAllColumnsProps,
+    setColumnOrder,
+    selectedFlatRows,
+    state,
+    setGlobalFilter,
+  } = useTable(
+    {
+      columns,
+      data,
+      // initialState: { pageIndex: 2 }
+    },
+    useColumnOrder,
+    useFilters,
+    useGlobalFilter,
+    useSortBy,
+    usePagination,
+    useRowSelect,
+    (hooks) => {
+      hooks.visibleColumns.push((columns) => {
+        return [
+          {
+            id: "selection",
+            Header: ({ getToggleAllRowsSelectedProps }) => (
+              <Checkbox {...getToggleAllRowsSelectedProps()} />
+            ),
+            Cell: ({ row }) => (
+              <Checkbox {...row.getToggleRowSelectedProps()} />
+            ),
+          },
+          ...columns,
+        ];
+      });
+    }
+  );
+
+  const changeOrder = () => {
+    setColumnOrder([
+      "name",
+      "order-number",
+      "user-job",
+      "order-level",
+      "order-status",
+      "order-price",
+    ]);
+  };
+
+  const { globalFilter, pageIndex, pageSize } = state;
+  // const firstPageRows = rows.slice(0, 10);
+
+  return (
+    <>
+      <div className="bg-yellow-500">
+        {/* search box */}
+        <GlobalFilter filter={globalFilter} setFilter={setGlobalFilter} />
+        {/* pagination */}
+      </div>
+      {/* toggle columns */}
+      {/* <div>
+        <div>
+          <Checkbox {...getToggleHideAllColumnsProps()} /> Toggle All
+        </div>
+        {allColumns.map((column) => (
+          <div key={column.id}>
+            <label>
+              <input type="checkbox" {...column.getToggleHiddenProps()} />
+              {column.Header}
+            </label>
+          </div>
+        ))}
+      </div> */}
+
+      {/* Change Column Order */}
+      {/* <button onClick={changeOrder}> Change Column Order </button> */}
+
+      <table
+        {...getTableProps()}
+        className="min-w-full divide-y divide-gray-200"
+      >
+        <thead className="bg-gray-300">
+          {headerGroups.map((headerGroup) => (
+            <tr {...headerGroup.getHeaderGroupProps()}>
+              {headerGroup.headers.map((column) => (
+                <th
+                  {...column.getHeaderProps(column.getSortByToggleProps())}
+                  scope="col"
+                  className="cursor-pointer px-4 py-2 text-right text-xs"
+                  style={{ color: "#3287B9" }}
+                >
+                  {column.render("Header")}
+                  <span>
+                    {column.isSorted
+                      ? column.isSortedDesc
+                        ? " 🔽"
+                        : " 🔼"
+                      : ""}
+                  </span>
+                  {/* not using */}
+                  {/* <div>
+                      {column.canFilter ? column.render('Filter') : null }
+                  </div> */}
+                </th>
+              ))}
+            </tr>
+          ))}
+        </thead>
+
+        <tbody
+          {...getTableBodyProps()}
+          className="bg-white divide-y divide-gray-200"
+        >
+          {/* not using */}
+          {/* {rows.map((row) => {
+                        prepareRow(row)
+                        return(
+                            <tr {...row.getRowProps()}>
+                                {row.cells.map((cell) => {
+                                    return <td {...cell.getCellProps()} className="px-4 py-4 whitespace-nowrap text-sm" role="cell" style={{color:'#00253A'}}>
+                                        {cell.render('Cell')}
+                                    </td>
+                                })}
+                            </tr>
+                        )
+                    })} */}
+          {page.map((row) => {
+            prepareRow(row);
+            return (
+              <tr {...row.getRowProps()}>
+                {row.cells.map((cell) => {
+                  return (
+                    <td
+                      {...cell.getCellProps()}
+                      className="px-4 py-4 whitespace-nowrap text-sm"
+                      role="cell"
+                      style={{ color: "#00253A" }}
+                    >
+                      {cell.render("Cell")}
+                    </td>
+                  );
+                })}
+              </tr>
+            );
+          })}
+
+          {/* not using */}
+          {/* {firstPageRows.map((row) => {
+            prepareRow(row);
+            return (
+              <tr {...row.getRowProps()}>
+                {row.cells.map((cell) => {
+                  return (
+                    <td
+                      {...cell.getCellProps()}
+                      className="px-4 py-4 whitespace-nowrap text-sm"
+                      role="cell"
+                      style={{ color: "#00253A" }}
+                    >
+                      {cell.render("Cell")}
+                    </td>
+                  );
+                })}
+              </tr>
+            );
+          })} */}
+        </tbody>
+
+        <tfoot
+          className={`bg-gray-300 ${rows.length > 10 ? "w-full" : "hidden"}`}
+        >
+          {footerGroups.map((footerGroup) => (
+            <tr {...footerGroup.getFooterGroupProps()}>
+              {footerGroup.headers.map((column) => (
+                <td
+                  {...column.getFooterProps}
+                  className="px-4 py-2 text-right text-xs"
+                  style={{ color: "#3287B9" }}
+                >
+                  {column.render("Footer")}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tfoot>
+      </table>
+
+      <pre>
+        <code>
+          {JSON.stringify(
+            {
+              selectedFlatRows: selectedFlatRows.map((row) => row.original),
+            },
+            null,
+            2
+          )}
+        </code>
+      </pre>
+
+      <div>
+        <span>
+          Page{" "}
+          <strong>
+            {pageIndex + 1} of {pageOptions.length}
+          </strong>
+          {""}
+        </span>
+
+        <span>
+          | Go to Page:{" "}
+          <input
+            type="number"
+            defaultValue={pageIndex + 1}
+            onChange={(e) => {
+              const pageNumber = e.target.value
+                ? Number(e.target.value) - 1
+                : 0;
+              gotoPage(pageNumber);
+            }}
+            style={{ width: "50px" }}
+          />
+        </span>
+
+        <select
+          value={pageSize}
+          onChange={(e) => setPageSize(Number(e.target.value))}
+        >
+          {[7, 10, 25, 50].map((pageSize) => (
+            <option key={pageSize} value={pageSize}>
+              Show {pageSize}
+            </option>
+          ))}
+        </select>
+
+        <button onClick={() => gotoPage(0)} disabled={!canPreviousPage}>
+          {" "}
+          {"<<"}{" "}
+        </button>
+
+        <button
+          className="bg-blue-400 m-2 rounded text-white p-2"
+          onClick={() => previousPage()}
+          disabled={!canPreviousPage}
+        >
+          Previous
+        </button>
+        <button
+          className="bg-blue-400 m-2 rounded text-white p-2"
+          onClick={() => nextPage()}
+          disabled={!canNextPage}
+        >
+          Next
+        </button>
+
+        <button onClick={() => gotoPage(pageCount - 1)} disabled={!canNextPage}>
+          {" "}
+          {">>"}{" "}
+        </button>
+      </div>
+    </>
+  );
+};
+
+export default BasicTable;

src/components/ReactTable4/OrderLevel.js

@@ -0,0 +1,35 @@
+export function OrderLevel({ value }) {
+    return (
+      <div className="p-2 rounded-3xl border border-gray-300 w-fit">
+        {(() => {
+           switch(value) {
+            case 1:
+              return <div className="flex flex-row items-center justify-center ">
+                      <span className="w-2 h-2 rounded-full ml-2" style={{ backgroundColor: "#65FFAD" }}></span>
+                      <span style={{ color: "#00253A" }} className="">وضعیت عادی</span>
+                  </div>;
+            case 2:
+              return <div className="flex flex-row items-center justify-center ">
+                      <span className="w-2 h-2 rounded-full ml-2" style={{ backgroundColor: "#FF6565" }}></span>
+                      <span style={{ color: "#00253A" }} className="">اعلان سطح هشدار</span>
+                    </div>;
+            case 3:
+              return <div className="flex flex-row items-center justify-center ">
+                      <span className="w-2 h-2 rounded-full ml-2" style={{ backgroundColor: "#65DAFF" }}></span>
+                      <span style={{ color: "#00253A" }} className="">بررسی و پیگیری</span>
+                    </div>;
+            case 4:
+              return <div className="flex flex-row items-center justify-center ">
+                      <span className="w-2 h-2 rounded-full ml-2" style={{ backgroundColor: "#FFEA65" }}></span>
+                      <span style={{ color: "#00253A" }} className="">وضعیت بحرانی</span>
+                    </div>;
+            default:
+              return <div className="flex flex-row items-center justify-center ">
+                      <span className="w-2 h-2 rounded-full ml-2" style={{ backgroundColor: "#CCFF65" }}></span>
+                      <span style={{ color: "#00253A" }} className="">وضعیت پایدار</span>
+                    </div>;
+          }
+        })()}
+      </div>
+    );
+  }

src/components/ReactTable4/OrderStatus.js

@@ -0,0 +1,55 @@
+export function OrderStatus({ value }) {
+    return (
+      <div className="">
+        {(() => {
+          if (value === 1) {
+            return (
+              <span
+                style={{ backgroundColor: "#E2FFE377", color: "#00613D" }}
+                className="p-2 rounded"
+              >
+                ارسال شده
+              </span>
+            );
+          } else if (value === 2) {
+            return (
+              <span
+                style={{ backgroundColor: "#FFF78733", color: "#ECF150" }}
+                className="p-2 rounded"
+              >
+                رسیدگی
+              </span>
+            );
+          } else if (value === 3) {
+            return (
+              <span
+                style={{ backgroundColor: "#FFD8CC33", color: "#611100" }}
+                className="p-2 rounded"
+              >
+                لغو شده
+              </span>
+            );
+          } else if (value === 4) {
+            return (
+              <span
+                style={{ backgroundColor: "#E2FFFD33", color: "#00614A" }}
+                className="p-2 rounded"
+              >
+                پیگیری
+              </span>
+            );
+          } else {
+            return (
+              <span
+                style={{ backgroundColor: "#DBCCFF33", color: "#440061" }}
+                className="p-2 rounded"
+              >
+                خطری
+              </span>
+            );
+          }
+        })()}{" "}
+      </div>
+    );
+  }
+  

src/components/ReactTable4/arrow-icon.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15">
+  <g id="arrow-down" transform="translate(0)">
+    <path id="Vector" d="M9.9,0,5.825,4.075a1.241,1.241,0,0,1-1.75,0L0,0" transform="translate(2.55 5.594)" fill="none" stroke="rgba(0,37,58,0.32)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+    <path id="Vector-2" data-name="Vector" d="M0,0H15V15H0Z" transform="translate(15 15) rotate(180)" fill="none" opacity="0"/>
+  </g>
+</svg>

src/components/ReactTable4/blue-arrow.svg

@@ -0,0 +1,4 @@
+<svg id="arrow-down" xmlns="http://www.w3.org/2000/svg" width="16.237" height="16.237" viewBox="0 0 16.237 16.237">
+  <path id="Vector" d="M10.716,0,6.305,4.411a1.343,1.343,0,0,1-1.894,0L0,0" transform="translate(2.76 6.055)" fill="none" stroke="#65a9ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+  <path id="Vector-2" data-name="Vector" d="M0,0H16.237V16.237H0Z" transform="translate(16.237 16.237) rotate(180)" fill="none" opacity="0"/>
+</svg>

src/components/ReactTable4/columns.js

@@ -0,0 +1,64 @@
+import { format } from "date-fns";
+
+import Table, { SelectColumnFilter } from "./BasicTable"; // new
+
+import { ColumnFilter } from "./ColumnFilter";
+
+import { OrderStatus } from "./OrderStatus";
+import { OrderLevel } from "./OrderLevel";
+import { Buttons } from "./Buttons";
+import { EditButtons } from "./EditButtons";
+
+export const COLUMNS = [
+  {
+    Header: "نام و نام خانوادگی",
+    Footer: "نام و نام خانوادگی",
+    accessor: "name",
+    disableSortBy: true,
+  },
+  {
+    Header: "تاریخ سفارش",
+    Footer: "تاریخ سفارش",
+    accessor: "order-date",
+    Cell: ({ value }) => {
+      return format(new Date(value), "dd/MM/yyyy");
+    },
+  },
+  {
+    Header: "مبلغ سفارش",
+    Footer: "مبلغ سفارش",
+    accessor: "order-price",
+    Filter: ColumnFilter,
+  },
+  {
+    Header: "شماره سفارش",
+    Footer: "شماره سفارش",
+    accessor: "order-number",
+  },
+  {
+    Header: "شغل کاربر",
+    Footer: "شغل کاربر",
+    accessor: "user-job",
+  },
+  {
+    Header: "وضعیت سفارش",
+    Footer: "وضعیت سفارش",
+    accessor: "order-status",
+    Cell: OrderStatus,
+  },
+  {
+    Header: "سطح اهمیت",
+    Footer: "سطح اهمیت",
+    accessor: "order-level",
+    Cell: OrderLevel,
+    // Filter: SelectColumnFilter,
+    // new
+  },
+  {
+    Header: EditButtons,
+    Footer: "ویرایش",
+    accessor: "edit",
+    Cell: Buttons,
+    disableSortBy: true,
+  },
+];

src/components/ReactTable4/edit.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16.715" height="16.703" viewBox="0 0 16.715 16.703">
+  <g id="edit" transform="translate(-626.295 -252.999)">
+    <path id="Vector" d="M8.991,1.271l-7.88,7.88a2.712,2.712,0,0,0-.66,1.32l-.43,3.01a1.424,1.424,0,0,0,1.7,1.7l3.01-.43a2.8,2.8,0,0,0,1.32-.66l7.88-7.88c1.36-1.36,2-2.94,0-4.94S10.351-.089,8.991,1.271Z" transform="translate(627.049 253.749)" fill="none" stroke="#00253a" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+    <path id="Vector-2" data-name="Vector" d="M0,0A7.144,7.144,0,0,0,4.94,4.94" transform="translate(634.91 256.15)" fill="none" stroke="#00253a" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+  </g>
+</svg>

src/components/ReactTable4/filter.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="19.631" height="22.407" viewBox="0 0 19.631 22.407">
+  <path id="Vector" d="M2.105,0h13.92a2.107,2.107,0,0,1,2.105,2.105V4.428A3.933,3.933,0,0,1,17.078,6.86L13.613,9.924l-1.072.947A3.417,3.417,0,0,0,11.488,13.3v4.537a2.367,2.367,0,0,1-.944,1.8l-1.47.926a2.145,2.145,0,0,1-3.267-1.8v-5.59a3.962,3.962,0,0,0-.853-2.214L.944,6.733A3.43,3.43,0,0,1,0,4.628V2.214A2.133,2.133,0,0,1,2.105,0Z" transform="translate(0.75 0.75)" fill="none" stroke="#65a9ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+</svg>

src/components/ReactTable4/index.js

@@ -0,0 +1,158 @@
+import React, { useRef } from "react";
+import BasicTable from "./BasicTable";
+// import useDraggableScroll from "use-draggable-scroll";
+
+const ReactTable3 = ({ 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">
+            <span
+              className={`cursor-pointer text-xs hover:text-blue-900  ${
+                breadCrumb.active ? "text-blue-900" : "text-blue-400"
+              }`}
+            >
+              {breadCrumb.name}
+            </span>
+            {Number(index) !== breadCrumbs.length - 1 && (
+              <div
+                className={`mx-2 ${
+                  breadCrumb.active ? "text-blue-900" : "text-blue-400"
+                }`}
+              >
+                {" > "}
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+
+      <div className="my-7">
+        {/* page Title */}
+        <div className="flex flex-row items-center">
+          <div className="w-1 h-5 bg-blue-500 rounded ml-1"></div>
+          <h2 className="text-base text-blue-900">{title}</h2>
+        </div>
+        {/* page Title */}
+        <div className="flex flex-row items-center mt-4">
+          <div className="w-1 h-5 bg-gray-400 rounded ml-1"></div>
+          <h2 className="text-sm">{subTitle}</h2>
+        </div>
+      </div>
+      <Tabbar />
+      <BasicTable />
+    </div>
+  );
+};
+window.isDown = false;
+export default ReactTable3;
+function Tabbar({}) {
+  const ref = useRef(null);
+
+  // const { onMouseDown } = useDraggableScroll(ref);
+  const tabs = [
+    "تست۱",
+    "تست۱",
+    "تست۱",
+    "تست۱",
+    "تست۱",
+    "تست۱",
+    "تست۱",
+    "تست۱",
+    "تست۱",
+    "تست۱",
+    "تست۱",
+    "تست۱",
+    "تست۱",
+    "تست۱",
+    "تست۱",
+    "تست۱",
+    "تست۱",
+    "تست۱",
+    "تست۱",
+    "تست۱",
+    "تست۱",
+    "تست۱",
+    "تست۱",
+    "تست۱",
+    "تست۱",
+    "تست۱",
+    "تست۱",
+    "تست۱",
+    "تست۱",
+    "تست۱",
+    "تست۱",
+    "تست۱",
+    "تست۱",
+    "تست۱",
+  ];
+  return (
+    <ul
+      className="tabbar flex no-scrollbar border-b border-gray-200 dark:border-gray-700 overflow-x-scroll scrolling-touch"
+      onMouseDown={(e) => {
+        const slider = window.document.querySelector(".tabbar");
+        window.isDown = true;
+        window.startX = e.pageX - slider.offsetLeft;
+        window.scrollLeft = slider.scrollLeft;
+      }}
+      onMouseLeave={(e) => {
+        window.isDown = false;
+      }}
+      onMouseUp={(e) => {
+        window.isDown = false;
+      }}
+      onMouseMove={(e) => {
+        const slider = window.document.querySelector(".tabbar");
+        if (!window.isDown) return;
+        e.preventDefault();
+        const x = e.pageX - slider.offsetLeft;
+        const walk = (x - window.startX) * 1;
+        slider.scrollLeft = window.scrollLeft - walk;
+      }}
+    >
+      {tabs.map((el) => (
+        <li className="mr-2 ">
+          <span
+            onClick={(e) => {
+              if (window.isDown) return e.preventDefault();
+              ///do here
+            }}
+            aria-current="page"
+            className="inline-block py-4 px-4 text-sm font-medium text-center text-blue-600 bg-gray-100 rounded-t-lg active dark:bg-gray-800 dark:text-blue-500"
+          >
+            <span className="p-2">
+              {el} <span className="p-2">x</span>
+            </span>
+          </span>
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+ReactTable3.defaultProps = {
+  breadCrumbs: [
+    {
+      name: "صفحه اصلی",
+      active: false,
+    },
+    {
+      name: "آمار و گزارشات",
+      active: false,
+    },
+    {
+      name: "فروش محصولات",
+      active: false,
+    },
+    {
+      name: "سال 1400",
+      active: true,
+    },
+  ],
+
+  title: "میزان فروش محصولات",
+  subTitle: "اطلاعات جداول مشخصاتی کارکنان مجموعه ایران تایر",
+};

src/components/ReactTable4/index.scss

@@ -0,0 +1,16 @@
+.customeClass1 .customeClass2 input {
+  display: none !important;
+}
+.customeClass1 .customeClass2 span {
+  display: none !important;
+}
+.no-scrollbar {
+  -ms-overflow-style: none;  /* IE and Edge */
+  scrollbar-width: none;  /* Firefox */
+}
+.tabbar{
+  cursor: pointer;
+}
+.active2 ,.active2 li a{
+  cursor: move !important;
+}

src/components/ReactTable4/more2.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <g id="vuesax_linear_more" data-name="vuesax/linear/more" transform="translate(-188 580) rotate(-90)">
+    <g id="more">
+      <path id="Vector" d="M2,0A2,2,0,1,0,4,2,2.006,2.006,0,0,0,2,0Z" transform="translate(559 198)" fill="#6397b5"/>
+      <path id="Vector-2" data-name="Vector" d="M2,0A2,2,0,1,0,4,2,2.006,2.006,0,0,0,2,0Z" transform="translate(573 198)" fill="#6397b5"/>
+      <path id="Vector-3" data-name="Vector" d="M2,0A2,2,0,1,0,4,2,2.006,2.006,0,0,0,2,0Z" transform="translate(566 198)" fill="#6397b5"/>
+      <path id="Vector-4" data-name="Vector" d="M0,0H24V24H0Z" transform="translate(556 188)" fill="#6397b5" opacity="0"/>
+    </g>
+  </g>
+</svg>

src/components/ReactTable4/plus.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="11.72" height="11.72" viewBox="0 0 11.72 11.72">
+  <g id="Group_1916" data-name="Group 1916" transform="translate(-34.5 -316.547)">
+    <path id="Vector" d="M0,0H9.72" transform="translate(35.5 322.407)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+    <path id="Vector-2" data-name="Vector" d="M0,9.72V0" transform="translate(40.36 317.547)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+  </g>
+</svg>

src/components/ReactTable4/search-normal.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <g id="search-normal" transform="translate(-428 -188)">
+    <g id="Vector" transform="translate(430 190)" fill="none">
+      <path d="M19,9.5A9.5,9.5,0,1,1,9.5,0,9.5,9.5,0,0,1,19,9.5Z" stroke="none"/>
+      <path d="M 9.5 1.5 C 5.088789939880371 1.5 1.5 5.088789939880371 1.5 9.5 C 1.5 13.91121006011963 5.088789939880371 17.5 9.5 17.5 C 13.91121006011963 17.5 17.5 13.91121006011963 17.5 9.5 C 17.5 5.088789939880371 13.91121006011963 1.5 9.5 1.5 M 9.5 0 C 14.74670028686523 0 19 4.253290176391602 19 9.5 C 19 14.74670028686523 14.74670028686523 19 9.5 19 C 4.253290176391602 19 0 14.74670028686523 0 9.5 C 0 4.253290176391602 4.253290176391602 0 9.5 0 Z" stroke="none" fill="#65a9ff"/>
+    </g>
+    <path id="Vector-2" data-name="Vector" d="M2.552,3.252a.7.7,0,0,1-.49-.2L.2,1.192A.706.706,0,0,1,.2.2a.706.706,0,0,1,.99,0l1.86,1.86a.706.706,0,0,1,0,.99A.738.738,0,0,1,2.552,3.252Z" transform="translate(446.747 206.747)" fill="#65a9ff"/>
+    <path id="Vector-3" data-name="Vector" d="M0,0H24V24H0Z" transform="translate(452 212) rotate(180)" fill="none" opacity="0"/>
+  </g>
+</svg>