You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
170 lines
6.0 KiB
170 lines
6.0 KiB
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, |
|
}, |
|
], |
|
};
|
|
|