update

src/components/ReactTable4/BasicTable.js

@@ -1,9 +1,19 @@
 import React, { useMemo, useState } from "react";
 
 import "./index.scss";
-import { ColumnSearch } from "./ColumnSearch.js";
-import { ToggleColumns } from "./ToggleColumns.js";
+
 import { Tabbar } from "./index";
+import MOCK_DATA from "./MOCK_DATA.json";
+
+import { ColumnSearch } from "./ColumnSearch";
+import { GlobalFilter } from "./GlobalFilter";
+
+import { ToggleColumns } from "./ToggleColumns";
+import { COLUMNS } from "./columns";
+import { Pagination } from "./Pagination";
+import { GoToPage } from "./GoToPage";
+import { Settings } from "./Settings";
+import { Checkbox } from "./Checkbox";
 
 import {
   useTable,
@@ -16,16 +26,6 @@ import {
   useExpanded,
 } from "react-table";
 
-import { COLUMNS } from "./columns";
-import { GlobalFilter } from "./GlobalFilter";
-
-import { Pagination } from "./Pagination";
-import { GoToPage } from "./GoToPage";
-import { Settings } from "./Settings";
-
-import { Checkbox } from "./Checkbox";
-import MOCK_DATA from "./MOCK_DATA.json";
-
 const BasicTable = ({
   settingsIcon,
   addTab,
@@ -114,7 +114,7 @@ const BasicTable = ({
       />
       <div className="flex flex-row items-center justify-between">
         {/* right box */}
-        <div className="" style={{ width: "70%" }}>
+        <div className="flex-1">
           <Tabbar
             tabs={tabs}
             delTab={delTab}
@@ -125,7 +125,7 @@ const BasicTable = ({
         {/* left box */}
         {activeTab == 0 ? (
           <div
-            className="rounded-md p-2 flex flex-row items-center justify-end"
+            className="p-2 flex flex-row items-center justify-end rounded-tl rounded-tr"
             style={{ backgroundColor: "#F1F6FF" }}
           >
             {/* search box */}
@@ -192,7 +192,7 @@ const BasicTable = ({
             </thead>
             {/* filter row */}
             {filtering && (
-              <thead style={{ backgroundColor: "#FAFBFF" }}>
+              <thead style={{ backgroundColor: "##F1F5FE" }}>
                 {headerGroups.map((headerGroup, index) => (
                   <tr key={index} {...headerGroup.getHeaderGroupProps()}>
                     {headerGroup.headers.map((column) => (
@@ -621,7 +621,7 @@ function RenderRowSubComponent({ row, columns }) {
   return (
     <div
       className="w-full flex flex-row items-center border-r-4 border-blue-600 p-2"
-      style={{ backgroundColor: "#FAFBFF" }}
+      style={{ backgroundColor: "#FBFCFE" }}
     >
       {/* right */}
       <div

src/components/ReactTable4/MOCK_DATA.json

@@ -93,5 +93,100 @@
     "uni": "تهران",
     "address": "خیابان  شریعتی نرسیده به خیابان دولت کوچه عباسی نبش تهیه غذای فارسی پلاک 4 واحد 3",
     "behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق"
+  },
+  {
+    "id": 6,
+    "name": "خسرو سهرابی",
+    "order_date": "1400/11/09",
+    "order_price": 1,
+    "order_number": "09120023100",
+    "user_job": "مهندس ساختمان",
+    "order_status": 1,
+    "order_level": 1,
+    "birth_place": "استان تهران شهر تهران",
+    "office_phone": "02144407010",
+    "education": "کارشناسی",
+    "job": "فروشنده لوازم خانگی",
+    "field_study": "مدیریت صنعتی",
+    "birth_day": "1368/09/02",
+    "uni": "تهران",
+    "address": "خیابان  شریعتی نرسیده به خیابان دولت کوچه عباسی نبش تهیه غذای فارسی پلاک 4 واحد 3",
+    "behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق"
+  },
+  {
+    "id": 7,
+    "name": "خسرو شکیبایی",
+    "order_date": "1340/04/13",
+    "order_price": 2,
+    "order_number": "09390646589",
+    "user_job": "بازیگر",
+    "order_status": 2,
+    "order_level": 2,
+    "birth_place": "استان تهران شهر تهران",
+    "office_phone": "02144407010",
+    "education": "کارشناسی",
+    "job": "فروشنده لوازم خانگی",
+    "field_study": "مدیریت صنعتی",
+    "birth_day": "1368/09/02",
+    "uni": "تهران",
+    "address": "خیابان  شریعتی نرسیده به خیابان دولت کوچه عباسی نبش تهیه غذای فارسی پلاک 4 واحد 3",
+    "behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق"
+  },
+  {
+    "id": 8,
+    "name": "علی علوی",
+    "order_date": "1330/12/05",
+    "order_price": 3,
+    "order_number": "09120403285",
+    "user_job": "تاجر",
+    "order_status": 3,
+    "order_level": 3,
+    "birth_place": "استان تهران شهر تهران",
+    "office_phone": "02144407010",
+    "education": "کارشناسی",
+    "job": "فروشنده لوازم خانگی",
+    "field_study": "مدیریت صنعتی",
+    "birth_day": "1368/09/02",
+    "uni": "تهران",
+    "address": "خیابان  شریعتی نرسیده به خیابان دولت کوچه عباسی نبش تهیه غذای فارسی پلاک 4 واحد 3",
+    "behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق"
+  },
+  {
+    "id": 9,
+    "name": "پارسا ایرانی",
+    "order_date": "1372/01/08",
+    "order_price": 4,
+    "order_number": "09120336508",
+    "user_job": "حسابدار",
+    "order_status": 4,
+    "order_level": 4,
+    "birth_place": "استان تهران شهر تهران",
+    "office_phone": "02144407010",
+    "education": "کارشناسی",
+    "job": "فروشنده لوازم خانگی",
+    "field_study": "مدیریت صنعتی",
+    "birth_day": "1368/09/02",
+    "uni": "تهران",
+    "address": "خیابان  شریعتی نرسیده به خیابان دولت کوچه عباسی نبش تهیه غذای فارسی پلاک 4 واحد 3",
+    "behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق"
+  },
+  {
+    "id": 10,
+    "name": "محمد محمدی",
+    "order_date": "1389/01/26",
+    "order_price": 5,
+    "order_number": "0913698574",
+    "user_job": "دکتر",
+    "order_status": 5,
+    "order_level": 5,
+    "birth_place": "استان تهران شهر تهران",
+    "office_phone": "02144407010",
+    "education": "کارشناسی",
+    "job": "فروشنده لوازم خانگی",
+    "field_study": "مدیریت صنعتی",
+    "birth_day": "1368/09/02",
+    "uni": "تهران",
+    "address": "خیابان  شریعتی نرسیده به خیابان دولت کوچه عباسی نبش تهیه غذای فارسی پلاک 4 واحد 3",
+    "behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق"
   }
 ]

src/components/ReactTable4/index.js

@@ -1,6 +1,6 @@
 import React, { useRef, useState } from "react";
+
 import BasicTable from "./BasicTable";
-// import useDraggableScroll from "use-draggable-scroll";
 
 import cancleIcon from "./zarbedar-icon.svg";
 
@@ -8,9 +8,12 @@ const ReactTable4 = ({ breadCrumbs, subTitle, title }) => {
   const [tabs, setTabs] = useState([
     { name: "جدول " + breadCrumbs[breadCrumbs.length - 1].name, id: 0 },
   ]);
+
   let [activeTab, setActivateTab] = useState(0);
+
   const stateRef = useRef();
   const stateActiveRef = useRef();
+
   stateRef.current = tabs;
   stateActiveRef.current = activeTab;
 
@@ -19,6 +22,7 @@ const ReactTable4 = ({ breadCrumbs, subTitle, title }) => {
     if (stateRef.current.find((e) => e.id === newTab.id)) return;
     setTabs([...stateRef.current, newTab]);
   };
+
   const delTab = (id) => {
     setTabs(stateRef.current.filter((e) => e.id != id));
     if (stateActiveRef.current == id) setActivateTab(0);
@@ -55,7 +59,7 @@ const ReactTable4 = ({ breadCrumbs, subTitle, title }) => {
           <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 */}
+        {/* page subTitle */}
         <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-xs">{subTitle}</h2>
@@ -72,7 +76,9 @@ const ReactTable4 = ({ breadCrumbs, subTitle, title }) => {
     </div>
   );
 };
+
 window.isDown = false;
+
 export default ReactTable4;
 
 export function Tabbar({ tabs, delTab, setActivateTab, activeTab }) {
@@ -109,14 +115,13 @@ export function Tabbar({ tabs, delTab, setActivateTab, activeTab }) {
             if (window.isDown) return e.preventDefault();
           }}
           aria-current="page"
-          className="flex flex-row items-center text-sm text-center active px-4  rounded-sm mx-1"
+          className="flex flex-row items-center text-sm text-center active rounded-sm px-4"
           style={{
             backgroundColor: activeTab === el.id ? "#92c1fc" : "#F1F6FF",
-
             color: activeTab === el.id ? "#fff" : "#000",
           }}
         >
-          <div className="h-full py-4" onClick={(e) => setActivateTab(el.id)}>
+          <div className="h-full py-2" onClick={(e) => setActivateTab(el.id)}>
             {el.name}
           </div>
           {el.id ? (