diff --git a/frontend/components/ui/datatable.tsx b/frontend/components/ui/datatable.tsx index 803c0779..7f9784d2 100644 --- a/frontend/components/ui/datatable.tsx +++ b/frontend/components/ui/datatable.tsx @@ -27,7 +27,7 @@ import { DataTablePagination } from './datatable-pagination'; import { Label } from './label'; import { ScrollArea, ScrollBar } from './scroll-area'; import { Skeleton } from './skeleton'; - +import { usePathname, useRouter, useSearchParams } from 'next/navigation'; const DEFAULT_PAGE_SIZE = 50; interface DataTableProps { @@ -92,6 +92,18 @@ export function DataTable({ const [allRowsAcrossAllPagesSelected, setAllRowsAcrossAllPagesSelected] = useState(false); const [expandedRows, setExpandedRows] = useState({}); + const searchParams = new URLSearchParams(useSearchParams().toString()); + const pathName = usePathname(); + const router = useRouter(); + + const clearFilters = () => { + // clear all filters + if (searchParams !== null && searchParams.get('filter') !== null) { + searchParams.delete('filter'); + router.push(`${pathName}?${searchParams.toString()}`); + } + }; + useEffect(() => { onSelectedRowsChange?.(Object.keys(rowSelection)); }, [rowSelection]); @@ -284,7 +296,12 @@ export function DataTable({ colSpan={columns.length} className="text-center p-4 text-secondary-foreground" > - No results + {searchParams.get('filter') !== null ? 'Applied filters returned no results. ' : 'No results'} + {searchParams.get('filter') !== null && ( + + Clear filters + + )} ))