edited version

src/components/ReactTable4/BasicTable.js

@@ -19,6 +19,10 @@ import { GlobalFilter } from "./GlobalFilter";
 import { Checkbox } from "./Checkbox";
 import MOCK_DATA from "./MOCK_DATA.json";
 
+import dobleLeftArrow from "./double-left-arrow.svg";
+import leftArrow from "./left-arrow.svg";
+import rightArrow from "./right-arrow.svg";
+
 // This is a custom filter UI for selecting
 // a unique option from a list
 export function SelectColumnFilter({
@@ -146,7 +150,8 @@ const BasicTable = () => {
   // const firstPageRows = rows.slice(0, 10);
   return (
     <>
-      <div className="customeClass1">
+      {/* filter */}
+      {/* <div className="customeClass1">
         {headerGroups.map((headerGroup) =>
           headerGroup.headers.map((column) =>
             column.Filter ? (
@@ -156,71 +161,7 @@ const BasicTable = () => {
             ) : null
           )
         )}
-      </div>
+      </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>
@@ -238,6 +179,75 @@ const BasicTable = () => {
       </div> */}
       {/* Change Column Order */}
       {/* <button onClick={changeOrder}> Change Column Order </button> */}
+      <div className="flex flex-row items-center justify-end mb-3 mx-4">
+        {/*  search box */}
+        <div
+          className="rounded-md py-2 px-4 flex flex-row flex-items-center"
+          style={{ backgroundColor: "#F1F6FF" }}
+        >
+          {/* <GlobalFilter filter={globalFilter} setFilter={setGlobalFilter} /> */}
+          {/* pagination */}
+          <div className="flex flex-row flex-items-center bg-white p-1">
+            {/* 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 font-bold"
+              style={{ backgroundColor: "#F5F9FF", color: "#65A9FF" }}
+              onClick={() => gotoPage(0)}
+              disabled={!canPreviousPage}
+            >
+              <img src={dobleLeftArrow} />
+            </button>
+            <button
+              className="rounded py-1 px-2 mx-1 text-xs font-bold"
+              style={{ backgroundColor: "#F5F9FF", color: "#65A9FF" }}
+              onClick={() => previousPage()}
+              disabled={!canPreviousPage}
+            >
+              {"<"}
+            </button>
+            <button
+              className="rounded py-1 px-2 mx-1 text-xs font-bold"
+              style={{ backgroundColor: "#F5F9FF", color: "#65A9FF" }}
+              onClick={() => nextPage()}
+              disabled={!canNextPage}
+            >
+              {">"}
+            </button>
+            <button
+              className="rounded py-1 px-2 mx-1 text-xs font-bold"
+              style={{ backgroundColor: "#F5F9FF", color: "#65A9FF" }}
+              onClick={() => gotoPage(pageCount - 1)}
+              disabled={!canNextPage}
+            >
+              {">>"}
+            </button>
+            {/* dobleLeftArrow
+leftArrow
+import rightArrow from "./right-arrow.svg"; */}
+          </div>
+        </div>
+      </div>
       <table
         {...getTableProps()}
         className="min-w-full divide-y divide-gray-200"
@@ -334,12 +344,31 @@ const BasicTable = () => {
       </pre>
 
       <div className="mt-3 ">
-        <span className="text-sm ml-4">
+        {/* <span className="text-sm ml-4">
           صفحه{" "}
           <strong className="text-indigo-500">
             {pageIndex + 1} از {pageOptions.length}
           </strong>
           {""}
+        </span> */}
+        <span className="text-sm ml-4">
+          صفحه{" "}
+          <strong className="text-indigo-500">
+            <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" }}
+            />{" "}
+            از {pageOptions.length}
+          </strong>
+          {""}
         </span>
 
         <select

src/components/ReactTable4/EditButtons.js

@@ -10,10 +10,7 @@ export function EditButtons({ buttons }) {
     <div className="flex flex-row items-center justify-end">
       {buttons.map((button, index) => (
         <div>
-          <button
+          <div
-            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} ${
@@ -36,22 +33,6 @@ export function EditButtons({ buttons }) {
                 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>
       ))}
@@ -98,18 +79,6 @@ EditButtons.defaultProps = {
         {
           title: "دراپ داون 1",
         },
-        {
-          title: "دراپ داون 2",
-        },
-        {
-          title: "دراپ داون 3",
-        },
-        {
-          title: "دراپ داون 4",
-        },
-        {
-          title: "دراپ داون 5",
-        },
       ],
     },
   ],

src/components/ReactTable4/double-left-arrow.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="15.988" height="11.988" viewBox="0 0 15.988 11.988">
+  <g id="vuesax_linear_arrow-right" data-name="vuesax/linear/arrow-right" transform="translate(15.988 11.988) rotate(180)">
+    <g id="arrow-right" transform="translate(4)">
+      <path id="Vector" d="M0,7.912,3.257,4.655a.992.992,0,0,0,0-1.4L0,0" transform="translate(4.451 2.038)" fill="none" stroke="#65a9ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+      <path id="Vector-2" data-name="Vector" d="M0,0H11.988V11.988H0Z" transform="translate(11.988 11.988) rotate(180)" fill="none" opacity="0"/>
+    </g>
+    <g id="arrow-right-2" data-name="arrow-right">
+      <path id="Vector-3" data-name="Vector" d="M0,7.912,3.257,4.655a.992.992,0,0,0,0-1.4L0,0" transform="translate(4.451 2.038)" fill="none" stroke="#65a9ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+      <path id="Vector-4" data-name="Vector" d="M0,0H11.988V11.988H0Z" transform="translate(11.988 11.988) rotate(180)" fill="none" opacity="0"/>
+    </g>
+  </g>
+</svg>

src/components/ReactTable4/index.js

@@ -42,7 +42,7 @@ const ReactTable3 = ({ breadCrumbs, subTitle, title }) => {
           <h2 className="text-sm">{subTitle}</h2>
         </div>
       </div>
-      <Tabbar />
+      {/* <Tabbar /> */}
       <BasicTable />
     </div>
   );

src/components/ReactTable4/left-arrow.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="11.988" height="11.988" viewBox="0 0 11.988 11.988">
+  <g id="vuesax_linear_arrow-right" data-name="vuesax/linear/arrow-right" transform="translate(11.988 11.988) rotate(180)">
+    <g id="arrow-right">
+      <path id="Vector" d="M0,7.912,3.257,4.655a.992.992,0,0,0,0-1.4L0,0" transform="translate(4.451 2.038)" fill="none" stroke="#65a9ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+      <path id="Vector-2" data-name="Vector" d="M0,0H11.988V11.988H0Z" transform="translate(11.988 11.988) rotate(180)" fill="none" opacity="0"/>
+    </g>
+  </g>
+</svg>

src/components/ReactTable4/right-arrow.svg

@@ -0,0 +1,6 @@
+<svg id="vuesax_linear_arrow-right" data-name="vuesax/linear/arrow-right" xmlns="http://www.w3.org/2000/svg" width="11.988" height="11.988" viewBox="0 0 11.988 11.988">
+  <g id="arrow-right">
+    <path id="Vector" d="M0,7.912,3.257,4.655a.992.992,0,0,0,0-1.4L0,0" transform="translate(4.451 2.038)" fill="none" stroke="#65a9ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+    <path id="Vector-2" data-name="Vector" d="M0,0H11.988V11.988H0Z" transform="translate(11.988 11.988) rotate(180)" fill="none" opacity="0"/>
+  </g>
+</svg>

src/components/Sidebar/SidebarDesign2/index.js

@@ -69,7 +69,11 @@ const SidebarMenu = ({ items, buttons, username, userJob }) => {
                     className={`flex flex-row flex-1 items-center cursor-pointer hover:bg-blue-100 rounded-md p-2 transition duration-300
                       ${activeDropdown === menuItem ? "bg-blue-100" : ""}
                     `}
-                    onClick={() => setActiveDropdown(activeDropdown === menuItem ? null  : menuItem)}
+                    onClick={() =>
+                      setActiveDropdown(
+                        activeDropdown === menuItem ? null : menuItem
+                      )
+                    }
                   >
                     <img src={menuItem.icon} alt="" className="w-7 h-7" />
                     <p className="text-blue-800 text-sm flex-1 mx-2">
@@ -117,7 +121,7 @@ const SidebarMenu = ({ items, buttons, username, userJob }) => {
                         -
                       </div>
                       <div
-                        className="flex flex-row items-center justify-between flex-1 hover:bg-indigo-300 p-1 rounded cursor-pointer transition duration-300 ease-linear"
+                        className="flex  flex-row items-center justify-between flex-1 hover:bg-indigo-300 p-1 rounded cursor-pointer transition duration-300 ease-linear"
                         onClick={() => setActiveDropdown(menuSubItem)}
                       >
                         <p className="text-xs transition duration-300">
@@ -137,8 +141,8 @@ const SidebarMenu = ({ items, buttons, username, userJob }) => {
                   ))}
               </div>
             ))}
-            { Number(i) !== items.length -1 && (
+            {Number(i) !== items.length - 1 && (
-                <div className="border border-gray-100 my-2"></div>
+              <div className="border border-gray-100 my-2"></div>
             )}
           </div>
         ))}