arrow down left fixed

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>
   );

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

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"
   }
 ]