✨ search, filter & paginate sites table

2026-04-04 20:59:11 +00:00 · 2026-01-31 03:02:39 +01:00
parent 066305b095
commit cda6b67bef
6 changed files with 223 additions and 37 deletions
--- a/src/components/ColumnFilterButton.tsx
+++ b/src/components/ColumnFilterButton.tsx
@@ -0,0 +1,126 @@
+import { useState } from "react";
+import { Button } from "@app/components/ui/button";
+import {
+    Popover,
+    PopoverContent,
+    PopoverTrigger
+} from "@app/components/ui/popover";
+import {
+    Command,
+    CommandEmpty,
+    CommandGroup,
+    CommandInput,
+    CommandItem,
+    CommandList
+} from "@app/components/ui/command";
+import { CheckIcon, ChevronDownIcon, Funnel } from "lucide-react";
+import { cn } from "@app/lib/cn";
+import { Badge } from "./ui/badge";
+
+interface FilterOption {
+    value: string;
+    label: string;
+}
+
+interface ColumnFilterButtonProps {
+    options: FilterOption[];
+    selectedValue?: string;
+    onValueChange: (value: string | undefined) => void;
+    placeholder?: string;
+    searchPlaceholder?: string;
+    emptyMessage?: string;
+    className?: string;
+    label: string;
+}
+
+export function ColumnFilterButton({
+    options,
+    selectedValue,
+    onValueChange,
+    placeholder,
+    searchPlaceholder = "Search...",
+    emptyMessage = "No options found",
+    className,
+    label
+}: ColumnFilterButtonProps) {
+    const [open, setOpen] = useState(false);
+
+    const selectedOption = options.find(
+        (option) => option.value === selectedValue
+    );
+
+    return (
+        <Popover open={open} onOpenChange={setOpen}>
+            <PopoverTrigger asChild>
+                <Button
+                    variant="ghost"
+                    role="combobox"
+                    aria-expanded={open}
+                    className={cn(
+                        "justify-between text-sm h-8 px-2",
+                        !selectedValue && "text-muted-foreground",
+                        className
+                    )}
+                >
+                    <div className="flex items-center gap-2">
+                        {label}
+
+                        <Funnel className="size-4 flex-none" />
+
+                        {selectedOption && (
+                            <Badge className="truncate" variant="secondary">
+                                {selectedOption.label}
+                            </Badge>
+                        )}
+                    </div>
+                </Button>
+            </PopoverTrigger>
+            <PopoverContent className="p-0 w-50" align="start">
+                <Command>
+                    <CommandInput placeholder={searchPlaceholder} />
+                    <CommandList>
+                        <CommandEmpty>{emptyMessage}</CommandEmpty>
+                        <CommandGroup>
+                            {/* Clear filter option */}
+                            {selectedValue && (
+                                <CommandItem
+                                    onSelect={() => {
+                                        onValueChange(undefined);
+                                        setOpen(false);
+                                    }}
+                                    className="text-muted-foreground"
+                                >
+                                    Clear filter
+                                </CommandItem>
+                            )}
+                            {options.map((option) => (
+                                <CommandItem
+                                    key={option.value}
+                                    value={option.label}
+                                    onSelect={() => {
+                                        onValueChange(
+                                            selectedValue === option.value
+                                                ? undefined
+                                                : option.value
+                                        );
+                                        setOpen(false);
+                                    }}
+                                >
+                                    <CheckIcon
+                                        className={cn(
+                                            "mr-2 h-4 w-4",
+                                            selectedValue === option.value
+                                                ? "opacity-100"
+                                                : "opacity-0"
+                                        )}
+                                    />
+                                    {option.label}
+                                </CommandItem>
+                            ))}
+                        </CommandGroup>
+                    </CommandList>
+                </Command>
+            </PopoverContent>
+        </Popover>
+    );
+}