feat(settings): final migration of settings and edits added

frontend/src/lib/tableStuff/GenericColumn.tsx

@@ -0,0 +1,26 @@
+import { createColumnHelper } from "@tanstack/react-table";
+import { ArrowDown, ArrowUp } from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+export const GenericColumn = ({ columnName }: { columnName: string }) => {
+	const columnHelper = createColumnHelper();
+
+	return columnHelper.accessor(`${columnName}`, {
+		header: ({ column }) => {
+			return (
+				<Button
+					variant="ghost"
+					onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+				>
+					<span className="flex flex-row gap-2">{`${columnName.toUpperCase()}`}</span>
+					{column.getIsSorted() === "asc" ? (
+						<ArrowUp className="ml-2 h-4 w-4" />
+					) : (
+						<ArrowDown className="ml-2 h-4 w-4" />
+					)}
+				</Button>
+			);
+		},
+		cell: (i) => i.getValue(),
+	});
+};