✨ whole table filter

src/components/UserDevicesTable.tsx

@@ -699,16 +699,21 @@ export default function UserDevicesTable({
         return allOptions;
     }, [t]);
 
-    const statusFilterDefaultValues = useMemo(() => {
+    const statusFilterValues = useMemo(() => {
+        const status = searchParams.getAll("status");
+        if (status.length > 0) {
+            return status;
+        }
+
         if (build === "oss") {
             return ["active"];
         }
         return ["active", "pending"];
-    }, []);
+    }, [searchParams]);
 
     function handleFilterChange(
         column: string,
-        value: string | undefined | null | string[]
+        value: string | null | undefined | string[]
     ) {
         searchParams.delete(column);
         searchParams.delete("page");
@@ -795,45 +800,10 @@ export default function UserDevicesTable({
                         multiSelect: true,
                         displayMode: "calculated",
                         options: statusFilterOptions,
-                        onFilter: (
+                        onValueChange: (selectedValues: string[]) => {
-                            selectedValues: (string | number | boolean)[]
+                            handleFilterChange("status", selectedValues);
-                        ) => {
-                            console.log({ selectedValues });
-                            // if (selectedValues.length === 0) return true;
-                            // const rowArchived = row.archived;
-                            // const rowBlocked = row.blocked;
-                            // const approvalState = row.approvalState;
-                            // const isActive =
-                            //     !rowArchived &&
-                            //     !rowBlocked &&
-                            //     approvalState !== "pending" &&
-                            //     approvalState !== "denied";
-
-                            // if (selectedValues.includes("active") && isActive)
-                            //     return true;
-                            // if (
-                            //     selectedValues.includes("pending") &&
-                            //     approvalState === "pending"
-                            // )
-                            //     return true;
-                            // if (
-                            //     selectedValues.includes("denied") &&
-                            //     approvalState === "denied"
-                            // )
-                            //     return true;
-                            // if (
-                            //     selectedValues.includes("archived") &&
-                            //     rowArchived
-                            // )
-                            //     return true;
-                            // if (
-                            //     selectedValues.includes("blocked") &&
-                            //     rowBlocked
-                            // )
-                            //     return true;
-                            // return false;
                         },
-                        values: statusFilterDefaultValues
+                        values: statusFilterValues
                     }
                 ]}
             />

src/components/ui/controlled-data-table.tsx

@@ -46,7 +46,7 @@ export type ExtendedColumnDef<TData, TValue = unknown> = ColumnDef<
 type FilterOption = {
     id: string;
     label: string;
-    value: string | number | boolean;
+    value: string;
 };
 
 type DataTableFilter = {
@@ -54,8 +54,8 @@ type DataTableFilter = {
     label: string;
     options: FilterOption[];
     multiSelect?: boolean;
-    onFilter: (selectedValues: (string | number | boolean)[]) => void;
+    onValueChange: (selectedValues: string[]) => void;
-    values?: (string | number | boolean)[];
+    values?: string[];
     displayMode?: "label" | "calculated"; // How to display the filter button text
 };
 
@@ -117,7 +117,7 @@ export function ControlledDataTable<TData, TValue>({
 
     // TODO: filters
     const activeFilters = useMemo(() => {
-        const initial: Record<string, (string | number | boolean)[]> = {};
+        const initial: Record<string, string[]> = {};
         filters?.forEach((filter) => {
             initial[filter.id] = filter.values || [];
         });
@@ -174,6 +174,33 @@ export function ControlledDataTable<TData, TValue>({
         return selectedOptions.map((opt) => opt.label).join(" or ");
     };
 
+    const handleFilterChange = (
+        filterId: string,
+        optionValue: string,
+        checked: boolean
+    ) => {
+        const currentValues = activeFilters[filterId] || [];
+        const filter = filters?.find((f) => f.id === filterId);
+
+        if (!filter) return;
+
+        let newValues: string[];
+
+        if (filter.multiSelect) {
+            // Multi-select: add or remove the value
+            if (checked) {
+                newValues = [...currentValues, optionValue];
+            } else {
+                newValues = currentValues.filter((v) => v !== optionValue);
+            }
+        } else {
+            // Single-select: replace the value
+            newValues = checked ? [optionValue] : [];
+        }
+
+        filter.onValueChange(newValues);
+    };
+
     // Helper function to check if a column should be sticky
     const isStickyColumn = (
         columnId: string | undefined,
@@ -285,11 +312,11 @@ export function ControlledDataTable<TData, TValue>({
                                                                 onCheckedChange={(
                                                                     checked
                                                                 ) => {
-                                                                    // handleFilterChange(
+                                                                    handleFilterChange(
-                                                                    //     filter.id,
+                                                                        filter.id,
-                                                                    //     option.value,
+                                                                        option.value,
-                                                                    //     checked
+                                                                        checked
-                                                                    // )
+                                                                    );
                                                                 }}
                                                                 onSelect={(e) =>
                                                                     e.preventDefault()