From 4ad4a5bbe9b3e009bf288c8c2b9bcddb74fc1408 Mon Sep 17 00:00:00 2001
From: mahdi andalib <andalibmahdi45@gmail.com>
Date: Tue, 15 Feb 2022 20:18:39 +0330
Subject: [PATCH] arrow down left fixed

---
 src/components/ReactTable4/BasicTable.js  | 19 ++++++++++++++-----
 src/components/ReactTable4/Buttons.js     |  6 ++++--
 src/components/ReactTable4/MOCK_DATA.json |  8 ++++----
 3 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/src/components/ReactTable4/BasicTable.js b/src/components/ReactTable4/BasicTable.js
index 97f8efd..6c65e69 100644
--- a/src/components/ReactTable4/BasicTable.js
+++ b/src/components/ReactTable4/BasicTable.js
@@ -272,7 +272,7 @@ const BasicTable = ({ settingsIcon }) => {
                 {row.isExpanded ? (
                   <tr>
                     <td colSpan={headerGroups[0].headers.length}>
-                      {renderRowSubComponent({ row: row.original })}
+                      {renderRowSubComponent({ rows: row.original })}
                       {/* {renderRowSubComponent({ row: row.values })} */}
                     </td>
                   </tr>
@@ -367,11 +367,20 @@ const BasicTable = ({ settingsIcon }) => {
   );
 };
 
-function renderRowSubComponent({ row }) {
+function renderRowSubComponent({ rows }) {
+  const persian = {
+    weight: "وزن",
+    pageNumber: "تعداد صفحات",
+    pageType: "نوع کاغذ",
+    bookNumber: "شماره شابک",
+    publisher: "انتشارات",
+    author: "نویسنده",
+    bookType: "قطع",
+    publishedYear: "سال انتشار",
+  };
   return (
-    <div className="pl-2 pr-5 bg-blue-200">
-      مبلغ: {row.history}
-      <br />
+    <div className="flex flex-row items-center bg-indigo-100 border-r-4 border-blue-600 p-2">
+      مبلغ: {rows.history}
       <button className="bg-blue-400">ویرایش</button>
     </div>
   );
diff --git a/src/components/ReactTable4/Buttons.js b/src/components/ReactTable4/Buttons.js
index b90a510..fa0ff92 100644
--- a/src/components/ReactTable4/Buttons.js
+++ b/src/components/ReactTable4/Buttons.js
@@ -7,11 +7,13 @@ import { useState } from "react";
 export function Buttons({ row }) {
   const [activeDetails, setActiveDetails] = useState(null);
   return (
-    <div className="flex flex-row items-center justify-end mx-1">
+    <div
+      className="flex flex-row items-center justify-end mx-1"
+      {...row.getToggleRowExpandedProps()}
+    >
       <button
         className="flex flex-row items-center justify-around  p-2 rounded border border-gray-300 mx-1"
         onClick={() => setActiveDetails(!activeDetails)}
-        {...row.getToggleRowExpandedProps()}
       >
         جزیات
         <img
diff --git a/src/components/ReactTable4/MOCK_DATA.json b/src/components/ReactTable4/MOCK_DATA.json
index 2b89ea5..3151d51 100644
--- a/src/components/ReactTable4/MOCK_DATA.json
+++ b/src/components/ReactTable4/MOCK_DATA.json
@@ -17,7 +17,7 @@
     "user-job": "مهندس ساختمان",
     "order-status": 2,
     "order-level": 2,
-    "history": "مهدی"
+    "history": "tggg"
   },
   {
     "name": "مک بوک پرو",
@@ -27,7 +27,7 @@
     "user-job": "مهندس ساختمان",
     "order-status": 3,
     "order-level": 3,
-    "history": "مهدی"
+    "history": "aaa"
   },
   {
     "name": "تبلت",
@@ -37,7 +37,7 @@
     "user-job": "مهندس ساختمان",
     "order-status": 4,
     "order-level": 4,
-    "history": "مهدی"
+    "history": "ff"
   },
   {
     "name": "کتاب جدید",
@@ -47,6 +47,6 @@
     "user-job": "طناز",
     "order-status": 5,
     "order-level": 5,
-    "history": "مهدی"
+    "history": "sfda"
   }
 ]