diff --git a/src/components/ui/data-table.tsx b/src/components/ui/data-table.tsx
new file mode 100644
index 0000000..5c84542
--- /dev/null
+++ b/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>
+	)
+}