feat: make notifications sortable

app/client/modules/notifications/routes/notifications.tsx

@@ -1,6 +1,18 @@
 import { useSuspenseQuery } from "@tanstack/react-query";
+import {
+	flexRender,
+	getCoreRowModel,
+	getFilteredRowModel,
+	getSortedRowModel,
+	type ColumnDef,
+	type ColumnFiltersState,
+	type SortingState,
+	useReactTable,
+} from "@tanstack/react-table";
 import { Bell, Plus, RotateCcw } from "lucide-react";
 import { useState } from "react";
+import { listNotificationDestinationsOptions } from "~/client/api-client/@tanstack/react-query.gen";
+import { DataTableSortHeader } from "~/client/components/data-table-sort-header";
 import { EmptyState } from "~/client/components/empty-state";
 import { StatusDot } from "~/client/components/status-dot";
 import { Button } from "~/client/components/ui/button";
@@ -8,20 +20,47 @@ import { Card } from "~/client/components/ui/card";
 import { Input } from "~/client/components/ui/input";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "~/client/components/ui/select";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "~/client/components/ui/table";
-import { listNotificationDestinationsOptions } from "~/client/api-client/@tanstack/react-query.gen";
 import { useNavigate } from "@tanstack/react-router";
 import { cn } from "~/client/lib/utils";
 
-export function NotificationsPage() {
+type NotificationRow = {
-	const [searchQuery, setSearchQuery] = useState("");
+	id: number;
-	const [typeFilter, setTypeFilter] = useState("");
+	name: string;
-	const [statusFilter, setStatusFilter] = useState("");
+	type: "email" | "slack" | "discord" | "gotify" | "ntfy" | "pushover" | "telegram" | "custom" | "generic";
+	enabled: boolean;
+};
 
-	const clearFilters = () => {
+const notificationColumns: ColumnDef<NotificationRow>[] = [
-		setSearchQuery("");
+	{
-		setTypeFilter("");
+		accessorKey: "name",
-		setStatusFilter("");
+		header: ({ column }) => <DataTableSortHeader column={column} title="Name" sortDirection={column.getIsSorted()} />,
-	};
+		cell: ({ row }) => row.original.name,
+	},
+	{
+		accessorKey: "type",
+		header: ({ column }) => <DataTableSortHeader column={column} title="Type" sortDirection={column.getIsSorted()} />,
+		cell: ({ row }) => row.original.type,
+		filterFn: (row, id, value) => row.getValue(id) === value,
+	},
+	{
+		accessorFn: (row) => (row.enabled ? "enabled" : "disabled"),
+		id: "status",
+		header: ({ column }) => (
+			<DataTableSortHeader column={column} title="Status" sortDirection={column.getIsSorted()} center />
+		),
+		cell: ({ row }) => (
+			<StatusDot
+				variant={row.original.enabled ? "success" : "neutral"}
+				label={row.original.enabled ? "Enabled" : "Disabled"}
+			/>
+		),
+		filterFn: (row, id, value) => row.getValue(id) === value,
+	},
+];
+
+export function NotificationsPage() {
+	const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
+	const [sorting, setSorting] = useState<SortingState>([]);
 
 	const navigate = useNavigate();
 
@@ -29,15 +68,24 @@ export function NotificationsPage() {
 		...listNotificationDestinationsOptions(),
 	});
 
-	const filteredNotifications = data.filter((notification) => {
+	const table = useReactTable({
-		const matchesSearch = notification.name.toLowerCase().includes(searchQuery.toLowerCase());
+		data,
-		const matchesType = !typeFilter || notification.type === typeFilter;
+		columns: notificationColumns,
-		const matchesStatus = !statusFilter || (statusFilter === "enabled" ? notification.enabled : !notification.enabled);
+		state: { columnFilters, sorting },
-		return matchesSearch && matchesType && matchesStatus;
+		onColumnFiltersChange: setColumnFilters,
+		onSortingChange: setSorting,
+		getCoreRowModel: getCoreRowModel(),
+		getFilteredRowModel: getFilteredRowModel(),
+		getSortedRowModel: getSortedRowModel(),
 	});
 
+	const rows = table.getRowModel().rows;
+	const hasFilters = columnFilters.length > 0;
+
+	const clearFilters = () => table.resetColumnFilters();
+
 	const hasNoNotifications = data.length === 0;
-	const hasNoFilteredNotifications = filteredNotifications.length === 0 && !hasNoNotifications;
+	const hasNoFilteredNotifications = rows.length === 0 && !hasNoNotifications;
 
 	if (hasNoNotifications) {
 		return (
@@ -55,6 +103,10 @@ export function NotificationsPage() {
 		);
 	}
 
+	const search = (table.getColumn("name")?.getFilterValue() as string) ?? "";
+	const type = (table.getColumn("type")?.getFilterValue() as string) ?? "";
+	const status = (table.getColumn("status")?.getFilterValue() as string) ?? "";
+
 	return (
 		<Card className="p-0 gap-0">
 			<div className="flex flex-col lg:flex-row items-stretch lg:items-center gap-2 md:justify-between p-4 bg-card-header py-4">
@@ -62,10 +114,10 @@ export function NotificationsPage() {
 					<Input
 						className="w-full lg:w-45 min-w-45"
 						placeholder="Search…"
-						value={searchQuery}
+						value={search}
-						onChange={(e) => setSearchQuery(e.target.value)}
+						onChange={(e) => table.getColumn("name")?.setFilterValue(e.target.value)}
 					/>
-					<Select value={typeFilter} onValueChange={setTypeFilter}>
+					<Select value={type} onValueChange={(value) => table.getColumn("type")?.setFilterValue(value)}>
 						<SelectTrigger className="w-full lg:w-45 min-w-45">
 							<SelectValue placeholder="All types" />
 						</SelectTrigger>
@@ -80,7 +132,7 @@ export function NotificationsPage() {
 							<SelectItem value="custom">Custom</SelectItem>
 						</SelectContent>
 					</Select>
-					<Select value={statusFilter} onValueChange={setStatusFilter}>
+					<Select value={status} onValueChange={(value) => table.getColumn("status")?.setFilterValue(value)}>
 						<SelectTrigger className="w-full lg:w-45 min-w-45">
 							<SelectValue placeholder="All status" />
 						</SelectTrigger>
@@ -89,7 +141,7 @@ export function NotificationsPage() {
 							<SelectItem value="disabled">Disabled</SelectItem>
 						</SelectContent>
 					</Select>
-					{(searchQuery || typeFilter || statusFilter) && (
+					{hasFilters && (
 						<Button onClick={clearFilters} className="w-full lg:w-auto mt-2 lg:mt-0 lg:ml-2">
 							<RotateCcw className="h-4 w-4 mr-2" />
 							Clear filters
@@ -104,11 +156,22 @@ export function NotificationsPage() {
 			<div className="overflow-x-auto">
 				<Table className="border-t">
 					<TableHeader className="bg-card-header">
-						<TableRow>
+						{table.getHeaderGroups().map((headerGroup) => (
-							<TableHead className="w-25 uppercase">Name</TableHead>
+							<TableRow key={headerGroup.id}>
-							<TableHead className="uppercase text-left">Type</TableHead>
+								{headerGroup.headers.map((header) => (
-							<TableHead className="uppercase text-center">Status</TableHead>
+									<TableHead
-						</TableRow>
+										key={header.id}
+										className={cn("uppercase", {
+											"w-25": header.column.id === "name",
+											"text-left": header.column.id === "type",
+											"text-center": header.column.id === "status",
+										})}
+									>
+										{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
+									</TableHead>
+								))}
+							</TableRow>
+						))}
 					</TableHeader>
 					<TableBody>
 						<TableRow className={cn({ hidden: !hasNoFilteredNotifications })}>
@@ -122,30 +185,38 @@ export function NotificationsPage() {
 								</div>
 							</TableCell>
 						</TableRow>
-						{filteredNotifications.map((notification) => (
+						{rows.map((row) => (
 							<TableRow
-								key={notification.id}
+								key={row.original.id}
 								className="hover:bg-accent/50 hover:cursor-pointer h-12"
-								onClick={() => navigate({ to: `/notifications/${notification.id}` })}
+								onClick={() => navigate({ to: `/notifications/${row.original.id}` })}
 							>
-								<TableCell className="font-medium text-strong-accent">{notification.name}</TableCell>
+								{row.getVisibleCells().map((cell) => (
-								<TableCell className="capitalize text-muted-foreground">{notification.type}</TableCell>
+									<TableCell
-								<TableCell className="text-center">
+										key={cell.id}
-									<StatusDot
+										className={cn({
-										variant={notification.enabled ? "success" : "neutral"}
+											"font-medium text-strong-accent": cell.column.id === "name",
-										label={notification.enabled ? "Enabled" : "Disabled"}
+											"capitalize text-muted-foreground": cell.column.id === "type",
-									/>
+											"text-center": cell.column.id === "status",
-								</TableCell>
+										})}
+									>
+										{flexRender(cell.column.columnDef.cell, cell.getContext())}
+									</TableCell>
+								))}
 							</TableRow>
 						))}
 					</TableBody>
 				</Table>
 			</div>
 			<div className="px-4 py-2 text-sm text-muted-foreground bg-card-header flex justify-end border-t">
-				<span>
+				{hasNoFilteredNotifications ? (
-					<span className="text-strong-accent">{filteredNotifications.length}</span> destination
+					"No destinations match filters."
-					{filteredNotifications.length !== 1 ? "s" : ""}
+				) : (
-				</span>
+					<span>
+						<span className="text-strong-accent">{rows.length}</span> destination
+						{rows.length !== 1 ? "s" : ""}
+					</span>
+				)}
 			</div>
 		</Card>
 	);