pagination component added

src/components/ReactTable4/BasicTable.js

@@ -16,12 +16,12 @@ import {
 
 import { COLUMNS } from "./columns";
 import { GlobalFilter } from "./GlobalFilter";
+import { Pagination } from "./Pagination";
+import { GoToPage } from "./GoToPage";
 import { Checkbox } from "./Checkbox";
 import MOCK_DATA from "./MOCK_DATA.json";
 
-import dobleLeftArrow from "./double-left-arrow.svg";
+import settings from "./settings.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
@@ -74,7 +74,7 @@ export function SelectColumnFilter({
   );
 }
 
-const BasicTable = () => {
+const BasicTable = ({ settingsIcon }) => {
   const columns = React.useMemo(() => COLUMNS, []);
   const data = useMemo(() => MOCK_DATA, []);
 
@@ -162,7 +162,6 @@ const BasicTable = () => {
           )
         )}
       </div> */}
-      {/*  */}
       {/* toggle columns */}
       {/* <div>
         <div>
@@ -179,73 +178,51 @@ 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">
+      <div className="flex flex-row items-center justify-end">
-        {/*  search box */}
+        {/* left box */}
         <div
-          className="rounded-md py-2 px-4 flex flex-row flex-items-center"
+          className="rounded-md p-2 flex flex-row flex-items-center"
           style={{ backgroundColor: "#F1F6FF" }}
         >
-          {/* <GlobalFilter filter={globalFilter} setFilter={setGlobalFilter} /> */}
+          {/* search box */}
+          <GlobalFilter filter={globalFilter} setFilter={setGlobalFilter} />
           {/* pagination */}
-          <div className="flex flex-row flex-items-center bg-white p-1">
+          <div
+            className="flex flex-row flex-items-center p-1 rounded"
+            style={{ backgroundColor: "#F9FBFF" }}
+          >
             {/* go to page */}
             <div>
-              <input
+              <GoToPage
-                className="ml-1 text-xs p-1 rounded border-blue-400"
+                pageIndex={pageIndex}
-                type="number"
+                gotoPage={gotoPage}
-                defaultValue={pageIndex + 1}
+                pageOptions={pageOptions}
-                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>
-            {/*  */}
+            {/* vertical line */}
-            <div className={`bg-gray-400 w-0.5 my-2 mx-1`}></div>
+            <div
+              className={`w-0.5 my-1 mx-2`}
+              style={{ backgroundColor: "#65A9FF" }}
+            ></div>
             {/* arrows */}
-            <button
+            <Pagination
-              className="rounded py-1 px-2 mx-1 text-xs font-bold"
+              gotoPage={gotoPage}
-              style={{ backgroundColor: "#F5F9FF", color: "#65A9FF" }}
+              canPreviousPage={canPreviousPage}
-              onClick={() => gotoPage(0)}
+              previousPage={previousPage}
-              disabled={!canPreviousPage}
+              canNextPage={canNextPage}
-            >
+              pageCount={pageCount}
-              <img src={dobleLeftArrow} />
+              nextPage={nextPage}
-            </button>
+            />
-            <button
+          </div>
-              className="rounded py-1 px-2 mx-1 text-xs font-bold"
+          {/* settings icon */}
-              style={{ backgroundColor: "#F5F9FF", color: "#65A9FF" }}
+          {settingsIcon && (
-              onClick={() => previousPage()}
+            <div
-              disabled={!canPreviousPage}
+              style={{ backgroundColor: "#F9FBFF" }}
-            >
+              className="mr-2 flex flex-col items-center justify-center p-1 rounded"
-              {"<"}
-            </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}
             >
-              {">>"}
+              <img src={settings} className="w-5 h-5 cursor-pointer" />
-            </button>
-            {/* dobleLeftArrow
-leftArrow
-import rightArrow from "./right-arrow.svg"; */}
             </div>
+          )}
         </div>
       </div>
       <table
@@ -408,3 +385,7 @@ function renderRowSubComponent({ row }) {
   );
 }
 export default BasicTable;
+
+BasicTable.defaultProps = {
+  settingsIcon: false,
+};

src/components/ReactTable4/GlobalFilter.js

@@ -13,6 +13,12 @@ export const GlobalFilter = ({ filter, setFilter }) => {
   }, 400);
 
   return (
+    <div className="flex flex-row-reverse items-center relative ml-2">
+      <img
+        src={search}
+        alt=""
+        className="w-4 h-4 absolute left-2 cursor-pointer"
+      />
       <input
         value={value || ""}
         onChange={(e) => {
@@ -20,8 +26,25 @@ export const GlobalFilter = ({ filter, setFilter }) => {
           onChange(e.target.value);
         }}
         type="text"
-      placeholder="نام کالا را جستجو کنید..."
+        // 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"
+        className="text-xs text-blue-400 rounded focus:outline-none placeholder-blue-400 border"
+        style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
       />
+    </div>
   );
 };
+
+{
+  /* <div className="flex flex-row-reverse items-center relative w-full">
+              <img
+                src={lightGraySearchIcon}
+                alt=""
+                className="w-4 h-4 absolute left-3"
+              />
+              <input
+                type="text"
+                placeholder="نام کالا را جستجو کنید..."
+                className="text-xs rounded-lg pr-4 pl-10 py-2 w-full border border-gray-400 font-light text-lightGrayTextColor	placeholder-gray-400 focus:outline-none"
+              />
+            </div> */
+}

src/components/ReactTable4/GoToPage.js

@@ -0,0 +1,20 @@
+import React from "react";
+
+export const GoToPage = ({ pageIndex, gotoPage, pageOptions }) => {
+  return (
+    <span className="text-xs text-blue-400">
+      صفحه{" "}
+      <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}
+    </span>
+  );
+};

src/components/ReactTable4/MOCK_DATA.json

@@ -10,7 +10,7 @@
     "history": "مهدی"
   },
   {
-    "name": "mahdimahdi",
+    "name": "مهدی",
     "order-date": "1399/09/27",
     "order-price": 27,
     "order-number": "09120023100",

src/components/ReactTable4/Pagination.js

@@ -0,0 +1,50 @@
+import React from "react";
+import dobleLeftArrow from "./double-left-arrow.svg";
+import leftArrow from "./left-arrow.svg";
+import rightArrow from "./right-arrow.svg";
+
+export const Pagination = ({
+  gotoPage,
+  canPreviousPage,
+  previousPage,
+  canNextPage,
+  pageCount,
+  nextPage,
+}) => {
+  return (
+    <div className="flex flex-row items-center">
+      <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} className="rotate-180 w-4 h-4" />
+      </button>
+      <button
+        className="rounded py-1 px-2 mx-1 text-xs font-bold"
+        style={{ backgroundColor: "#F5F9FF", color: "#65A9FF" }}
+        onClick={() => previousPage()}
+        disabled={!canPreviousPage}
+      >
+        <img src={rightArrow} className="w-3 h-3" />
+      </button>
+      <button
+        className="rounded py-1 px-2 mx-1 text-xs font-bold"
+        style={{ backgroundColor: "#F5F9FF", color: "#65A9FF" }}
+        onClick={() => nextPage()}
+        disabled={!canNextPage}
+      >
+        <img src={leftArrow} className="w-3 h-3" />
+      </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}
+      >
+        <img src={dobleLeftArrow} className="w-4 h-4" />
+      </button>
+    </div>
+  );
+};