|
|
|
import React, { useState } from "react";
|
|
|
|
|
|
|
|
import arrowDown from "./arrow-down.svg";
|
|
|
|
import arrowUp from "./arrow-up.svg";
|
|
|
|
|
|
|
|
const TableDesign1 = ({ tableItems, tableSubItems }) => {
|
|
|
|
const [sortedField, setSortedField] = useState(null);
|
|
|
|
|
|
|
|
if (sortedField !== null) {
|
|
|
|
tableSubItems.sort((a, b) => {
|
|
|
|
if (a.payedPrice > b.payedPrice) {
|
|
|
|
return -1;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
|
|
<section className="w-8/12 mx-auto my-10">
|
|
|
|
<div className="flex flex-col">
|
|
|
|
<div className="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
|
|
|
|
<div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
|
|
|
|
<div className="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
|
|
|
|
<table className="min-w-full divide-y divide-gray-200">
|
|
|
|
<thead className="bg-gray-50">
|
|
|
|
{tableItems.map((tableItem, index) => (
|
|
|
|
<tr className="" key={index}>
|
|
|
|
<th
|
|
|
|
scope="col"
|
|
|
|
className="text-blue-400 font-light text-right text-sm p-4"
|
|
|
|
>
|
|
|
|
{tableItem.title}
|
|
|
|
</th>
|
|
|
|
<th
|
|
|
|
scope=""
|
|
|
|
className="text-blue-400 font-light text-right text-sm p-4 "
|
|
|
|
>
|
|
|
|
<div className="flex flex-row items-center">
|
|
|
|
{tableItem.status}
|
|
|
|
<div className="mr-3 flex flex-col">
|
|
|
|
<img
|
|
|
|
src={arrowUp}
|
|
|
|
alt=""
|
|
|
|
className="w-4 cursor-pointer"
|
|
|
|
/>
|
|
|
|
<img
|
|
|
|
src={arrowUp}
|
|
|
|
alt=""
|
|
|
|
className="w-4 cursor-pointer rotate-180"
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</th>
|
|
|
|
<th
|
|
|
|
scope="col"
|
|
|
|
className="text-blue-400 font-light text-right text-sm p-4"
|
|
|
|
>
|
|
|
|
<div className="flex flex-row items-center">
|
|
|
|
{tableItem.date}
|
|
|
|
<div className="mr-3 flex flex-col">
|
|
|
|
<img
|
|
|
|
src={arrowUp}
|
|
|
|
alt=""
|
|
|
|
className="w-4 cursor-pointer"
|
|
|
|
// onClick={() => setSortedField}
|
|
|
|
/>
|
|
|
|
<img
|
|
|
|
src={arrowUp}
|
|
|
|
alt=""
|
|
|
|
className="w-4 cursor-pointer rotate-180"
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</th>
|
|
|
|
<th
|
|
|
|
scope="col"
|
|
|
|
className="text-blue-400 font-light text-right text-sm p-4"
|
|
|
|
>
|
|
|
|
<div className="flex flex-row items-center">
|
|
|
|
{tableItem.payedPrice}
|
|
|
|
<div className="mr-3 flex flex-col">
|
|
|
|
<img
|
|
|
|
src={arrowUp}
|
|
|
|
alt=""
|
|
|
|
className="w-4 cursor-pointer"
|
|
|
|
onClick={() => setSortedField()}
|
|
|
|
/>
|
|
|
|
<img
|
|
|
|
src={arrowUp}
|
|
|
|
alt=""
|
|
|
|
className="w-4 cursor-pointer rotate-180"
|
|
|
|
// onClick={() => setSortedField()}
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</th>
|
|
|
|
</tr>
|
|
|
|
))}
|
|
|
|
</thead>
|
|
|
|
<tbody className="bg-white divide-y divide-gray-200">
|
|
|
|
{tableSubItems.map((tableSubItem, i) => (
|
|
|
|
<tr key={i}>
|
|
|
|
<td className="p-4 whitespace-nowrap text-base font-light">
|
|
|
|
{tableSubItem.title}
|
|
|
|
</td>
|
|
|
|
<td
|
|
|
|
className={`p-4 whitespace-nowrap text-base font-light
|
|
|
|
${
|
|
|
|
tableSubItem.status
|
|
|
|
? "text-green-400"
|
|
|
|
: "text-red-400"
|
|
|
|
}`}
|
|
|
|
>
|
|
|
|
{tableSubItem.status ? "فعال" : "غیر فعال"}
|
|
|
|
</td>
|
|
|
|
<td className="p-4 whitespace-nowrap text-base font-light">
|
|
|
|
{tableSubItem.date}
|
|
|
|
</td>
|
|
|
|
<td className="p-4 whitespace-nowrap text-base font-light">
|
|
|
|
{tableSubItem.payedPrice} ریال
|
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
))}
|
|
|
|
</tbody>
|
|
|
|
</table>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export default TableDesign1;
|
|
|
|
|
|
|
|
TableDesign1.defaultProps = {
|
|
|
|
tableItems: [
|
|
|
|
{
|
|
|
|
title: "عنوان",
|
|
|
|
status: "وضعیت",
|
|
|
|
date: "تاریخ",
|
|
|
|
payedPrice: "مبلغ پرداختی",
|
|
|
|
},
|
|
|
|
],
|
|
|
|
tableSubItems: [
|
|
|
|
{
|
|
|
|
title: "مایکروویر سامسونگ مدل",
|
|
|
|
status: true,
|
|
|
|
date: "1400/09/21",
|
|
|
|
payedPrice: 73,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
title: "آزمون آنلاین درس علوم تجربی",
|
|
|
|
status: false,
|
|
|
|
date: "1400/09/21",
|
|
|
|
payedPrice: 75,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
title: "مایکروویر سامسونگ مدل",
|
|
|
|
status: true,
|
|
|
|
date: "1400/09/21",
|
|
|
|
payedPrice: 25,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
title: "آزمون آنلاین درس علوم تجربی",
|
|
|
|
status: false,
|
|
|
|
date: "1400/09/21",
|
|
|
|
payedPrice: 27,
|
|
|
|
},
|
|
|
|
],
|
|
|
|
};
|