first commit

frontend/components/ui/data-table.tsx

@@ -0,0 +1,134 @@
+"use client"
+
+import * as React from "react"
+import {
+    ColumnDef,
+    flexRender,
+    getCoreRowModel,
+    useReactTable,
+} from "@tanstack/react-table"
+
+import {
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from "@/components/ui/table"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { ChevronLeft, ChevronRight } from "lucide-react"
+
+interface DataTableProps<TData, TValue> {
+    columns: ColumnDef<TData, TValue>[]
+    data: TData[]
+    searchKey?: string
+    onSearch?: (value: string) => void
+    pageCount?: number
+    page?: number
+    onPageChange?: (page: number) => void
+}
+
+export function DataTable<TData, TValue>({
+    columns,
+    data,
+    searchKey,
+    onSearch,
+    pageCount,
+    page,
+    onPageChange,
+}: DataTableProps<TData, TValue>) {
+    // eslint-disable-next-line react-hooks/incompatible-library
+    const table = useReactTable({
+        data: data || [],
+        columns,
+        getCoreRowModel: getCoreRowModel(),
+        manualPagination: true,
+        pageCount: pageCount,
+    })
+
+    return (
+        <div className="space-y-4">
+            {searchKey && onSearch && (
+                <div className="flex items-center py-4">
+                    <Input
+                        placeholder="Ara..."
+                        onChange={(event) => onSearch(event.target.value)}
+                        className="max-w-sm"
+                    />
+                </div>
+            )}
+            <div className="rounded-md border">
+                <Table>
+                    <TableHeader>
+                        {table.getHeaderGroups().map((headerGroup) => (
+                            <TableRow key={headerGroup.id}>
+                                {headerGroup.headers.map((header) => {
+                                    return (
+                                        <TableHead key={header.id}>
+                                            {header.isPlaceholder
+                                                ? null
+                                                : flexRender(
+                                                    header.column.columnDef.header,
+                                                    header.getContext()
+                                                )}
+                                        </TableHead>
+                                    )
+                                })}
+                            </TableRow>
+                        ))}
+                    </TableHeader>
+                    <TableBody>
+                        {table.getRowModel().rows?.length ? (
+                            table.getRowModel().rows.map((row) => (
+                                <TableRow
+                                    key={row.id}
+                                    data-state={row.getIsSelected() && "selected"}
+                                >
+                                    {row.getVisibleCells().map((cell) => (
+                                        <TableCell key={cell.id}>
+                                            {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                                        </TableCell>
+                                    ))}
+                                </TableRow>
+                            ))
+                        ) : (
+                            <TableRow>
+                                <TableCell colSpan={columns.length} className="h-24 text-center">
+                                    Sonuç bulunamadı.
+                                </TableCell>
+                            </TableRow>
+                        )}
+                    </TableBody>
+                </Table>
+            </div>
+
+            {(pageCount !== undefined && page !== undefined && onPageChange) && (
+                <div className="flex items-center justify-end space-x-2 py-4">
+                    <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => onPageChange(Math.max(page - 1, 1))}
+                        disabled={page === 1}
+                    >
+                        <ChevronLeft className="h-4 w-4" />
+                        Önceki
+                    </Button>
+                    <div className="text-sm text-muted-foreground">
+                        Sayfa {page} / {pageCount || 1}
+                    </div>
+                    <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => onPageChange(Math.min(page + 1, pageCount || 1))}
+                        disabled={page >= (pageCount || 1)}
+                    >
+                        Sonraki
+                        <ChevronRight className="h-4 w-4" />
+                    </Button>
+                </div>
+            )}
+        </div>
+    )
+}