Refactor datatable component to include filter clearing functionality

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<TData> {
@@ -92,6 +92,18 @@ export function DataTable<TData>({
   const [allRowsAcrossAllPagesSelected, setAllRowsAcrossAllPagesSelected] = useState(false);
   const [expandedRows, setExpandedRows] = useState<ExpandedState>({});
 
+  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<TData>({
                 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 && (
+                  <span className="text-primary hover:cursor-pointer" onClick={clearFilters}>
+                    Clear filters
+                  </span>
+                )}
               </TableCell>
             </TableRow>
           ))