update

src/components/ReactTable4/BasicTable.js

@@ -12,6 +12,7 @@ import { ToggleColumns } from "./ToggleColumns";
 import { COLUMNS } from "./COLUMNS";
 import { Pagination } from "./Pagination";
 import { GoToPage } from "./GoToPage";
+import ShowMoreRows from "./ShowMoreRows";
 import { Settings } from "./Settings";
 import { Checkbox } from "./Checkbox";
 
@@ -115,11 +116,6 @@ const BasicTable = ({
 
   return (
     <>
-      {/* toggle columns */}
-      {/* <ToggleColumns
-        allColumns={allColumns}
-        getToggleHideAllColumnsProps={getToggleHideAllColumnsProps}
-      /> */}
       <div className="flex flex-row items-center justify-between">
         {/* right box */}
         <div className="flex-1">
@@ -179,7 +175,7 @@ const BasicTable = ({
         <>
           <table
             {...getTableProps()}
-            className="min-w-full divide-y divide-gray-200"
+            className="min-w-full divide-y divide-gray-200 mb-5"
           >
             <thead className="" style={{ backgroundColor: "#F3F8FF" }}>
               {headerGroups.map((headerGroup, index) => (
@@ -288,50 +284,13 @@ const BasicTable = ({
               ))}
             </tfoot>
           </table>
-          <div className="mt-3 ">
-            <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
-              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>
+          {/* bottom table */}
+          <GoToPage
+            pageIndex={pageIndex}
+            gotoPage={gotoPage}
+            pageOptions={pageOptions}
+          />
+          <ShowMoreRows pageSize={pageSize} setPageSize={setPageSize} />
         </>
       ) : (
         <EditRow

src/components/ReactTable4/Settings.js

@@ -24,10 +24,9 @@ export const Settings = ({ allColumns, getToggleHideAllColumnsProps }) => {
         onClick={() => setOpenModal(false)}
       >
         <div
-          className="absolute bg-white w-8/12 p-4 rounded"
+          className="absolute bg-white w-6/12 p-4 rounded"
           style={{ top: "10%" }}
           onClick={(e) => e.stopPropagation()}
-          onClick={() => setOpenModal(false)}
         >
           <ToggleColumns
             allColumns={allColumns}

src/components/ReactTable4/ShowMoreRows.js

@@ -0,0 +1,31 @@
+import React from "react";
+
+const ShowMoreRows = ({ pageSize, setPageSize }) => {
+  return (
+    <select
+      className="text-white text-sm rounded cursor-pointer mr-2"
+      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-xs"
+          style={{
+            direction: "ltr",
+            textAlign: "right",
+          }}
+        >
+          نمایش {pageSize}
+        </option>
+      ))}
+    </select>
+  );
+};
+
+export default ShowMoreRows;

src/components/ReactTable4/ToggleColumns.js

@@ -25,7 +25,7 @@ export const ToggleColumns = ({ allColumns, getToggleHideAllColumnsProps }) => {
               className="ml-2 "
               {...column.getToggleHiddenProps()}
             />
-            {column.Header}
+            {column.Footer}
           </label>
         </div>
       ))}

src/components/ReactTable4/columns.js

@@ -11,13 +11,13 @@ import { SliderColumnFilter } from "./SliderColumnFilter.js";
 export const COLUMNS = ({ setFiltering, filtering, addTab }) => [
   {
     Header: "نام و نام خانوادگی",
-    Footer: "نام و نام خانوادگی",
+    Footer: "ستون نام و نام خانوادگی",
     accessor: "name",
     disableSortBy: true,
   },
   {
     Header: "تاریخ سفارش",
-    Footer: "تاریخ سفارش",
+    Footer: "ستون تاریخ سفارش",
     accessor: "order_date",
     Filter: SliderColumnFilter,
     Cell: ({ value }) => {
@@ -26,37 +26,37 @@ export const COLUMNS = ({ setFiltering, filtering, addTab }) => [
   },
   {
     Header: "مبلغ سفارش",
-    Footer: "مبلغ سفارش",
+    Footer: "ستون مبلغ سفارش",
     accessor: "order_price",
     Filter: SliderColumnFilter,
   },
   {
     Header: "شماره سفارش",
-    Footer: "شماره سفارش",
+    Footer: "ستون شماره سفارش",
     accessor: "order_number",
   },
   {
     Header: "شغل کاربر",
-    Footer: "شغل کاربر",
+    Footer: "ستون شغل کاربر",
     accessor: "user_job",
   },
   {
     Header: "وضعیت سفارش",
-    Footer: "وضعیت سفارش",
+    Footer: "ستون وضعیت سفارش",
     accessor: "order_status",
     Cell: OrderStatus,
     Filter: SelectColumnFilter2,
   },
   {
     Header: "سطح اهمیت",
-    Footer: "سطح اهمیت",
+    Footer: "ستون سطح اهمیت",
     accessor: "order_level",
     Cell: OrderLevel,
     Filter: SelectColumnFilter,
   },
   {
     Header: () => EditButtons({ setFiltering, filtering, addTab }),
-    Footer: "ویرایش",
+    Footer: "ستون ویرایش",
     accessor: "edit",
     Cell: ({ row }) => Buttons({ row, addTab }),
     disableSortBy: true,