From 35df0898c833cc7273f3af95f395da4dcd18aff7 Mon Sep 17 00:00:00 2001 From: hallidayo <22655069+Hallidayo@users.noreply.github.com> Date: Tue, 30 Jun 2026 13:07:32 +0100 Subject: [PATCH] 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. ## 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. --- .../components/footer/pagination/Pagination.tsx | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/apps/studio/components/grid/components/footer/pagination/Pagination.tsx b/apps/studio/components/grid/components/footer/pagination/Pagination.tsx index ae41b4119c7..49933019828 100644 --- a/apps/studio/components/grid/components/footer/pagination/Pagination.tsx +++ b/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 (