1import { ColumnDef, flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table"
 2
 3import {
 4	Table,
 5	TableBody,
 6	TableCell,
 7	TableHead,
 8	TableHeader,
 9	TableRow,
10} from "@/components/ui/table"
11
12interface DataTableProps<TData, TValue> {
13	columns: ColumnDef<TData, TValue>[]
14	data: TData[]
15}
16
17export function DataTable<TData, TValue>({ columns, data }: DataTableProps<TData, TValue>) {
18	const table = useReactTable({
19		data,
20		columns,
21		getCoreRowModel: getCoreRowModel(),
22	})
23
24	return (
25		<div className="rounded-md border">
26			<Table>
27				<TableHeader>
28					{table.getHeaderGroups().map((headerGroup) => (
29						<TableRow key={headerGroup.id}>
30							{headerGroup.headers.map((header) => {
31								return (
32									<TableHead key={header.id}>
33										{header.isPlaceholder
34											? null
35											: flexRender(header.column.columnDef.header, header.getContext())}
36									</TableHead>
37								)
38							})}
39						</TableRow>
40					))}
41				</TableHeader>
42				<TableBody>
43					{table.getRowModel().rows?.length ? (
44						table.getRowModel().rows.map((row) => (
45							<TableRow key={row.id} data-state={row.getIsSelected() && "selected"}>
46								{row.getVisibleCells().map((cell) => (
47									<TableCell key={cell.id}>
48										{flexRender(cell.column.columnDef.cell, cell.getContext())}
49									</TableCell>
50								))}
51							</TableRow>
52						))
53					) : (
54						<TableRow>
55							<TableCell colSpan={columns.length} className="h-24 text-center">
56								No results.
57							</TableCell>
58						</TableRow>
59					)}
60				</TableBody>
61			</Table>
62		</div>
63	)
64}