update

src/components/ReactTable4/BasicTable.js

@@ -2,6 +2,7 @@ import React, { useMemo, useState } from "react";
 
 import "./index.scss";
 import { ColumnSearch } from "./ColumnSearch.js";
+import { ToggleColumns } from "./ToggleColumns.js";
 import { Tabbar } from "./index";
 
 import {
@@ -29,9 +30,6 @@ const BasicTable = ({ settingsIcon }) => {
   const columns = React.useMemo(() => COLUMNS, []);
   const data = useMemo(() => MOCK_DATA, []);
 
-  //selected row
-  // const [selectedFilterRow, setSelectedFilterRow] = useState(null);
-
   const defaultColumn = useMemo(() => {
     return {
       Filter: ColumnSearch,
@@ -95,42 +93,14 @@ const BasicTable = ({ settingsIcon }) => {
     }
   );
 
-  // const changeOrder = () => {
-  //   setColumnOrder([
-  //     "name",
-  //     "order-number",
-  //     "user-job",
-  //     "order-level",
-  //     "order-status",
-  //     "order-price",
-  //   ]);
-  // };
-
   const { globalFilter, pageIndex, pageSize } = state;
   return (
     <>
-      {/* <button
-        className="bg-orange-600"
-        onClick={() => setSelectedFilterRow(!selectedFilterRow)}
-      >
-        click me
-      </button> */}
       {/* toggle columns */}
-      {/* <div>
+      <ToggleColumns
-        <div>
+        allColumns={allColumns}
-          <Checkbox {...getToggleHideAllColumnsProps()} /> Toggle All
+        getToggleHideAllColumnsProps={getToggleHideAllColumnsProps}
-        </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> */}
       <div className="flex flex-row items-center justify-between">
         {/* right box */}
         <div className="" style={{ width: "70%" }}>
@@ -280,13 +250,6 @@ const BasicTable = ({ settingsIcon }) => {
         </code>
       </pre>
       <div className="mt-3 ">
-        {/* <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">
@@ -306,7 +269,6 @@ const BasicTable = ({ settingsIcon }) => {
           </strong>
           {""}
         </span>
-
         <select
           className="text-white text-sm rounded cursor-pointer"
           style={{
@@ -603,6 +565,7 @@ function renderRowSubComponent({ row }) {
     </div>
   );
 }
+
 export default BasicTable;
 
 BasicTable.defaultProps = {

src/components/ReactTable4/ToggleColumns.js

@@ -0,0 +1,21 @@
+import React from "react";
+
+export const ToggleColumns = ({ allColumns, getToggleHideAllColumnsProps }) => {
+  return (
+    <div>
+      <div>
+        <input type="checkbox" {...getToggleHideAllColumnsProps()} /> Toggle All
+      </div>
+      {allColumns.map((column) => (
+        <div key={column.id}>
+          <label>
+            <input type="checkbox" {...column.getToggleHiddenProps()} />
+            {column.Header}
+          </label>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default ToggleColumns;

src/components/ReactTable4/index.js

@@ -6,7 +6,7 @@ import cancleIcon from "./zarbedar-icon.svg";
 
 const ReactTable4 = ({ breadCrumbs, subTitle, title }) => {
   return (
-    <div className="my-10  w-11/12 mx-auto">
+    <div className="my-10 w-11/12 mx-auto">
       {/* breadCrumb */}
       <div className="flex flex-row items-center">
         {breadCrumbs.map((breadCrumb, index) => (
@@ -54,42 +54,7 @@ export function Tabbar({}) {
   const ref = useRef(null);
 
   // const { onMouseDown } = useDraggableScroll(ref);
-  const tabs = [
+  const tabs = ["فروشگاه دانوین", "مهدی عندلیب"];
-    "تست۱",
-    "تست۱",
-    "تست۱",
-    "تست۱",
-    "تست۱",
-    "تست۱",
-    "تست۱",
-    "تست۱",
-    "تست۱",
-    "تست۱",
-    "تست۱",
-    "تست۱",
-    "تست۱",
-    "تست۱",
-    "تست۱",
-    "تست۱",
-    "تست۱",
-    "تست۱",
-    "تست۱",
-    "تست۱",
-    "تست۱",
-    "تست۱",
-    "تست۱",
-    "تست۱",
-    "تست۱",
-    "تست۱",
-    "تست۱",
-    "تست۱",
-    "تست۱",
-    "تست۱",
-    "تست۱",
-    "تست۱",
-    "تست۱",
-    "تست۱",
-  ];
   return (
     <ul
       className="tabbar flex no-scrollbar overflow-x-scroll scrolling-touch"
@@ -120,11 +85,11 @@ export function Tabbar({}) {
             if (window.isDown) return e.preventDefault();
           }}
           aria-current="page"
-          className="flex flex-row items-center text-sm text-center active px-2 py-1 rounded-sm mx-1"
+          className="flex flex-row items-center text-sm text-center active px-4 py-4 rounded-sm mx-1"
           style={{ backgroundColor: "#F1F6FF" }}
         >
           <span className="">{el}</span>
-          <img src={cancleIcon} className="w-2 h-2 mx-2" />
+          <img src={cancleIcon} className="w-2 h-2 mr-2" />
         </li>
       ))}
     </ul>