` β it renders all of
this ([Β§9](#9-global-pagination-across-all-sources)). Drop to the headless
recipe below only when you need control the drop-in doesn't expose (a bespoke
grid container, custom chrome placement, extra surrounding UI): assemble it
yourself from `useSearch` plus the exported primitives. This is what the
`propertymanagementapp` template's `UnifiedSearch` component used to hand-roll
before adopting merged mode; the skeleton below is the same recipe, trimmed to
the essentials.
The pieces you compose:
| Piece | What renders it | Source of truth |
| --------------------- | --------------------------------------------------------------- | ------------------------------------- |
| Search box | `` | `handle.q` / `handle.setQ` |
| Scope selector | `` | `handle.scope` / `handle.setScope` |
| **Result count** | your own `` reading `page.totalCount` | `handle.globalPagination.totalCount` |
| **Merged grid** | map over `handle.mergedResults` β your card per `sourceKey` | `handle.mergedResults` |
| **Pagination widget** | `` | `handle.globalPagination` |
| **Filter panel** | `` + `` (per source) | `handle.inScopeSources[i]` controller |
Two rules make the layout work in **every** scope β the unified "All" view, a
single source picked in the selector, and a `lockedScope` page β from one
implementation:
1. **Render the count on its own row, directly above the grid, unconditionally.**
`page.totalCount` is the cumulative in-scope total, so it's meaningful whether
one source or all of them are in scope. Don't gate it on scope.
2. **Show per-source filter chrome only when a single source is in scope.** Under
"All", heterogeneous per-source filters can't be combined into one panel, so
collapse to just the count. Detect this with `handle.scope !== ALL_SCOPE`
(then `handle.inScopeSources[0]` is the sole controller).
```tsx
import {
useSearch,
SearchBar,
ScopeSelector,
SortControl,
ActiveFilters,
FilterProvider,
FilterResetButton,
DefaultFilterPanel,
PaginationControls,
ALL_SCOPE,
} from "@salesforce/ui-bundle-template-feature-react-search";
function UnifiedSearch({ restrictTo }: { restrictTo?: string }) {
// config.pagination = { mode: "merged", mergeOrder: "proportional",
// pageSize: 6, pageSizeOptions: [6, 12, 24] } β see Β§9 and Β§11.
const handle = useSearch(config, { lockedScope: restrictTo });
const { globalPagination: page, mergedResults } = handle;
const singleSourceInScope = handle.scope !== ALL_SCOPE;
const soleController = singleSourceInScope ? handle.inScopeSources[0] : undefined;
return (
{/* Row 1 β search box + scope selector (hidden when the scope is locked). */}
{!handle.scopeLocked && (
)}
{/* Row 2 β the sole source's filters + sort, only under a single scope. */}
{singleSourceInScope && soleController && (
soleController.filters.active.forEach((f) => soleController.filters.remove(f.field))
}
>
Filters
{soleController.config.sortBy && (
)}
)}
{/* Count β its own row, directly above the grid, in EVERY scope. */}
{!handle.loading && !handle.error && (
{page.totalCount} total result{page.totalCount === 1 ? "" : "s"}
)}
{/* Merged, cumulatively-paginated card grid. Each item knows its source. */}
{mergedResults.map(({ sourceKey, node }, i) => (
))}
{/* One shared pager over the cumulative set. Passing pageCount + onGoToPage
renders numbered page buttons; omit them for prev/next only. */}
{page.totalCount > 0 && (
)}