update

src/components/ReactTable4/BasicTable.js

@@ -38,7 +38,7 @@ const BasicTable = ({
   activeTab,
 }) => {
   const data = useMemo(() => MOCK_DATA, []);
-  console.log(data);
+  // console.log(data);
 
   const [filtering, setFiltering] = useState(false);
 
@@ -282,6 +282,7 @@ const BasicTable = ({
                             addTab={addTab}
                             row={row.original}
                           />
+                          {console.log(row.original)}
                         </td>
                       </tr>
                     ) : null}
@@ -290,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()}>
@@ -300,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")}

src/components/ReactTable4/EditRow.js

@@ -1,19 +1,19 @@
 import React from "react";
 
 const EditRow = ({ row, columns }) => {
-  console.log(columns);
+  // console.log(columns);
 
   return (
     <div
-      className="w-full flex flex-row items-center border-r-4 border-blue-600 p-2"
+      className="flex flex-col border-r-4 border-blue-600 p-2"
-      style={{ backgroundColor: "#FAFBFF" }}
+      style={{ backgroundColor: "#F1F5FE" }}
     >
-      <div className="flex flex-row flex-wrap items-center">
       {/* 1 */}
-        <div className="flex flex-row items-center mr-2 my-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: "#EDF2FB" }}
+            style={{ backgroundColor: "#65A9FF" }}
           ></div>
           <p
             className="text-xs text-blue-400"
@@ -21,11 +21,13 @@ const EditRow = ({ row, columns }) => {
           >
             نام و نام خانوادگی:
           </p>
+        </div>
         <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"
+          className="w-11/12 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 */}
@@ -34,10 +36,7 @@ const EditRow = ({ row, columns }) => {
           className="w-1 h-4 ml-1 rounded"
           style={{ backgroundColor: "#EDF2FB" }}
         ></div>
-          <p
+        <p className="text-xs text-blue-400" style={{ borderColor: "#65A9FF" }}>
-            className="text-xs text-blue-400"
-            style={{ borderColor: "#65A9FF" }}
-          >
           تاریخ سفارش:
         </p>
         <input
@@ -53,10 +52,7 @@ const EditRow = ({ row, columns }) => {
           className="w-1 h-4 ml-1 rounded"
           style={{ backgroundColor: "#EDF2FB" }}
         ></div>
-          <p
+        <p className="text-xs text-blue-400" style={{ borderColor: "#65A9FF" }}>
-            className="text-xs text-blue-400"
-            style={{ borderColor: "#65A9FF" }}
-          >
           مبلغ سفارش:
         </p>
         <input
@@ -72,10 +68,7 @@ const EditRow = ({ row, columns }) => {
           className="w-1 h-4 ml-1 rounded"
           style={{ backgroundColor: "#EDF2FB" }}
         ></div>
-          <p
+        <p className="text-xs text-blue-400" style={{ borderColor: "#65A9FF" }}>
-            className="text-xs text-blue-400"
-            style={{ borderColor: "#65A9FF" }}
-          >
           شماره سفارش:
         </p>
         <input
@@ -91,10 +84,7 @@ const EditRow = ({ row, columns }) => {
           className="w-1 h-4 ml-1 rounded"
           style={{ backgroundColor: "#EDF2FB" }}
         ></div>
-          <p
+        <p className="text-xs text-blue-400" style={{ borderColor: "#65A9FF" }}>
-            className="text-xs text-blue-400"
-            style={{ borderColor: "#65A9FF" }}
-          >
           شغل کاربر:
         </p>
         <input
@@ -110,10 +100,7 @@ const EditRow = ({ row, columns }) => {
           className="w-1 h-4 ml-1 rounded"
           style={{ backgroundColor: "#EDF2FB" }}
         ></div>
-          <p
+        <p className="text-xs text-blue-400" style={{ borderColor: "#65A9FF" }}>
-            className="text-xs text-blue-400"
-            style={{ borderColor: "#65A9FF" }}
-          >
           وضعیت سفارش:
         </p>
         <input
@@ -130,10 +117,7 @@ const EditRow = ({ row, columns }) => {
           className="w-1 h-4 ml-1 rounded"
           style={{ backgroundColor: "#EDF2FB" }}
         ></div>
-          <p
+        <p className="text-xs text-blue-400" style={{ borderColor: "#65A9FF" }}>
-            className="text-xs text-blue-400"
-            style={{ borderColor: "#65A9FF" }}
-          >
           سطح اهمیت:
         </p>
         <input
@@ -150,10 +134,7 @@ const EditRow = ({ row, columns }) => {
           className="w-1 h-4 ml-1 rounded"
           style={{ backgroundColor: "#EDF2FB" }}
         ></div>
-          <p
+        <p className="text-xs text-blue-400" style={{ borderColor: "#65A9FF" }}>
-            className="text-xs text-blue-400"
-            style={{ borderColor: "#65A9FF" }}
-          >
           محل تولد:
         </p>
         <input
@@ -169,10 +150,7 @@ const EditRow = ({ row, columns }) => {
           className="w-1 h-4 ml-1 rounded"
           style={{ backgroundColor: "#EDF2FB" }}
         ></div>
-          <p
+        <p className="text-xs text-blue-400" style={{ borderColor: "#65A9FF" }}>
-            className="text-xs text-blue-400"
-            style={{ borderColor: "#65A9FF" }}
-          >
           تلفن محل کار:
         </p>
         <input
@@ -188,10 +166,7 @@ const EditRow = ({ row, columns }) => {
           className="w-1 h-4 ml-1 rounded"
           style={{ backgroundColor: "#EDF2FB" }}
         ></div>
-          <p
+        <p className="text-xs text-blue-400" style={{ borderColor: "#65A9FF" }}>
-            className="text-xs text-blue-400"
-            style={{ borderColor: "#65A9FF" }}
-          >
           تحصیلات:
         </p>
         <input
@@ -207,10 +182,7 @@ const EditRow = ({ row, columns }) => {
           className="w-1 h-4 ml-1 rounded"
           style={{ backgroundColor: "#EDF2FB" }}
         ></div>
-          <p
+        <p className="text-xs text-blue-400" style={{ borderColor: "#65A9FF" }}>
-            className="text-xs text-blue-400"
-            style={{ borderColor: "#65A9FF" }}
-          >
           تاریخ تولد:
         </p>
         <input
@@ -226,10 +198,7 @@ const EditRow = ({ row, columns }) => {
           className="w-1 h-4 ml-1 rounded"
           style={{ backgroundColor: "#EDF2FB" }}
         ></div>
-          <p
+        <p className="text-xs text-blue-400" style={{ borderColor: "#65A9FF" }}>
-            className="text-xs text-blue-400"
-            style={{ borderColor: "#65A9FF" }}
-          >
           شغل:
         </p>
         <input
@@ -245,10 +214,7 @@ const EditRow = ({ row, columns }) => {
           className="w-1 h-4 ml-1 rounded"
           style={{ backgroundColor: "#EDF2FB" }}
         ></div>
-          <p
+        <p className="text-xs text-blue-400" style={{ borderColor: "#65A9FF" }}>
-            className="text-xs text-blue-400"
-            style={{ borderColor: "#65A9FF" }}
-          >
           دانشگاه:
         </p>
         <input
@@ -264,10 +230,7 @@ const EditRow = ({ row, columns }) => {
           className="w-1 h-4 ml-1 rounded"
           style={{ backgroundColor: "#EDF2FB" }}
         ></div>
-          <p
+        <p className="text-xs text-blue-400" style={{ borderColor: "#65A9FF" }}>
-            className="text-xs text-blue-400"
-            style={{ borderColor: "#65A9FF" }}
-          >
           رشته تحصیلی:
         </p>
         <input
@@ -283,10 +246,7 @@ const EditRow = ({ row, columns }) => {
           className="w-1 h-4 ml-1 rounded"
           style={{ backgroundColor: "#EDF2FB" }}
         ></div>
-          <p
+        <p className="text-xs text-blue-400" style={{ borderColor: "#65A9FF" }}>
-            className="text-xs text-blue-400"
-            style={{ borderColor: "#65A9FF" }}
-          >
           اخلاق:
         </p>
         <input
@@ -302,10 +262,7 @@ const EditRow = ({ row, columns }) => {
           className="w-1 h-4 ml-1 rounded"
           style={{ backgroundColor: "#EDF2FB" }}
         ></div>
-          <p
+        <p className="text-xs text-blue-400" style={{ borderColor: "#65A9FF" }}>
-            className="text-xs text-blue-400"
-            style={{ borderColor: "#65A9FF" }}
-          >
           نشانی:
         </p>
         <input
@@ -314,8 +271,7 @@ const EditRow = ({ row, columns }) => {
           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>{" "}
-      </div>
     </div>
   );
 };

src/components/ReactTable4/RenderRowSubComponent.js

@@ -1,8 +1,6 @@
 import React from "react";
 
-const RenderRowSubComponent = ({ columns, addTab, row, EditableCell }) => {
+const RenderRowSubComponent = ({ columns, addTab, row }) => {
-  console.log(row);
-
   return (
     <div
       className="w-full flex flex-row items-center border-r-4 border-blue-600 p-2 "