From 361285758522aca921ce76f75bdfd5907430c0ce Mon Sep 17 00:00:00 2001
From: miloschwartz <mschwartz10612@gmail.com>
Date: Mon, 31 Mar 2025 10:31:35 -0400
Subject: [PATCH] use global search for tables

---
 .../settings/access/roles/RolesDataTable.tsx    | 17 +++++++----------
 .../settings/access/users/UsersDataTable.tsx    | 17 +++++++----------
 .../settings/resources/ResourcesDataTable.tsx   | 17 +++++++----------
 .../share-links/ShareLinksDataTable.tsx         | 17 +++++++----------
 .../[orgId]/settings/sites/SitesDataTable.tsx   | 17 +++++++----------
 5 files changed, 35 insertions(+), 50 deletions(-)

diff --git a/src/app/[orgId]/settings/access/roles/RolesDataTable.tsx b/src/app/[orgId]/settings/access/roles/RolesDataTable.tsx
index 8073e166..e4e0fb9c 100644
--- a/src/app/[orgId]/settings/access/roles/RolesDataTable.tsx
+++ b/src/app/[orgId]/settings/access/roles/RolesDataTable.tsx
@@ -39,6 +39,7 @@ export function RolesDataTable<TData, TValue>({
 }: DataTableProps<TData, TValue>) {
     const [sorting, setSorting] = useState<SortingState>([]);
     const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
+    const [globalFilter, setGlobalFilter] = useState<any>([]);
 
     const table = useReactTable({
         data,
@@ -49,6 +50,7 @@ export function RolesDataTable<TData, TValue>({
         getSortedRowModel: getSortedRowModel(),
         onColumnFiltersChange: setColumnFilters,
         getFilteredRowModel: getFilteredRowModel(),
+        onGlobalFilterChange: setGlobalFilter,
         initialState: {
             pagination: {
                 pageSize: 20,
@@ -57,7 +59,8 @@ export function RolesDataTable<TData, TValue>({
         },
         state: {
             sorting,
-            columnFilters
+            columnFilters,
+            globalFilter
         }
     });
 
@@ -67,15 +70,9 @@ export function RolesDataTable<TData, TValue>({
                 <div className="flex items-center max-w-sm mr-2 w-full relative">
                     <Input
                         placeholder="Search roles"
-                        value={
-                            (table
-                                .getColumn("name")
-                                ?.getFilterValue() as string) ?? ""
-                        }
-                        onChange={(event) =>
-                            table
-                                .getColumn("name")
-                                ?.setFilterValue(event.target.value)
+                        value={globalFilter ?? ""}
+                        onChange={(e) =>
+                            table.setGlobalFilter(String(e.target.value))
                         }
                         className="w-full pl-8"
                     />
diff --git a/src/app/[orgId]/settings/access/users/UsersDataTable.tsx b/src/app/[orgId]/settings/access/users/UsersDataTable.tsx
index 87cebf7d..b47424ba 100644
--- a/src/app/[orgId]/settings/access/users/UsersDataTable.tsx
+++ b/src/app/[orgId]/settings/access/users/UsersDataTable.tsx
@@ -39,6 +39,7 @@ export function UsersDataTable<TData, TValue>({
 }: DataTableProps<TData, TValue>) {
     const [sorting, setSorting] = useState<SortingState>([]);
     const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
+    const [globalFilter, setGlobalFilter] = useState<any>([]);
 
     const table = useReactTable({
         data,
@@ -49,6 +50,7 @@ export function UsersDataTable<TData, TValue>({
         getSortedRowModel: getSortedRowModel(),
         onColumnFiltersChange: setColumnFilters,
         getFilteredRowModel: getFilteredRowModel(),
+        onGlobalFilterChange: setGlobalFilter,
         initialState: {
             pagination: {
                 pageSize: 20,
@@ -57,7 +59,8 @@ export function UsersDataTable<TData, TValue>({
         },
         state: {
             sorting,
-            columnFilters
+            columnFilters,
+            globalFilter
         }
     });
 
@@ -67,15 +70,9 @@ export function UsersDataTable<TData, TValue>({
                 <div className="flex items-center max-w-sm mr-2 w-full relative">
                     <Input
                         placeholder="Search users"
-                        value={
-                            (table
-                                .getColumn("email")
-                                ?.getFilterValue() as string) ?? ""
-                        }
-                        onChange={(event) =>
-                            table
-                                .getColumn("email")
-                                ?.setFilterValue(event.target.value)
+                        value={globalFilter ?? ""}
+                        onChange={(e) =>
+                            table.setGlobalFilter(String(e.target.value))
                         }
                         className="w-full pl-8"
                     />
diff --git a/src/app/[orgId]/settings/resources/ResourcesDataTable.tsx b/src/app/[orgId]/settings/resources/ResourcesDataTable.tsx
index ffb6bf40..9cc0f79f 100644
--- a/src/app/[orgId]/settings/resources/ResourcesDataTable.tsx
+++ b/src/app/[orgId]/settings/resources/ResourcesDataTable.tsx
@@ -40,6 +40,7 @@ export function ResourcesDataTable<TData, TValue>({
 }: ResourcesDataTableProps<TData, TValue>) {
     const [sorting, setSorting] = useState<SortingState>([]);
     const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
+    const [globalFilter, setGlobalFilter] = useState<any>([]);
 
     const table = useReactTable({
         data,
@@ -50,6 +51,7 @@ export function ResourcesDataTable<TData, TValue>({
         getSortedRowModel: getSortedRowModel(),
         onColumnFiltersChange: setColumnFilters,
         getFilteredRowModel: getFilteredRowModel(),
+        onGlobalFilterChange: setGlobalFilter,
         initialState: {
             pagination: {
                 pageSize: 20,
@@ -58,7 +60,8 @@ export function ResourcesDataTable<TData, TValue>({
         },
         state: {
             sorting,
-            columnFilters
+            columnFilters,
+            globalFilter
         }
     });
 
@@ -68,15 +71,9 @@ export function ResourcesDataTable<TData, TValue>({
                 <div className="flex items-center max-w-sm mr-2 w-full relative">
                     <Input
                         placeholder="Search resources"
-                        value={
-                            (table
-                                .getColumn("name")
-                                ?.getFilterValue() as string) ?? ""
-                        }
-                        onChange={(event) =>
-                            table
-                                .getColumn("name")
-                                ?.setFilterValue(event.target.value)
+                        value={globalFilter ?? ""}
+                        onChange={(e) =>
+                            table.setGlobalFilter(String(e.target.value))
                         }
                         className="w-full pl-8"
                     />
diff --git a/src/app/[orgId]/settings/share-links/ShareLinksDataTable.tsx b/src/app/[orgId]/settings/share-links/ShareLinksDataTable.tsx
index 612a1790..ea0cfd91 100644
--- a/src/app/[orgId]/settings/share-links/ShareLinksDataTable.tsx
+++ b/src/app/[orgId]/settings/share-links/ShareLinksDataTable.tsx
@@ -40,6 +40,7 @@ export function ShareLinksDataTable<TData, TValue>({
 }: ShareLinksDataTableProps<TData, TValue>) {
     const [sorting, setSorting] = useState<SortingState>([]);
     const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
+    const [globalFilter, setGlobalFilter] = useState<any>([]);
 
     const table = useReactTable({
         data,
@@ -50,6 +51,7 @@ export function ShareLinksDataTable<TData, TValue>({
         getSortedRowModel: getSortedRowModel(),
         onColumnFiltersChange: setColumnFilters,
         getFilteredRowModel: getFilteredRowModel(),
+        onGlobalFilterChange: setGlobalFilter,
         initialState: {
             pagination: {
                 pageSize: 20,
@@ -58,7 +60,8 @@ export function ShareLinksDataTable<TData, TValue>({
         },
         state: {
             sorting,
-            columnFilters
+            columnFilters,
+            globalFilter
         }
     });
 
@@ -68,15 +71,9 @@ export function ShareLinksDataTable<TData, TValue>({
                 <div className="flex items-center max-w-sm mr-2 w-full relative">
                     <Input
                         placeholder="Search links"
-                        value={
-                            (table
-                                .getColumn("title")
-                                ?.getFilterValue() as string) ?? ""
-                        }
-                        onChange={(event) =>
-                            table
-                                .getColumn("title")
-                                ?.setFilterValue(event.target.value)
+                        value={globalFilter ?? ""}
+                        onChange={(e) =>
+                            table.setGlobalFilter(String(e.target.value))
                         }
                         className="w-full pl-8"
                     />
diff --git a/src/app/[orgId]/settings/sites/SitesDataTable.tsx b/src/app/[orgId]/settings/sites/SitesDataTable.tsx
index a30bab12..ef6909f1 100644
--- a/src/app/[orgId]/settings/sites/SitesDataTable.tsx
+++ b/src/app/[orgId]/settings/sites/SitesDataTable.tsx
@@ -40,6 +40,7 @@ export function SitesDataTable<TData, TValue>({
 }: DataTableProps<TData, TValue>) {
     const [sorting, setSorting] = useState<SortingState>([]);
     const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
+    const [globalFilter, setGlobalFilter] = useState<any>([]);
 
     const table = useReactTable({
         data,
@@ -50,6 +51,7 @@ export function SitesDataTable<TData, TValue>({
         getSortedRowModel: getSortedRowModel(),
         onColumnFiltersChange: setColumnFilters,
         getFilteredRowModel: getFilteredRowModel(),
+        onGlobalFilterChange: setGlobalFilter,
         initialState: {
             pagination: {
                 pageSize: 20,
@@ -58,7 +60,8 @@ export function SitesDataTable<TData, TValue>({
         },
         state: {
             sorting,
-            columnFilters
+            columnFilters,
+            globalFilter
         }
     });
 
@@ -68,15 +71,9 @@ export function SitesDataTable<TData, TValue>({
                 <div className="flex items-center max-w-sm mr-2 w-full relative">
                     <Input
                         placeholder="Search sites"
-                        value={
-                            (table
-                                .getColumn("name")
-                                ?.getFilterValue() as string) ?? ""
-                        }
-                        onChange={(event) =>
-                            table
-                                .getColumn("name")
-                                ?.setFilterValue(event.target.value)
+                        value={globalFilter ?? ""}
+                        onChange={(e) =>
+                            table.setGlobalFilter(String(e.target.value))
                         }
                         className="w-full pl-8"
                     />