master
mahdi andalib 3 years ago
parent 7ade942703
commit d06ceba048
  1. 9
      src/components/ReactTable4/BasicTable.js
  2. 556
      src/components/ReactTable4/EditRow.js
  3. 4
      src/components/ReactTable4/RenderRowSubComponent.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 ${
rows.length > 10 ? "w-full" : "hidden"
}`}
className={`bg-blue-900 ${rows.length > 5 ? "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")}

@ -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"
style={{ backgroundColor: "#FAFBFF" }}
className="flex flex-col border-r-4 border-blue-600 p-2"
style={{ backgroundColor: "#F1F5FE" }}
>
<div className="flex flex-row flex-wrap items-center">
{/* 1 */}
<div className="flex flex-row items-center mr-2 my-2">
{/* 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: "#EDF2FB" }}
style={{ backgroundColor: "#65A9FF" }}
></div>
<p
className="text-xs text-blue-400"
@ -21,301 +21,257 @@ const EditRow = ({ row, columns }) => {
>
نام و نام خانوادگی:
</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.name}
/>
</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" }}
>
تاریخ سفارش:
</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.order_date}
/>
</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" }}
>
مبلغ سفارش:
</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.order_price}
/>
</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" }}
>
شماره سفارش:
</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.order_number}
/>
</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" }}
>
شغل کاربر:
</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.user_job}
/>
</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>
<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={columns[5].Cell({ value: row.order_status })}
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>
<input
type="text"
style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
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 */}
<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.order_date}
/>
</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" }}>
مبلغ سفارش:
</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.order_price}
/>
</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" }}>
شماره سفارش:
</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.order_number}
/>
</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" }}>
شغل کاربر:
</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.user_job}
/>
</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>
<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={columns[5].Cell({ value: row.order_status })}
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>
);
};

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

Loading…
Cancel
Save