Configuration options for the paginated list
An object containing the list of document handles, pagination details, and functions to navigate between pages
import {
usePaginatedDocuments,
createDatasetHandle,
type DatasetHandle,
type DocumentHandle,
type SortOrderingItem,
useDocumentProjection
} from '@sanity/sdk-react'
import {Suspense} from 'react'
import {ErrorBoundary} from 'react-error-boundary'
// Define a component to display a single document row
function MyTableRowComponent({doc}: {doc: DocumentHandle}) {
const {data} = useDocumentProjection<{title?: string}>({
...doc,
projection: '{title}',
})
return (
<tr>
<td>{data?.title ?? 'Untitled'}</td>
</tr>
)
}
// Define props for the list component
interface PaginatedDocumentListProps {
documentType: string
dataset?: DatasetHandle
}
function PaginatedDocumentList({documentType, dataset}: PaginatedDocumentListProps) {
const {
data,
isPending,
currentPage,
totalPages,
nextPage,
previousPage,
hasNextPage,
hasPreviousPage
} = usePaginatedDocuments({
...dataset,
documentType,
pageSize: 10,
orderings: [{field: '_createdAt', direction: 'desc'}],
})
return (
<div>
<table>
<thead>
<tr><th>Title</th></tr>
</thead>
<tbody>
{data.map(doc => (
<ErrorBoundary key={doc.documentId} fallback={<tr><td>Error loading document</td></tr>}>
<Suspense fallback={<tr><td>Loading...</td></tr>}>
<MyTableRowComponent doc={doc} />
</Suspense>
</ErrorBoundary>
))}
</tbody>
</table>
<div style={{opacity: isPending ? 0.5 : 1}}>
<button onClick={previousPage} disabled={!hasPreviousPage || isPending}>Previous</button>
<span>Page {currentPage} / {totalPages}</span>
<button onClick={nextPage} disabled={!hasNextPage || isPending}>Next</button>
</div>
</div>
)
}
// Usage:
// const myDatasetHandle = createDatasetHandle({ projectId: 'p1', dataset: 'production' })
// <PaginatedDocumentList dataset={myDatasetHandle} documentType="post" />
Retrieves pages of DocumentHandles, narrowed by optional filters, text searches, and custom ordering, with support for traditional paginated interfaces. The number of document handles returned per page is customizable, while page navigation is handled via the included navigation functions.