Merge branch 'master' of https://git.sitenevis.com/mahdi/danovinTasks

src/components/ReactTable4/BasicTable.js

@@ -1,9 +1,22 @@
 import React, { useMemo, useState } from "react";
 
 import "./index.scss";
-import { ColumnSearch } from "./ColumnSearch.js";
+
-import { ToggleColumns } from "./ToggleColumns.js";
+import Tabbar from "./Tabbar";
-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 RenderRowSubComponent from "./RenderRowSubComponent";
+import EditRow from "./EditRow";
 
 import {
   useTable,
@@ -16,16 +29,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,
@@ -35,12 +38,42 @@ const BasicTable = ({
   activeTab,
 }) => {
   const data = useMemo(() => MOCK_DATA, []);
+  // console.log(data);
+
   const [filtering, setFiltering] = useState(false);
+
   const columns = React.useMemo(
     () => COLUMNS({ filtering, setFiltering, addTab }),
     []
   );
 
+  const EditableCell = ({
+    value: initialValue,
+    row: { index },
+    column: { id },
+    updateMyData, // This is a custom function that we supplied to our table instance
+  }) => {
+    // We need to keep and update the state of the cell normally
+    const [value, setValue] = React.useState(initialValue);
+
+    const onChange = (e) => {
+      setValue(e.target.value);
+    };
+
+    // We'll only update the external data when the input is blurred
+    const onBlur = () => {
+      updateMyData(index, id, value);
+    };
+
+    // If the initialValue is changed external, sync it up with our state
+    React.useEffect(() => {
+      setValue(initialValue);
+    }, [initialValue]);
+
+    return <input value={value} onChange={onChange} onBlur={onBlur} />;
+  };
+
+  // یعنی فیلتر دیفالت هدر های ما سرچ خواهد بود مگه اینکه خودمون تغییرش بدیم
   const defaultColumn = useMemo(() => {
     return {
       Filter: ColumnSearch,
@@ -105,16 +138,17 @@ const BasicTable = ({
   );
 
   const { globalFilter, pageIndex, pageSize } = state;
+
   return (
     <>
       {/* toggle columns */}
-      <ToggleColumns
+      {/* <ToggleColumns
         allColumns={allColumns}
         getToggleHideAllColumnsProps={getToggleHideAllColumnsProps}
-      />
+      /> */}
       <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 +159,7 @@ const BasicTable = ({
         {/* left box */}
         {activeTab == 0 ? (
           <div
-            className="rounded-md p-2 flex flex-row items-center justify-end"
+            className="flex flex-row items-center p-2 rounded-tl rounded-tr"
             style={{ backgroundColor: "#F1F6FF" }}
           >
             {/* search box */}
@@ -161,6 +195,7 @@ const BasicTable = ({
           </div>
         ) : null}
       </div>
+      {/* table */}
       {activeTab == 0 ? (
         <>
           <table
@@ -174,7 +209,7 @@ const BasicTable = ({
                     <th
                       {...column.getHeaderProps(column.getSortByToggleProps())}
                       scope="col"
-                      className="cursor-pointer p-4 text-right text-sm font-medium"
+                      className="cursor-pointer py-2 px-4 text-right text-xs font-medium"
                       style={{ color: "#3287B9" }}
                     >
                       {column.render("Header")}
@@ -192,11 +227,14 @@ 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) => (
-                      <th {...column.getHeaderProps()} className="py-2 text-sm">
+                      <th
+                        {...column.getHeaderProps()}
+                        className="py-2 px-4 text-sm"
+                      >
                         {column.canFilter ? column.render("Filter") : null}
                       </th>
                     ))}
@@ -233,11 +271,18 @@ const BasicTable = ({
                     {row.isExpanded ? (
                       <tr>
                         <td colSpan={headerGroups[0].headers.length}>
-                          {RenderRowSubComponent({
+                          {/* {RenderRowSubComponent({
                             row: row.original,
                             columns,
-                          })}
+                            addTab,
+                          })} */}
                           {/* {RenderRowSubComponent({ row: row.values })} */}
+                          <RenderRowSubComponent
+                            columns={columns}
+                            addTab={addTab}
+                            row={row.original}
+                          />
+                          {console.log(row.original)}
                         </td>
                       </tr>
                     ) : null}
@@ -246,9 +291,7 @@ const BasicTable = ({
               })}
             </tbody>
             <tfoot
-              className={`bg-blue-900 ${
+              className={`bg-blue-900 ${rows.length > 5 ? "w-full" : "hidden"}`}
-                rows.length > 10 ? "w-full" : "hidden"
-              }`}
             >
               {footerGroups.map((footerGroup, index) => (
                 <tr key={index} {...footerGroup.getFooterGroupProps()}>
@@ -256,7 +299,7 @@ const BasicTable = ({
                     <td
                       key={index}
                       {...column.getFooterProps}
-                      className="px-4 py-2 text-right text-xs"
+                      className="p-2 text-right text-xs"
                       style={{ color: "#fff" }}
                     >
                       {column.render("Footer")}
@@ -334,550 +377,6 @@ const BasicTable = ({
     </>
   );
 };
-function EditRow({ row, columns }) {
-  console.log(row);
-  const persian = {
-    weight: "وزن",
-    pageNumber: "تعداد صفحات",
-    pageType: "نوع کاغذ",
-    bookNumber: "شماره شابک",
-    publisher: "انتشارات",
-    author: "نویسنده",
-    bookType: "قطع",
-    publishedYear: "سال انتشار",
-  };
-  return (
-    <div
-      className="w-full flex flex-row items-center border-r-4 border-blue-600 p-2"
-      style={{ backgroundColor: "#FAFBFF" }}
-    >
-      {/* right */}
-      <div
-        className="flex flex-row  flex-wrap items-center"
-        style={{ width: "90%" }}
-      >
-        {/* 1 */}
-        <div className="flex flex-row items-center mr-2 my-2">
-          <div
-            className="w-1 h-4 ml-1 rounded"
-            style={{ backgroundColor: "#EDF2FB" }}
-          ></div>
-          <p
-            className="text-xs text-blue-400"
-            style={{ borderColor: "#65A9FF" }}
-          >
-            نام و نام خانوادگی:
-            <input type="text" className="mr-1 text-black" value={row.name} />
-          </p>
-        </div>
-        {/* 2 */}
-        <div className="flex flex-row items-center mr-2 my-2">
-          <div
-            className="w-1 h-4 ml-1 rounded"
-            style={{ backgroundColor: "#EDF2FB" }}
-          ></div>
-          <p
-            className="text-xs text-blue-400"
-            style={{ borderColor: "#65A9FF" }}
-          >
-            تاریخ سفارش:
-            <span className="mr-1 text-black">{row.order_date}</span>
-          </p>
-        </div>
-        {/* 3 */}
-        <div className="flex flex-row items-center mr-2 my-2">
-          <div
-            className="w-1 h-4 ml-1 rounded"
-            style={{ backgroundColor: "#EDF2FB" }}
-          ></div>
-          <p
-            className="text-xs text-blue-400"
-            style={{ borderColor: "#65A9FF" }}
-          >
-            مبلغ سفارش:
-            <span className="mr-1 text-black">{row.order_price}</span>
-          </p>
-        </div>
-        {/* 4 */}
-        <div className="flex flex-row items-center mr-2 my-2">
-          <div
-            className="w-1 h-4 ml-1 rounded"
-            style={{ backgroundColor: "#EDF2FB" }}
-          ></div>
-          <p
-            className="text-xs text-blue-400"
-            style={{ borderColor: "#65A9FF" }}
-          >
-            شماره سفارش:
-            <span className="mr-1 text-black">{row.order_number}</span>
-          </p>
-        </div>
-        {/* 5 */}
-        <div className="flex flex-row items-center mr-2 my-2">
-          <div
-            className="w-1 h-4 ml-1 rounded"
-            style={{ backgroundColor: "#EDF2FB" }}
-          ></div>
-          <p
-            className="text-xs text-blue-400"
-            style={{ borderColor: "#65A9FF" }}
-          >
-            شغل کاربر:
-            <span className="mr-1 text-black">{row.user_job}</span>
-          </p>
-        </div>
-        {/* 6 */}
-        <div className="flex flex-row items-center mr-2 my-2">
-          <div
-            className="w-1 h-4 ml-1 rounded"
-            style={{ backgroundColor: "#EDF2FB" }}
-          ></div>
-          <p
-            className="text-xs text-blue-400"
-            style={{ borderColor: "#65A9FF" }}
-          >
-            وضعیت سفارش:
-            <span className="mr-1 text-black">
-              {columns[5].Cell({ value: row.order_status })}
-            </span>
-          </p>
-        </div>
-        {/* 7 */}
-        <div className="flex flex-row items-center mr-2 my-2">
-          <div
-            className="w-1 h-4 ml-1 rounded"
-            style={{ backgroundColor: "#EDF2FB" }}
-          ></div>
-          <p
-            className="text-xs text-blue-400"
-            style={{ borderColor: "#65A9FF" }}
-          >
-            سطح اهمیت:
-            <span className="mr-1 text-black">
-              {columns[6].Cell({ value: row.order_level })}
-            </span>
-          </p>
-        </div>
-        {/* 8 */}
-        <div className="flex flex-row items-center mr-2 my-2">
-          <div
-            className="w-1 h-4 ml-1 rounded"
-            style={{ backgroundColor: "#EDF2FB" }}
-          ></div>
-          <p
-            className="text-xs text-blue-400"
-            style={{ borderColor: "#65A9FF" }}
-          >
-            محل تولد:
-            <span className="mr-1 text-black">{row.birth_place}</span>
-          </p>
-        </div>
-        {/* 9 */}
-        <div className="flex flex-row items-center mr-2 my-2">
-          <div
-            className="w-1 h-4 ml-1 rounded"
-            style={{ backgroundColor: "#EDF2FB" }}
-          ></div>
-          <p
-            className="text-xs text-blue-400"
-            style={{ borderColor: "#65A9FF" }}
-          >
-            تلفن محل کار:
-            <span className="mr-1 text-black">{row.office_phone}</span>
-          </p>
-        </div>
-        {/* 10 */}
-        <div className="flex flex-row items-center mr-2 my-2">
-          <div
-            className="w-1 h-4 ml-1 rounded"
-            style={{ backgroundColor: "#EDF2FB" }}
-          ></div>
-          <p
-            className="text-xs text-blue-400"
-            style={{ borderColor: "#65A9FF" }}
-          >
-            تحصیلات:
-            <span className="mr-1 text-black">{row.education}</span>
-          </p>
-        </div>
-        {/* 11 */}
-        <div className="flex flex-row items-center mr-2 my-2">
-          <div
-            className="w-1 h-4 ml-1 rounded"
-            style={{ backgroundColor: "#EDF2FB" }}
-          ></div>
-          <p
-            className="text-xs text-blue-400"
-            style={{ borderColor: "#65A9FF" }}
-          >
-            تاریخ تولد:
-            <span className="mr-1 text-black">{row.birth_day}</span>
-          </p>
-        </div>
-        {/* 12 */}
-        <div className="flex flex-row items-center mr-2 my-2">
-          <div
-            className="w-1 h-4 ml-1 rounded"
-            style={{ backgroundColor: "#EDF2FB" }}
-          ></div>
-          <p
-            className="text-xs text-blue-400"
-            style={{ borderColor: "#65A9FF" }}
-          >
-            شغل:
-            <span className="mr-1 text-black">{row.job}</span>
-          </p>
-        </div>
-        {/* 13 */}
-        <div className="flex flex-row items-center mr-2 my-2">
-          <div
-            className="w-1 h-4 ml-1 rounded"
-            style={{ backgroundColor: "#EDF2FB" }}
-          ></div>
-          <p
-            className="text-xs text-blue-400"
-            style={{ borderColor: "#65A9FF" }}
-          >
-            دانشگاه:
-            <span className="mr-1 text-black">{row.uni}</span>
-          </p>
-        </div>
-        {/* 14 */}
-        <div className="flex flex-row items-center mr-2 my-2">
-          <div
-            className="w-1 h-4 ml-1 rounded"
-            style={{ backgroundColor: "#EDF2FB" }}
-          ></div>
-          <p
-            className="text-xs text-blue-400"
-            style={{ borderColor: "#65A9FF" }}
-          >
-            رشته تحصیلی:
-            <span className="mr-1 text-black">{row.field_study}</span>
-          </p>
-        </div>
-        {/* 15 */}
-        <div className="flex flex-row items-center mr-2 my-2">
-          <div
-            className="w-1 h-4 ml-1 rounded"
-            style={{ backgroundColor: "#EDF2FB" }}
-          ></div>
-          <p
-            className="text-xs text-blue-400"
-            style={{ borderColor: "#65A9FF" }}
-          >
-            اخلاق:
-            <span className="mr-1 text-black">{row.behaviour}</span>
-          </p>
-        </div>
-        {/* 16 */}
-        <div className="flex flex-row items-center mr-2 my-2">
-          <div
-            className="w-1 h-4 ml-1 rounded"
-            style={{ backgroundColor: "#EDF2FB" }}
-          ></div>
-          <p
-            className="text-xs text-blue-400"
-            style={{ borderColor: "#65A9FF" }}
-          >
-            نشانی:
-            <span className="mr-1 text-black">{row.address}</span>
-          </p>
-        </div>
-      </div>
-      {/* left */}
-      <div
-        className="flex flex-col items-end justify-end"
-        style={{ width: "10%" }}
-      >
-        <button
-          className="border rounded w-8/12 text-xs py-2 mb-2 bg-white"
-          style={{ borderColor: "#D53921", color: "#D53921" }}
-        >
-          حذف
-        </button>
-        <button
-          className="border rounded w-8/12 text-xs py-2 bg-white"
-          style={{ borderColor: "#65A9FF", color: "#65A9FF" }}
-        >
-          جزیات بیشتر
-        </button>
-      </div>
-    </div>
-  );
-}
-function RenderRowSubComponent({ row, columns }) {
-  console.log(row);
-  const persian = {
-    weight: "وزن",
-    pageNumber: "تعداد صفحات",
-    pageType: "نوع کاغذ",
-    bookNumber: "شماره شابک",
-    publisher: "انتشارات",
-    author: "نویسنده",
-    bookType: "قطع",
-    publishedYear: "سال انتشار",
-  };
-  return (
-    <div
-      className="w-full flex flex-row items-center border-r-4 border-blue-600 p-2"
-      style={{ backgroundColor: "#FAFBFF" }}
-    >
-      {/* right */}
-      <div
-        className="flex flex-row  flex-wrap items-center"
-        style={{ width: "90%" }}
-      >
-        {/* 1 */}
-        <div className="flex flex-row items-center mr-2 my-2">
-          <div
-            className="w-1 h-4 ml-1 rounded"
-            style={{ backgroundColor: "#EDF2FB" }}
-          ></div>
-          <p
-            className="text-xs text-blue-400"
-            style={{ borderColor: "#65A9FF" }}
-          >
-            نام و نام خانوادگی:
-            <span className="mr-1 text-black">{row.name}</span>
-          </p>
-        </div>
-        {/* 2 */}
-        <div className="flex flex-row items-center mr-2 my-2">
-          <div
-            className="w-1 h-4 ml-1 rounded"
-            style={{ backgroundColor: "#EDF2FB" }}
-          ></div>
-          <p
-            className="text-xs text-blue-400"
-            style={{ borderColor: "#65A9FF" }}
-          >
-            تاریخ سفارش:
-            <span className="mr-1 text-black">{row.order_date}</span>
-          </p>
-        </div>
-        {/* 3 */}
-        <div className="flex flex-row items-center mr-2 my-2">
-          <div
-            className="w-1 h-4 ml-1 rounded"
-            style={{ backgroundColor: "#EDF2FB" }}
-          ></div>
-          <p
-            className="text-xs text-blue-400"
-            style={{ borderColor: "#65A9FF" }}
-          >
-            مبلغ سفارش:
-            <span className="mr-1 text-black">{row.order_price}</span>
-          </p>
-        </div>
-        {/* 4 */}
-        <div className="flex flex-row items-center mr-2 my-2">
-          <div
-            className="w-1 h-4 ml-1 rounded"
-            style={{ backgroundColor: "#EDF2FB" }}
-          ></div>
-          <p
-            className="text-xs text-blue-400"
-            style={{ borderColor: "#65A9FF" }}
-          >
-            شماره سفارش:
-            <span className="mr-1 text-black">{row.order_number}</span>
-          </p>
-        </div>
-        {/* 5 */}
-        <div className="flex flex-row items-center mr-2 my-2">
-          <div
-            className="w-1 h-4 ml-1 rounded"
-            style={{ backgroundColor: "#EDF2FB" }}
-          ></div>
-          <p
-            className="text-xs text-blue-400"
-            style={{ borderColor: "#65A9FF" }}
-          >
-            شغل کاربر:
-            <span className="mr-1 text-black">{row.user_job}</span>
-          </p>
-        </div>
-        {/* 6 */}
-        <div className="flex flex-row items-center mr-2 my-2">
-          <div
-            className="w-1 h-4 ml-1 rounded"
-            style={{ backgroundColor: "#EDF2FB" }}
-          ></div>
-          <p
-            className="text-xs text-blue-400"
-            style={{ borderColor: "#65A9FF" }}
-          >
-            وضعیت سفارش:
-            <span className="mr-1 text-black">
-              {columns[5].Cell({ value: row.order_status })}
-            </span>
-          </p>
-        </div>
-        {/* 7 */}
-        <div className="flex flex-row items-center mr-2 my-2">
-          <div
-            className="w-1 h-4 ml-1 rounded"
-            style={{ backgroundColor: "#EDF2FB" }}
-          ></div>
-          <p
-            className="text-xs text-blue-400"
-            style={{ borderColor: "#65A9FF" }}
-          >
-            سطح اهمیت:
-            <span className="mr-1 text-black">
-              {columns[6].Cell({ value: row.order_level })}
-            </span>
-          </p>
-        </div>
-        {/* 8 */}
-        <div className="flex flex-row items-center mr-2 my-2">
-          <div
-            className="w-1 h-4 ml-1 rounded"
-            style={{ backgroundColor: "#EDF2FB" }}
-          ></div>
-          <p
-            className="text-xs text-blue-400"
-            style={{ borderColor: "#65A9FF" }}
-          >
-            محل تولد:
-            <span className="mr-1 text-black">{row.birth_place}</span>
-          </p>
-        </div>
-        {/* 9 */}
-        <div className="flex flex-row items-center mr-2 my-2">
-          <div
-            className="w-1 h-4 ml-1 rounded"
-            style={{ backgroundColor: "#EDF2FB" }}
-          ></div>
-          <p
-            className="text-xs text-blue-400"
-            style={{ borderColor: "#65A9FF" }}
-          >
-            تلفن محل کار:
-            <span className="mr-1 text-black">{row.office_phone}</span>
-          </p>
-        </div>
-        {/* 10 */}
-        <div className="flex flex-row items-center mr-2 my-2">
-          <div
-            className="w-1 h-4 ml-1 rounded"
-            style={{ backgroundColor: "#EDF2FB" }}
-          ></div>
-          <p
-            className="text-xs text-blue-400"
-            style={{ borderColor: "#65A9FF" }}
-          >
-            تحصیلات:
-            <span className="mr-1 text-black">{row.education}</span>
-          </p>
-        </div>
-        {/* 11 */}
-        <div className="flex flex-row items-center mr-2 my-2">
-          <div
-            className="w-1 h-4 ml-1 rounded"
-            style={{ backgroundColor: "#EDF2FB" }}
-          ></div>
-          <p
-            className="text-xs text-blue-400"
-            style={{ borderColor: "#65A9FF" }}
-          >
-            تاریخ تولد:
-            <span className="mr-1 text-black">{row.birth_day}</span>
-          </p>
-        </div>
-        {/* 12 */}
-        <div className="flex flex-row items-center mr-2 my-2">
-          <div
-            className="w-1 h-4 ml-1 rounded"
-            style={{ backgroundColor: "#EDF2FB" }}
-          ></div>
-          <p
-            className="text-xs text-blue-400"
-            style={{ borderColor: "#65A9FF" }}
-          >
-            شغل:
-            <span className="mr-1 text-black">{row.job}</span>
-          </p>
-        </div>
-        {/* 13 */}
-        <div className="flex flex-row items-center mr-2 my-2">
-          <div
-            className="w-1 h-4 ml-1 rounded"
-            style={{ backgroundColor: "#EDF2FB" }}
-          ></div>
-          <p
-            className="text-xs text-blue-400"
-            style={{ borderColor: "#65A9FF" }}
-          >
-            دانشگاه:
-            <span className="mr-1 text-black">{row.uni}</span>
-          </p>
-        </div>
-        {/* 14 */}
-        <div className="flex flex-row items-center mr-2 my-2">
-          <div
-            className="w-1 h-4 ml-1 rounded"
-            style={{ backgroundColor: "#EDF2FB" }}
-          ></div>
-          <p
-            className="text-xs text-blue-400"
-            style={{ borderColor: "#65A9FF" }}
-          >
-            رشته تحصیلی:
-            <span className="mr-1 text-black">{row.field_study}</span>
-          </p>
-        </div>
-        {/* 15 */}
-        <div className="flex flex-row items-center mr-2 my-2">
-          <div
-            className="w-1 h-4 ml-1 rounded"
-            style={{ backgroundColor: "#EDF2FB" }}
-          ></div>
-          <p
-            className="text-xs text-blue-400"
-            style={{ borderColor: "#65A9FF" }}
-          >
-            اخلاق:
-            <span className="mr-1 text-black">{row.behaviour}</span>
-          </p>
-        </div>
-        {/* 16 */}
-        <div className="flex flex-row items-center mr-2 my-2">
-          <div
-            className="w-1 h-4 ml-1 rounded"
-            style={{ backgroundColor: "#EDF2FB" }}
-          ></div>
-          <p
-            className="text-xs text-blue-400"
-            style={{ borderColor: "#65A9FF" }}
-          >
-            نشانی:
-            <span className="mr-1 text-black">{row.address}</span>
-          </p>
-        </div>
-      </div>
-      {/* left */}
-      <div
-        className="flex flex-col items-end justify-end"
-        style={{ width: "10%" }}
-      >
-        <button
-          className="border rounded w-8/12 text-xs py-2 mb-2 bg-white"
-          style={{ borderColor: "#D53921", color: "#D53921" }}
-        >
-          حذف
-        </button>
-        <button
-          className="border rounded w-8/12 text-xs py-2 bg-white"
-          style={{ borderColor: "#65A9FF", color: "#65A9FF" }}
-        >
-          جزیات بیشتر
-        </button>
-      </div>
-    </div>
-  );
-}
 
 export default BasicTable;
 

src/components/ReactTable4/Buttons.js

@@ -1,27 +1,33 @@
+import { useState } from "react";
+
 import arrowIcon from "./arrow-icon.svg";
 import more from "./more2.svg";
 import edit from "./edit.svg";
 
-import { useState } from "react";
-
 export const Buttons = ({ row, addTab }) => {
   const [activeDetails, setActiveDetails] = useState(null);
   return (
-    <div className="flex flex-row items-center justify-end">
+    <div className="flex flex-row items-center justify-end ">
+      <div
+        className=""
+        onClick={() => {
+          setActiveDetails(!activeDetails);
+        }}
+      >
         <button
           className="mx-1 flex flex-row items-center justify-around p-2 rounded border border-gray-300"
-        onClick={() => setActiveDetails(!activeDetails)}
           {...row.getToggleRowExpandedProps()}
         >
-        جزپیات
+          جزئیات
           <img
             src={arrowIcon}
             alt=""
-          className={`mx-1 w-3 cursor-pointer mr-2 ${
+            className={`mx-1 w-3 cursor-pointer mr-2 transition-all duration-500 ${
               activeDetails ? "rotate-60" : "rotate-90"
             }`}
           />
         </button>
+      </div>
       <div
         className="mx-1 p-2 rounded border border-gray-300 cursor-pointer"
         onClick={() => {
@@ -30,7 +36,7 @@ export const Buttons = ({ row, addTab }) => {
       >
         <img src={edit} alt="" className="w-4" />
       </div>
-      <img src={more} alt="" className="w-5 cursor-pointer " />
+      <img src={more} alt="" className="w-5 cursor-pointer" />
     </div>
   );
 };

src/components/ReactTable4/ColumnSearch.js

@@ -1,36 +1,16 @@
 import React, { useState } from "react";
 
-import search from "./search-normal.svg";
-import cancleIcon from "./zarbedar-icon.svg";
-
 export const ColumnSearch = ({ column }) => {
   const { filterValue, setFilter } = column;
-  const [activeSearchBox, setActiveSearchBox] = useState(false);
 
   return (
-    <div className="flex flex-row items-center">
+    <div className="flex flex-row items-center ">
-      <div className="flex flex-row items-center relative">
-        {activeSearchBox && (
-          <img
-            src={cancleIcon}
-            alt=""
-            className="w-2 h-2 absolute left-16 cursor-pointer"
-            onClick={() => setActiveSearchBox(false)}
-          />
-        )}
-        <img
-          src={search}
-          alt=""
-          className="w-4 h-4 absolute left-11 cursor-pointer"
-        />
       <input
         value={filterValue || ""}
         onChange={(e) => setFilter(e.target.value)}
-          onFocus={() => setActiveSearchBox(true)}
+        className={`w-8/12 text-xs text-blue-400 rounded focus:outline-none border p-1 focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20`}
-          className={`w-9/12 text-xs text-blue-400 rounded focus:outline-none border p-1 focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20`}
         style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
       />
     </div>
-    </div>
   );
 };

src/components/ReactTable4/EditButtons.js

@@ -8,7 +8,6 @@ import plus from "./plus.svg";
 
 export function EditButtons({ setFiltering, filtering, addTab }) {
   const [selectedFilterRow, setSelectedFilterRow] = useState(filtering);
-  // setFiltering(selectedFilterRow);
 
   return (
     <div className="flex flex-row items-center justify-end">
@@ -27,7 +26,6 @@ export function EditButtons({ setFiltering, filtering, addTab }) {
       {/* filter */}
       <img
         src={filter}
-        // onClick={() => setSelectedFilterRow(!selectedFilterRow)}
         alt=""
         className={`mx-1 p-2 rounded border border-blue-300 cursor-pointer w-8 
         ${selectedFilterRow ? "border" : "border-0"}`}

src/components/ReactTable4/EditRow.js

@@ -0,0 +1,325 @@
+import React from "react";
+
+const EditRow = ({ row, columns }) => {
+  // console.log(columns);
+
+  return (
+    <div
+      className="flex flex-col border-r-4 border-blue-600 p-2 rounded-sm"
+      style={{ backgroundColor: "#F1F5FE" }}
+    >
+      {/* 1 */}
+      <div className="flex flex-col mr-2 my-2">
+        <div className="flex flex-row">
+          <div
+            className="w-1 h-4 ml-1 rounded"
+            style={{ backgroundColor: "#65A9FF" }}
+          ></div>
+          <p
+            className="text-xs text-blue-400"
+            style={{ borderColor: "#65A9FF" }}
+          >
+            نام و نام خانوادگی:
+          </p>
+        </div>
+        <input
+          type="text"
+          style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
+          className="w-12/12 mx-4 text-black text-xs rounded-sm mt-4 border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
+          value={row.name}
+          // style={{ width: "100%" }}
+        />
+      </div>
+      {/* 2 */}
+      <div className="flex flex-col mr-2 my-2">
+        <div className="flex flex-row">
+          <div
+            className="w-1 h-4 ml-1 rounded"
+            style={{ backgroundColor: "#65A9FF" }}
+          ></div>
+          <p
+            className="text-xs text-blue-400"
+            style={{ borderColor: "#65A9FF" }}
+          >
+            تاریخ سفارش:
+          </p>
+        </div>
+        <input
+          type="text"
+          style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
+          className="w-12/12 mx-4 text-black text-xs rounded-sm mt-4 border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
+          value={row.order_date}
+        />
+      </div>
+      {/* 3 */}
+      <div className="flex flex-col mr-2 my-2">
+        <div className="flex flex-row">
+          <div
+            className="w-1 h-4 ml-1 rounded"
+            style={{ backgroundColor: "#65A9FF" }}
+          ></div>
+          <p
+            className="text-xs text-blue-400"
+            style={{ borderColor: "#65A9FF" }}
+          >
+            مبلغ سفارش:
+          </p>
+        </div>
+        <input
+          type="text"
+          style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
+          className="w-12/12 mx-4 text-black text-xs rounded-sm mt-4 border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
+          value={row.order_price}
+        />
+      </div>
+      {/* 4 */}
+      <div className="flex flex-col mr-2 my-2">
+        <div className="flex flex-row">
+          <div
+            className="w-1 h-4 ml-1 rounded"
+            style={{ backgroundColor: "#65A9FF" }}
+          ></div>
+          <p
+            className="text-xs text-blue-400"
+            style={{ borderColor: "#65A9FF" }}
+          >
+            شماره سفارش:
+          </p>
+        </div>
+        <input
+          type="text"
+          style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
+          className="w-12/12 mx-4 text-black text-xs rounded-sm mt-4 border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
+          value={row.order_number}
+        />
+      </div>
+      {/* 5 */}
+      <div className="flex flex-col mr-2 my-2">
+        <div className="flex flex-row">
+          <div
+            className="w-1 h-4 ml-1 rounded"
+            style={{ backgroundColor: "#65A9FF" }}
+          ></div>
+          <p
+            className="text-xs text-blue-400"
+            style={{ borderColor: "#65A9FF" }}
+          >
+            شغل کاربر:
+          </p>
+        </div>
+        <input
+          type="text"
+          style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
+          className="w-12/12 mx-4 text-black text-xs rounded-sm mt-4 border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
+          value={row.user_job}
+        />
+      </div>
+      {/* 6 */}
+      <div className="flex flex-col mr-2 my-2">
+        <div className="flex flex-row">
+          <div
+            className="w-1 h-4 ml-1 rounded"
+            style={{ backgroundColor: "#65A9FF" }}
+          ></div>
+          <p
+            className="text-xs text-blue-400"
+            style={{ borderColor: "#65A9FF" }}
+          >
+            وضعیت سفارش:
+          </p>
+        </div>
+        <input
+          type="text"
+          style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
+          className="w-12/12 mx-4 text-black text-xs rounded-sm mt-4 border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
+          value={row.order_status}
+        />
+      </div>
+      {/* 7 */}
+      <div className="flex flex-row items-center mr-2 my-2">
+        <div
+          className="w-1 h-4 ml-1 rounded"
+          style={{ backgroundColor: "#EDF2FB" }}
+        ></div>
+        <p className="text-xs text-blue-400" style={{ borderColor: "#65A9FF" }}>
+          سطح اهمیت:
+        </p>
+        <input
+          type="text"
+          style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
+          className="w-fit mr-1 text-black text-xs rounded-sm  border p-1 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
+          // {columns[6].Cell({ value: row.order_level })}
+          value={row.order_level}
+        />
+      </div>
+      {/* 8 */}
+      <div className="flex flex-row items-center mr-2 my-2">
+        <div
+          className="w-1 h-4 ml-1 rounded"
+          style={{ backgroundColor: "#EDF2FB" }}
+        ></div>
+        <p className="text-xs text-blue-400" style={{ borderColor: "#65A9FF" }}>
+          محل تولد:
+        </p>
+        <input
+          type="text"
+          style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
+          className="w-fit mr-1 text-black text-xs rounded-sm  border p-1 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
+          value={row.birth_place}
+        />
+      </div>
+      {/* 9 */}
+      <div className="flex flex-row items-center mr-2 my-2">
+        <div
+          className="w-1 h-4 ml-1 rounded"
+          style={{ backgroundColor: "#EDF2FB" }}
+        ></div>
+        <p className="text-xs text-blue-400" style={{ borderColor: "#65A9FF" }}>
+          تلفن محل کار:
+        </p>
+        <input
+          type="text"
+          style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
+          className="w-fit mr-1 text-black text-xs rounded-sm  border p-1 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
+          value={row.office_phone}
+        />
+      </div>
+      {/* 10 */}
+      <div className="flex flex-row items-center mr-2 my-2">
+        <div
+          className="w-1 h-4 ml-1 rounded"
+          style={{ backgroundColor: "#EDF2FB" }}
+        ></div>
+        <p className="text-xs text-blue-400" style={{ borderColor: "#65A9FF" }}>
+          تحصیلات:
+        </p>
+        <input
+          type="text"
+          style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
+          className="w-fit mr-1 text-black text-xs rounded-sm  border p-1 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
+          value={row.education}
+        />
+      </div>
+      {/* 11 */}
+      <div className="flex flex-row items-center mr-2 my-2">
+        <div
+          className="w-1 h-4 ml-1 rounded"
+          style={{ backgroundColor: "#EDF2FB" }}
+        ></div>
+        <p className="text-xs text-blue-400" style={{ borderColor: "#65A9FF" }}>
+          تاریخ تولد:
+        </p>
+        <input
+          type="text"
+          style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
+          className="w-fit mr-1 text-black text-xs rounded-sm  border p-1 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
+          value={row.birth_day}
+        />
+      </div>
+      {/* 12 */}
+      <div className="flex flex-row items-center mr-2 my-2">
+        <div
+          className="w-1 h-4 ml-1 rounded"
+          style={{ backgroundColor: "#EDF2FB" }}
+        ></div>
+        <p className="text-xs text-blue-400" style={{ borderColor: "#65A9FF" }}>
+          شغل:
+        </p>
+        <input
+          type="text"
+          style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
+          className="w-fit mr-1 text-black text-xs rounded-sm  border p-1 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
+          value={row.job}
+        />
+      </div>
+      {/* 13 */}
+      <div className="flex flex-row items-center mr-2 my-2">
+        <div
+          className="w-1 h-4 ml-1 rounded"
+          style={{ backgroundColor: "#EDF2FB" }}
+        ></div>
+        <p className="text-xs text-blue-400" style={{ borderColor: "#65A9FF" }}>
+          دانشگاه:
+        </p>
+        <input
+          type="text"
+          style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
+          className="w-fit mr-1 text-black text-xs rounded-sm  border p-1 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
+          value={row.uni}
+        />
+      </div>
+      {/* 14 */}
+      <div className="flex flex-row items-center mr-2 my-2">
+        <div
+          className="w-1 h-4 ml-1 rounded"
+          style={{ backgroundColor: "#EDF2FB" }}
+        ></div>
+        <p className="text-xs text-blue-400" style={{ borderColor: "#65A9FF" }}>
+          رشته تحصیلی:
+        </p>
+        <input
+          type="text"
+          style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
+          className="w-fit mr-1 text-black text-xs rounded-sm  border p-1 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
+          value={row.field_study}
+        />
+      </div>
+      {/* 15 */}
+      <div className="flex flex-row items-center mr-2 my-2">
+        <div
+          className="w-1 h-4 ml-1 rounded"
+          style={{ backgroundColor: "#EDF2FB" }}
+        ></div>
+        <p className="text-xs text-blue-400" style={{ borderColor: "#65A9FF" }}>
+          اخلاق:
+        </p>
+        <input
+          type="text"
+          style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
+          className="w-full mr-1 text-black text-xs rounded-sm  border p-1 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
+          value={row.behaviour}
+        />
+      </div>
+      {/* 16 */}
+      <div className=" mr-2 my-2">
+        <div
+          className="w-1 h-4 ml-1 rounded"
+          style={{ backgroundColor: "#EDF2FB" }}
+        ></div>
+        <p className="text-xs text-blue-400" style={{ borderColor: "#65A9FF" }}>
+          نشانی:
+        </p>
+        <input
+          type="text"
+          style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
+          className="w-full mr-1 text-black text-xs rounded-sm  border p-1 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
+          value={row.address}
+        />
+      </div>{" "}
+    </div>
+  );
+};
+
+// {features.map((feature, index) => (
+
+export default EditRow;
+
+{
+  /* <div
+className="flex flex-col items-end justify-end"
+style={{ width: "10%" }}
+>
+<button
+  className="border rounded w-8/12 text-xs py-2 mb-2 bg-white"
+  style={{ borderColor: "#D53921", color: "#D53921" }}
+>
+  حذف
+</button>
+<button
+  className="border rounded w-8/12 text-xs py-2 bg-white"
+  style={{ borderColor: "#65A9FF", color: "#65A9FF" }}
+>
+  جزیات بیشتر
+</button>
+</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/RenderRowSubComponent.js

@@ -0,0 +1,269 @@
+import React from "react";
+
+const RenderRowSubComponent = ({ columns, addTab, row }) => {
+  return (
+    <div
+      className="w-full flex flex-row items-center border-r-4 border-blue-600 p-2 "
+      style={{ backgroundColor: "#FBFCFE" }}
+    >
+      {/* right */}
+      <div
+        className="flex flex-row  flex-wrap items-center "
+        style={{ width: "90%" }}
+      >
+        {/* 1 */}
+        <div className="flex flex-row items-center mr-2 my-2">
+          <div
+            className="w-1 h-4 ml-1 rounded"
+            style={{ backgroundColor: "#EDF2FB" }}
+          ></div>
+          <p
+            className="text-xs text-blue-400"
+            style={{ borderColor: "#65A9FF" }}
+          >
+            نام و نام خانوادگی:
+            <span className="mr-1 text-black">{row.name}</span>
+          </p>
+        </div>
+        {/* 2 */}
+        <div className="flex flex-row items-center mr-2 my-2">
+          <div
+            className="w-1 h-4 ml-1 rounded"
+            style={{ backgroundColor: "#EDF2FB" }}
+          ></div>
+          <p
+            className="text-xs text-blue-400"
+            style={{ borderColor: "#65A9FF" }}
+          >
+            تاریخ سفارش:
+            <span className="mr-1 text-black">{row.order_date}</span>
+          </p>
+        </div>
+        {/* 3 */}
+        <div className="flex flex-row items-center mr-2 my-2">
+          <div
+            className="w-1 h-4 ml-1 rounded"
+            style={{ backgroundColor: "#EDF2FB" }}
+          ></div>
+          <p
+            className="text-xs text-blue-400"
+            style={{ borderColor: "#65A9FF" }}
+          >
+            مبلغ سفارش:
+            <span className="mr-1 text-black">{row.order_price}</span>
+          </p>
+        </div>
+        {/* 4 */}
+        <div className="flex flex-row items-center mr-2 my-2">
+          <div
+            className="w-1 h-4 ml-1 rounded"
+            style={{ backgroundColor: "#EDF2FB" }}
+          ></div>
+          <p
+            className="text-xs text-blue-400"
+            style={{ borderColor: "#65A9FF" }}
+          >
+            شماره سفارش:
+            <span className="mr-1 text-black">{row.order_number}</span>
+          </p>
+        </div>
+        {/* 5 */}
+        <div className="flex flex-row items-center mr-2 my-2">
+          <div
+            className="w-1 h-4 ml-1 rounded"
+            style={{ backgroundColor: "#EDF2FB" }}
+          ></div>
+          <p
+            className="text-xs text-blue-400"
+            style={{ borderColor: "#65A9FF" }}
+          >
+            شغل کاربر:
+            <span className="mr-1 text-black">{row.user_job}</span>
+          </p>
+        </div>
+        {/* 6 */}
+        <div className="flex flex-row items-center mr-2 my-2">
+          <div
+            className="w-1 h-4 ml-1 rounded"
+            style={{ backgroundColor: "#EDF2FB" }}
+          ></div>
+          <p
+            className="text-xs text-blue-400"
+            style={{ borderColor: "#65A9FF" }}
+          >
+            وضعیت سفارش:
+          </p>
+          <span className="mr-1 text-black text-xs">
+            {columns[5].Cell({ value: row.order_status })}
+          </span>
+        </div>
+        {/* 7 */}
+        <div className="flex flex-row items-center mr-2 my-2">
+          <div
+            className="w-1 h-4 ml-1 rounded"
+            style={{ backgroundColor: "#EDF2FB" }}
+          ></div>
+          <p
+            className="text-xs text-blue-400"
+            style={{ borderColor: "#65A9FF" }}
+          >
+            سطح اهمیت:
+          </p>
+          <span className="mr-1 text-xs text-black">
+            {columns[6].Cell({ value: row.order_level })}
+          </span>
+        </div>
+        {/* 8 */}
+        <div className="flex flex-row items-center mr-2 my-2">
+          <div
+            className="w-1 h-4 ml-1 rounded"
+            style={{ backgroundColor: "#EDF2FB" }}
+          ></div>
+          <p
+            className="text-xs text-blue-400"
+            style={{ borderColor: "#65A9FF" }}
+          >
+            محل تولد:
+            <span className="mr-1 text-black">{row.birth_place}</span>
+          </p>
+        </div>
+        {/* 9 */}
+        <div className="flex flex-row items-center mr-2 my-2">
+          <div
+            className="w-1 h-4 ml-1 rounded"
+            style={{ backgroundColor: "#EDF2FB" }}
+          ></div>
+          <p
+            className="text-xs text-blue-400"
+            style={{ borderColor: "#65A9FF" }}
+          >
+            تلفن محل کار:
+            <span className="mr-1 text-black">{row.office_phone}</span>
+          </p>
+        </div>
+        {/* 10 */}
+        <div className="flex flex-row items-center mr-2 my-2">
+          <div
+            className="w-1 h-4 ml-1 rounded"
+            style={{ backgroundColor: "#EDF2FB" }}
+          ></div>
+          <p
+            className="text-xs text-blue-400"
+            style={{ borderColor: "#65A9FF" }}
+          >
+            تحصیلات:
+            <span className="mr-1 text-black">{row.education}</span>
+          </p>
+        </div>
+        {/* 11 */}
+        <div className="flex flex-row items-center mr-2 my-2">
+          <div
+            className="w-1 h-4 ml-1 rounded"
+            style={{ backgroundColor: "#EDF2FB" }}
+          ></div>
+          <p
+            className="text-xs text-blue-400"
+            style={{ borderColor: "#65A9FF" }}
+          >
+            تاریخ تولد:
+            <span className="mr-1 text-black">{row.birth_day}</span>
+          </p>
+        </div>
+        {/* 12 */}
+        <div className="flex flex-row items-center mr-2 my-2">
+          <div
+            className="w-1 h-4 ml-1 rounded"
+            style={{ backgroundColor: "#EDF2FB" }}
+          ></div>
+          <p
+            className="text-xs text-blue-400"
+            style={{ borderColor: "#65A9FF" }}
+          >
+            شغل:
+            <span className="mr-1 text-black">{row.job}</span>
+          </p>
+        </div>
+        {/* 13 */}
+        <div className="flex flex-row items-center mr-2 my-2">
+          <div
+            className="w-1 h-4 ml-1 rounded"
+            style={{ backgroundColor: "#EDF2FB" }}
+          ></div>
+          <p
+            className="text-xs text-blue-400"
+            style={{ borderColor: "#65A9FF" }}
+          >
+            دانشگاه:
+            <span className="mr-1 text-black">{row.uni}</span>
+          </p>
+        </div>
+        {/* 14 */}
+        <div className="flex flex-row items-center mr-2 my-2">
+          <div
+            className="w-1 h-4 ml-1 rounded"
+            style={{ backgroundColor: "#EDF2FB" }}
+          ></div>
+          <p
+            className="text-xs text-blue-400"
+            style={{ borderColor: "#65A9FF" }}
+          >
+            رشته تحصیلی:
+            <span className="mr-1 text-black">{row.field_study}</span>
+          </p>
+        </div>
+        {/* 15 */}
+        <div className="flex flex-row items-center mr-2 my-2">
+          <div
+            className="w-1 h-4 ml-1 rounded"
+            style={{ backgroundColor: "#EDF2FB" }}
+          ></div>
+          <p
+            className="text-xs text-blue-400"
+            style={{ borderColor: "#65A9FF" }}
+          >
+            اخلاق:
+            <span className="mr-1 text-black">{row.behaviour}</span>
+          </p>
+        </div>
+        {/* 16 */}
+        <div className="flex flex-row items-center mr-2 my-2">
+          <div
+            className="w-1 h-4 ml-1 rounded"
+            style={{ backgroundColor: "#EDF2FB" }}
+          ></div>
+          <p
+            className="text-xs text-blue-400"
+            style={{ borderColor: "#65A9FF" }}
+          >
+            نشانی:
+            <span className="mr-1 text-black">{row.address}</span>
+          </p>
+        </div>
+      </div>
+      {/* left */}
+      <div
+        className="flex flex-col items-end justify-end"
+        style={{ width: "10%" }}
+      >
+        <button
+          className="border rounded w-8/12 text-xs py-2 mb-2 bg-white"
+          style={{ borderColor: "#D53921", color: "#D53921" }}
+        >
+          حذف
+        </button>
+        <button
+          className="border rounded w-8/12 text-xs py-2 bg-white"
+          style={{ borderColor: "#65A9FF", color: "#65A9FF" }}
+          onClick={() => {
+            console.log(row.name);
+            addTab({ name: row.name, id: row.id });
+          }}
+        >
+          جزئیات بیشتر
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default RenderRowSubComponent;

src/components/ReactTable4/Tabbar.js

@@ -0,0 +1,66 @@
+import React from "react";
+import "./index.scss";
+
+import cancleIcon from "./zarbedar-icon.svg";
+
+const Tabbar = ({ tabs, delTab, setActivateTab, activeTab }) => {
+  return (
+    <ul
+      className="tabbar flex no-scrollbar overflow-x-scroll scrolling-touch"
+      onMouseDown={(e) => {
+        const slider = window.document.querySelector(".tabbar");
+        window.isDown = true;
+        window.startX = e.pageX - slider.offsetLeft;
+        window.scrollLeft = slider.scrollLeft;
+      }}
+      onMouseLeave={(e) => {
+        window.isDown = false;
+      }}
+      onMouseUp={(e) => {
+        window.isDown = false;
+      }}
+      onMouseMove={(e) => {
+        const slider = window.document.querySelector(".tabbar");
+        if (!window.isDown) return;
+        e.preventDefault();
+        const x = e.pageX - slider.offsetLeft;
+        const walk = (x - window.startX) * 1;
+        slider.scrollLeft = window.scrollLeft - walk;
+      }}
+    >
+      {tabs.map((el, index) => (
+        <li
+          key={index}
+          onClick={(e) => {
+            if (window.isDown) return e.preventDefault();
+          }}
+          aria-current="page"
+          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-2" onClick={(e) => setActivateTab(el.id)}>
+            {el.name}
+          </div>
+          {el.id ? (
+            <img
+              src={cancleIcon}
+              className="w-2 mr-3"
+              alt=""
+              onClick={(e) => {
+                e.preventDefault();
+                delTab(el.id);
+              }}
+            />
+          ) : null}
+        </li>
+      ))}
+    </ul>
+  );
+};
+
+window.isDown = false;
+
+export default Tabbar;

src/components/ReactTable4/columns.js

@@ -1,7 +1,5 @@
 import { format } from "date-fns";
 
-import Table from "./BasicTable";
-
 import { OrderStatus } from "./OrderStatus";
 import { OrderLevel } from "./OrderLevel";
 import { Buttons } from "./Buttons";

src/components/ReactTable4/index.js

@@ -1,16 +1,17 @@
 import React, { useRef, useState } from "react";
-import BasicTable from "./BasicTable";
-// import useDraggableScroll from "use-draggable-scroll";
 
-import cancleIcon from "./zarbedar-icon.svg";
+import BasicTable from "./BasicTable";
 
 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 +20,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,13 +57,12 @@ 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>
         </div>
       </div>
-      {/* <Tabbar tabs={tabs} /> */}
       <BasicTable
         addTab={addTab}
         tabs={tabs}
@@ -72,69 +73,68 @@ const ReactTable4 = ({ breadCrumbs, subTitle, title }) => {
     </div>
   );
 };
-window.isDown = false;
-export default ReactTable4;
 
-export function Tabbar({ tabs, delTab, setActivateTab, activeTab }) {
+export default ReactTable4;
-  // const { onMouseDown } = useDraggableScroll(ref);
 
-  return (
+// export function Tabbar({ tabs, delTab, setActivateTab, activeTab }) {
-    <ul
+//   // const { onMouseDown } = useDraggableScroll(ref);
-      className="tabbar flex no-scrollbar overflow-x-scroll scrolling-touch"
-      onMouseDown={(e) => {
-        const slider = window.document.querySelector(".tabbar");
-        window.isDown = true;
-        window.startX = e.pageX - slider.offsetLeft;
-        window.scrollLeft = slider.scrollLeft;
-      }}
-      onMouseLeave={(e) => {
-        window.isDown = false;
-      }}
-      onMouseUp={(e) => {
-        window.isDown = false;
-      }}
-      onMouseMove={(e) => {
-        const slider = window.document.querySelector(".tabbar");
-        if (!window.isDown) return;
-        e.preventDefault();
-        const x = e.pageX - slider.offsetLeft;
-        const walk = (x - window.startX) * 1;
-        slider.scrollLeft = window.scrollLeft - walk;
-      }}
-    >
-      {tabs.map((el, index) => (
-        <li
-          key={index}
-          onClick={(e) => {
-            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"
-          style={{
-            backgroundColor: activeTab === el.id ? "#92c1fc" : "#F1F6FF",
 
-            color: activeTab === el.id ? "#fff" : "#000",
+//   return (
-          }}
+//     <ul
-        >
+//       className="tabbar flex no-scrollbar overflow-x-scroll scrolling-touch"
-          <div className="h-full py-4" onClick={(e) => setActivateTab(el.id)}>
+//       onMouseDown={(e) => {
-            {el.name}
+//         const slider = window.document.querySelector(".tabbar");
-          </div>
+//         window.isDown = true;
-          {el.id ? (
+//         window.startX = e.pageX - slider.offsetLeft;
-            <img
+//         window.scrollLeft = slider.scrollLeft;
-              src={cancleIcon}
+//       }}
-              className="w-2 h-2 mr-2"
+//       onMouseLeave={(e) => {
-              alt=""
+//         window.isDown = false;
-              onClick={(e) => {
+//       }}
-                e.preventDefault();
+//       onMouseUp={(e) => {
-                delTab(el.id);
+//         window.isDown = false;
-              }}
+//       }}
-            />
+//       onMouseMove={(e) => {
-          ) : null}
+//         const slider = window.document.querySelector(".tabbar");
-        </li>
+//         if (!window.isDown) return;
-      ))}
+//         e.preventDefault();
-    </ul>
+//         const x = e.pageX - slider.offsetLeft;
-  );
+//         const walk = (x - window.startX) * 1;
-}
+//         slider.scrollLeft = window.scrollLeft - walk;
+//       }}
+//     >
+//       {tabs.map((el, index) => (
+//         <li
+//           key={index}
+//           onClick={(e) => {
+//             if (window.isDown) return e.preventDefault();
+//           }}
+//           aria-current="page"
+//           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-2" onClick={(e) => setActivateTab(el.id)}>
+//             {el.name}
+//           </div>
+//           {el.id ? (
+//             <img
+//               src={cancleIcon}
+//               className="w-2 mr-3"
+//               alt=""
+//               onClick={(e) => {
+//                 e.preventDefault();
+//                 delTab(el.id);
+//               }}
+//             />
+//           ) : null}
+//         </li>
+//       ))}
+//     </ul>
+//   );
+// }
 
 ReactTable4.defaultProps = {
   breadCrumbs: [

src/components/ReactTable4/index.scss

@@ -8,9 +8,10 @@
   -ms-overflow-style: none; /* IE and Edge */
   scrollbar-width: none; /* Firefox */
 }
-.tabbar{
+.tabbar {
   cursor: pointer;
 }
-.active2 ,.active2 li a{
+.active2,
+.active2 li a {
   cursor: move !important;
 }