جدول (Table)

1import {
2  Table,
3  TableBody,
4  TableCaption,
5  TableCell,
6  TableHead,
7  TableHeader,
8  TableRow,
9} from "@/components/ui/table";
10
11const invoices = [
12  {
13    invoice: "INV001",
14    paymentStatus: "پرداخت شده",
15    totalAmount: "۲۵۰,۰۰۰ تومان",
16    paymentMethod: "کارت اعتباری",
17  },
18  // ...
19];
20
21export default function BasicExample() {
22  return (
23    <Table>
24      <TableCaption>لیست فاکتورهای اخیر شما.</TableCaption>
25      <TableHeader>
26        <TableRow>
27          <TableHead className="w-[100px]">فاکتور</TableHead>
28          <TableHead>وضعیت</TableHead>
29          <TableHead>روش پرداخت</TableHead>
30          <TableHead className="text-end">مبلغ</TableHead>
31        </TableRow>
32      </TableHeader>
33      <TableBody>
34        {invoices.map((invoice) => (
35          <TableRow key={invoice.invoice}>
36            <TableCell className="font-medium">{invoice.invoice}</TableCell>
37            <TableCell>{invoice.paymentStatus}</TableCell>
38            <TableCell>{invoice.paymentMethod}</TableCell>
39            <TableCell className="text-end">{invoice.totalAmount}</TableCell>
40          </TableRow>
41        ))}
42      </TableBody>
43    </Table>
44  );
45}

1import {
2  Table,
3  TableBody,
4  TableCaption,
5  TableCell,
6  TableFooter,
7  TableHead,
8  TableHeader,
9  TableRow,
10} from "@/components/ui/table";
11
12const invoices = [
13  {
14    invoice: "INV001",
15    paymentStatus: "پرداخت شده",
16    totalAmount: "۲۵۰,۰۰۰ تومان",
17    paymentMethod: "کارت اعتباری",
18  },
19  // ...
20];
21
22export default function FooterExample() {
23  return (
24    <Table>
25      <TableCaption>لیست فاکتورهای اخیر شما.</TableCaption>
26      <TableHeader>
27        <TableRow>
28          <TableHead className="w-[100px]">فاکتور</TableHead>
29          <TableHead>وضعیت</TableHead>
30          <TableHead>روش پرداخت</TableHead>
31          <TableHead className="text-end">مبلغ</TableHead>
32        </TableRow>
33      </TableHeader>
34      <TableBody>
35        {invoices.map((invoice) => (
36          <TableRow key={invoice.invoice}>
37            <TableCell className="font-medium">{invoice.invoice}</TableCell>
38            <TableCell>{invoice.paymentStatus}</TableCell>
39            <TableCell>{invoice.paymentMethod}</TableCell>
40            <TableCell className="text-end">{invoice.totalAmount}</TableCell>
41          </TableRow>
42        ))}
43      </TableBody>
44      <TableFooter>
45        <TableRow>
46          <TableCell colSpan={3}>مجموع</TableCell>
47          <TableCell className="text-end">۷۵۰,۰۰۰ تومان</TableCell>
48        </TableRow>
49      </TableFooter>
50    </Table>
51  );
52}