master
mahdi andalib 3 years ago
parent 7ade942703
commit d06ceba048
  1. 9
      src/components/ReactTable4/BasicTable.js
  2. 94
      src/components/ReactTable4/EditRow.js
  3. 4
      src/components/ReactTable4/RenderRowSubComponent.js

@ -38,7 +38,7 @@ const BasicTable = ({
activeTab, activeTab,
}) => { }) => {
const data = useMemo(() => MOCK_DATA, []); const data = useMemo(() => MOCK_DATA, []);
console.log(data); // console.log(data);
const [filtering, setFiltering] = useState(false); const [filtering, setFiltering] = useState(false);
@ -282,6 +282,7 @@ const BasicTable = ({
addTab={addTab} addTab={addTab}
row={row.original} row={row.original}
/> />
{console.log(row.original)}
</td> </td>
</tr> </tr>
) : null} ) : null}
@ -290,9 +291,7 @@ const BasicTable = ({
})} })}
</tbody> </tbody>
<tfoot <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) => ( {footerGroups.map((footerGroup, index) => (
<tr key={index} {...footerGroup.getFooterGroupProps()}> <tr key={index} {...footerGroup.getFooterGroupProps()}>
@ -300,7 +299,7 @@ const BasicTable = ({
<td <td
key={index} key={index}
{...column.getFooterProps} {...column.getFooterProps}
className="px-4 py-2 text-right text-xs" className="p-2 text-right text-xs"
style={{ color: "#fff" }} style={{ color: "#fff" }}
> >
{column.render("Footer")} {column.render("Footer")}

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

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

Loading…
Cancel
Save