feat(component): add DataTable component

This commit introduces a new DataTable component in the UI component library. It includes features like column sorting, pagination, and customizable filtering. This reusable component is designed to handle and display data tables across different parts of the application.

src/components/ui/data-table.tsx

@@ -0,0 +1,133 @@
+"use client"
+
+import {
+	type ColumnDef,
+	flexRender,
+	getCoreRowModel,
+	getPaginationRowModel,
+	type ColumnFiltersState,
+	getFilteredRowModel,
+	getSortedRowModel, type SortingState,
+	useReactTable,
+} from "@tanstack/react-table";
+
+import {
+	Table,
+	TableBody,
+	TableCell,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from "@/components/ui/table"
+import {Button} from "@/components/ui/button";
+import {useState} from "react";
+import {Input} from "@/components/ui/input";
+
+interface DataTableProps<TData, TValue> {
+	columns: ColumnDef<TData, TValue>[]
+	data: TData[]
+	fieldToFilter: string
+}
+
+export function DataTable<TData, TValue>({
+																					 columns,
+																					 data,
+																					 fieldToFilter,
+																				 }: DataTableProps<TData, TValue>) {
+	const [sorting, setSorting] = useState<SortingState>([])
+	const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>(
+		[]
+	)
+
+	const table = useReactTable({
+		data,
+		columns,
+		getCoreRowModel: getCoreRowModel(),
+		getPaginationRowModel: getPaginationRowModel(),
+		onSortingChange: setSorting,
+		getSortedRowModel: getSortedRowModel(),
+		onColumnFiltersChange: setColumnFilters,
+		getFilteredRowModel: getFilteredRowModel(),
+		state: {
+			sorting,
+			columnFilters,
+		},
+	})
+
+	return (
+		<div className={"w-full"}>
+			<div className="flex items-center py-4">
+				<Input
+					placeholder={`Filter ${fieldToFilter}...`}
+					value={(table.getColumn(fieldToFilter)?.getFilterValue() as string) ?? ""}
+					onChange={(event) =>
+						table.getColumn(fieldToFilter)?.setFilterValue(event.target.value)
+					}
+					className="max-w-sm"
+				/>
+			</div>
+			<div className="rounded-md border w-full text-md">
+				<Table>
+					<TableHeader>
+						{table.getHeaderGroups().map((headerGroup) => (
+							<TableRow key={headerGroup.id}>
+								{headerGroup.headers.map((header) => {
+									return (
+										<TableHead key={header.id} className={"font-bold text-lg text-center"}>
+											{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} className={"text-center"}>
+											{flexRender(cell.column.columnDef.cell, cell.getContext())}
+										</TableCell>
+									))}
+								</TableRow>
+							))
+						) : (
+							<TableRow>
+								<TableCell colSpan={columns.length} className="h-24 text-center">
+									No results.
+								</TableCell>
+							</TableRow>
+						)}
+					</TableBody>
+				</Table>
+			</div>
+			<div className="flex items-center justify-end space-x-2 py-4">
+				<Button
+					variant="outline"
+					size="sm"
+					onClick={() => table.previousPage()}
+					disabled={!table.getCanPreviousPage()}
+				>
+					Previous
+				</Button>
+				<Button
+					variant="outline"
+					size="sm"
+					onClick={() => table.nextPage()}
+					disabled={!table.getCanNextPage()}
+				>
+					Next
+				</Button>
+			</div>
+		</div>
+	)
+}