use global search for tables

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"
                     />