diff --git a/src/components/UserDevicesTable.tsx b/src/components/UserDevicesTable.tsx
index 7e441547..e2fe6669 100644
--- a/src/components/UserDevicesTable.tsx
+++ b/src/components/UserDevicesTable.tsx
@@ -706,8 +706,6 @@ export default function UserDevicesTable({
         return ["active", "pending"];
     }, []);
 
-    const [, setCount] = useState(0);
-
     function handleFilterChange(
         column: string,
         value: string | undefined | null | string[]
@@ -726,7 +724,6 @@ export default function UserDevicesTable({
         filter({
             searchParams
         });
-        setCount((c) => c + 1);
     }
 
     function toggleSort(column: string) {
@@ -791,54 +788,54 @@ export default function UserDevicesTable({
                 rowCount={rowCount}
                 stickyLeftColumn="name"
                 stickyRightColumn="actions"
-                // filters={[
-                //     {
-                //         id: "status",
-                //         label: t("status") || "Status",
-                //         multiSelect: true,
-                //         displayMode: "calculated",
-                //         options: statusFilterOptions,
-                //         filterFn: (
-                //             row: ClientRow,
-                //             selectedValues: (string | number | boolean)[]
-                //         ) => {
-                //             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";
+                filters={[
+                    {
+                        id: "status",
+                        label: t("status") || "Status",
+                        multiSelect: true,
+                        displayMode: "calculated",
+                        options: statusFilterOptions,
+                        onFilter: (
+                            selectedValues: (string | number | boolean)[]
+                        ) => {
+                            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;
-                //         },
-                //         defaultValues: statusFilterDefaultValues
-                //     }
-                // ]}
+                            // 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
+                    }
+                ]}
             />
         </>
     );
diff --git a/src/components/ui/controlled-data-table.tsx b/src/components/ui/controlled-data-table.tsx
index 88f03384..996526e4 100644
--- a/src/components/ui/controlled-data-table.tsx
+++ b/src/components/ui/controlled-data-table.tsx
@@ -33,7 +33,7 @@ import { useStoredColumnVisibility } from "@app/hooks/useStoredColumnVisibility"
 
 import { Columns, Filter, Plus, RefreshCw, Search } from "lucide-react";
 import { useTranslations } from "next-intl";
-import { useState } from "react";
+import { useMemo, useState } from "react";
 
 // Extended ColumnDef type that includes optional friendlyName for column visibility dropdown
 export type ExtendedColumnDef<TData, TValue = unknown> = ColumnDef<
@@ -54,11 +54,8 @@ type DataTableFilter = {
     label: string;
     options: FilterOption[];
     multiSelect?: boolean;
-    filterFn: (
-        row: any,
-        selectedValues: (string | number | boolean)[]
-    ) => boolean;
-    defaultValues?: (string | number | boolean)[];
+    onFilter: (selectedValues: (string | number | boolean)[]) => void;
+    values?: (string | number | boolean)[];
     displayMode?: "label" | "calculated"; // How to display the filter button text
 };
 
@@ -119,15 +116,13 @@ export function ControlledDataTable<TData, TValue>({
     );
 
     // TODO: filters
-    const [activeFilters, setActiveFilters] = useState<
-        Record<string, (string | number | boolean)[]>
-    >(() => {
+    const activeFilters = useMemo(() => {
         const initial: Record<string, (string | number | boolean)[]> = {};
         filters?.forEach((filter) => {
-            initial[filter.id] = filter.defaultValues || [];
+            initial[filter.id] = filter.values || [];
         });
         return initial;
-    });
+    }, [filters]);
 
     console.log({
         pagination,
@@ -147,7 +142,6 @@ export function ControlledDataTable<TData, TValue>({
         },
         manualFiltering: true,
         manualPagination: true,
-        // pageCount: pagination.pageCount,
         rowCount,
         state: {
             columnFilters,
@@ -177,7 +171,7 @@ export function ControlledDataTable<TData, TValue>({
         }
 
         // Multiple selections: always join with "and"
-        return selectedOptions.map((opt) => opt.label).join(" and ");
+        return selectedOptions.map((opt) => opt.label).join(" or ");
     };
 
     // Helper function to check if a column should be sticky