fix: table editor search state (#47085)

## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.

YES

## What kind of change does this PR introduce?

Supabase > Studio > Table Editor > Filters

## What is the current behavior?

When you add a filter and you are on a different page from the first or
total pages from the filter you have to manually go back to the first
page:



https://github.com/user-attachments/assets/d254c8d4-3a5a-4e90-b7be-25a3a16a5b6f



## What is the new behavior?

Table editor now automatically redirects to the first page or page in
which you will see data:



https://github.com/user-attachments/assets/e77aa27e-884f-45a2-a951-7fd1c675e62f





## Additional context

Add any other context or screenshots.


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Bug Fixes**
* Updated pagination so the current page automatically returns to page 1
whenever filters are changed, keeping results consistent with the new
criteria.
* The reset is skipped on the initial load to avoid disrupting the
default starting state.
* Prevents pagination from becoming out of sync after applying or
modifying filters.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

apps/studio/components/grid/components/footer/pagination/Pagination.tsx

@@ -2,7 +2,7 @@ import { THRESHOLD_COUNT } from '@supabase/pg-meta'
 import { keepPreviousData } from '@tanstack/react-query'
 import { useParams } from 'common'
 import { AlertCircle, ArrowLeft, ArrowRight, HelpCircle, Loader2 } from 'lucide-react'
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { Button, Tooltip, TooltipContent, TooltipTrigger } from 'ui'
 import { Input } from 'ui-patterns/DataInputs/Input'
 import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
@@ -190,6 +190,17 @@ export const Pagination = ({ enableForeignRowsQuery = true }: PaginationProps) =
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isError, snap.enforceExactCount, error?.code])
 
+  // Reset back to the first page whenever the filters change
+  const hasMountedRef = useRef(false)
+  useEffect(() => {
+    if (!hasMountedRef.current) {
+      hasMountedRef.current = true
+      return
+    }
+    snap.setPage(1)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [filters])
+
   // [Joshen] One to revisit if we can consolidate this and the main return statement
   if (isForeignTableSelected) {
     return (