جدول داده (Data Table)

1"use client";
2
3import {
4  ColumnDef,
5  flexRender,
6  getCoreRowModel,
7  useReactTable,
8} from "@tanstack/react-table";
9import {
10  Table,
11  TableBody,
12  TableCell,
13  TableHead,
14  TableHeader,
15  TableRow,
16} from "@/components/ui/table";
17
18interface Payment {
19  id: string;
20  amount: number;
21  status: "موفق" | "در انتظار" | "ناموفق" | "در حال پردازش";
22  email: string;
23}
24
25const columns: ColumnDef<Payment>[] = [
26  {
27    accessorKey: "status",
28    header: "وضعیت",
29  },
30  {
31    accessorKey: "email",
32    header: "ایمیل",
33  },
34  {
35    accessorKey: "amount",
36    header: () => <div className="text-end">مبلغ</div>,
37    cell: ({ row }) => {
38      const amount = parseFloat(row.getValue("amount"));
39      const formatted = new Intl.NumberFormat("fa-IR").format(amount);
40      return <div className="text-end font-medium">{formatted} تومان</div>;
41    },
42  },
43];
44
45interface DataTableProps<TData, TValue> {
46  columns: ColumnDef<TData, TValue>[];
47  data: TData[];
48}
49
50function DataTable<TData, TValue>({
51  columns,
52  data,
53}: DataTableProps<TData, TValue>) {
54  const table = useReactTable({
55    data,
56    columns,
57    getCoreRowModel: getCoreRowModel(),
58  });
59
60  return (
61    <div className="overflow-hidden rounded-md border">
62      <Table>
63        <TableHeader>
64          {table.getHeaderGroups().map((headerGroup) => (
65            <TableRow key={headerGroup.id}>
66              {headerGroup.headers.map((header) => (
67                <TableHead key={header.id}>
68                  {header.isPlaceholder
69                    ? null
70                    : flexRender(
71                        header.column.columnDef.header,
72                        header.getContext()
73                      )}
74                </TableHead>
75              ))}
76            </TableRow>
77          ))}
78        </TableHeader>
79        <TableBody>
80          {table.getRowModel().rows?.length ? (
81            table.getRowModel().rows.map((row) => (
82              <TableRow key={row.id}>
83                {row.getVisibleCells().map((cell) => (
84                  <TableCell key={cell.id}>
85                    {flexRender(
86                      cell.column.columnDef.cell,
87                      cell.getContext()
88                    )}
89                  </TableCell>
90                ))}
91              </TableRow>
92            ))
93          ) : (
94            <TableRow>
95              <TableCell
96                colSpan={columns.length}
97                className="h-24 text-center"
98              >
99                نتیجه‌ای یافت نشد.
100              </TableCell>
101            </TableRow>
102          )}
103        </TableBody>
104      </Table>
105    </div>
106  );
107}

1"use client";
2
3import * as React from "react";
4import {
5  ColumnDef,
6  ColumnFiltersState,
7  SortingState,
8  VisibilityState,
9  flexRender,
10  getCoreRowModel,
11  getFilteredRowModel,
12  getPaginationRowModel,
13  getSortedRowModel,
14  useReactTable,
15} from "@tanstack/react-table";
16import { ArrowUpDown, MoreHorizontal } from "lucide-react";
17import { Badge } from "@/components/ui/badge";
18import { Button } from "@/components/ui/button";
19import { Checkbox } from "@/components/ui/checkbox";
20import {
21  DropdownMenu,
22  DropdownMenuCheckboxItem,
23  DropdownMenuContent,
24  DropdownMenuItem,
25  DropdownMenuLabel,
26  DropdownMenuSeparator,
27  DropdownMenuTrigger,
28} from "@/components/ui/dropdown-menu";
29import { Input } from "@/components/ui/input";
30import {
31  Table,
32  TableBody,
33  TableCell,
34  TableHead,
35  TableHeader,
36  TableRow,
37} from "@/components/ui/table";
38
39// ستون‌ها و داده‌ها مشابه مثال پایه، با اضافه شدن
40// انتخاب ردیف، مرتب‌سازی، فیلتر و عملیات ردیف
41
42export default function FullExample() {
43  const [sorting, setSorting] = React.useState<SortingState>([]);
44  const [columnFilters, setColumnFilters] =
45    React.useState<ColumnFiltersState>([]);
46  const [columnVisibility, setColumnVisibility] =
47    React.useState<VisibilityState>({});
48  const [rowSelection, setRowSelection] = React.useState({});
49
50  const table = useReactTable({
51    data,
52    columns,
53    onSortingChange: setSorting,
54    onColumnFiltersChange: setColumnFilters,
55    getCoreRowModel: getCoreRowModel(),
56    getPaginationRowModel: getPaginationRowModel(),
57    getSortedRowModel: getSortedRowModel(),
58    getFilteredRowModel: getFilteredRowModel(),
59    onColumnVisibilityChange: setColumnVisibility,
60    onRowSelectionChange: setRowSelection,
61    state: { sorting, columnFilters, columnVisibility, rowSelection },
62  });
63
64  return (
65    <div>
66      {/* فیلتر و نمایش ستون‌ها */}
67      <div className="flex items-center gap-4 py-4">
68        <Input
69          placeholder="فیلتر ایمیل..."
70          value={
71            (table.getColumn("email")?.getFilterValue() as string) ?? ""
72          }
73          onChange={(event) =>
74            table.getColumn("email")?.setFilterValue(event.target.value)
75          }
76          className="max-w-sm"
77        />
78        <DropdownMenu>
79          <DropdownMenuTrigger asChild>
80            <Button variant="outline" className="ms-auto">
81              ستون‌ها
82            </Button>
83          </DropdownMenuTrigger>
84          <DropdownMenuContent align="end">
85            {table
86              .getAllColumns()
87              .filter((column) => column.getCanHide())
88              .map((column) => (
89                <DropdownMenuCheckboxItem
90                  key={column.id}
91                  checked={column.getIsVisible()}
92                  onCheckedChange={(value) =>
93                    column.toggleVisibility(!!value)
94                  }
95                >
96                  {column.id}
97                </DropdownMenuCheckboxItem>
98              ))}
99          </DropdownMenuContent>
100        </DropdownMenu>
101      </div>
102
103      {/* جدول */}
104      <div className="overflow-hidden rounded-md border">
105        <Table>...</Table>
106      </div>
107
108      {/* صفحه‌بندی */}
109      <div className="flex items-center justify-between py-4">
110        <div className="text-sm text-muted-foreground">
111          {table.getFilteredSelectedRowModel().rows.length} از{" "}
112          {table.getFilteredRowModel().rows.length} ردیف انتخاب شده.
113        </div>
114        <div className="flex items-center gap-2">
115          <Button
116            variant="outline"
117            size="sm"
118            onClick={() => table.previousPage()}
119            disabled={!table.getCanPreviousPage()}
120          >
121            قبلی
122          </Button>
123          <Button
124            variant="outline"
125            size="sm"
126            onClick={() => table.nextPage()}
127            disabled={!table.getCanNextPage()}
128          >
129            بعدی
130          </Button>
131        </div>
132      </div>
133    </div>
134  );
135}