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 (
{tableItems.map((tableItem, index) => ( ))} {tableSubItems.map((tableSubItem, i) => ( ))}
{tableItem.title}
{tableItem.status}
{tableItem.date}
setSortedField} />
{tableItem.payedPrice}
setSortedField()} /> setSortedField()} />
{tableSubItem.title} {tableSubItem.status ? "فعال" : "غیر فعال"} {tableSubItem.date} {tableSubItem.payedPrice} ریال
); }; 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, }, ], };