The Table Builder natively supports the pp-page parameter, allowing direct navigation to a specific page number. This feature is also useful for adding SEO-friendly links to the table header or footer. The example below demonstrates how to implement this within the customActionsTop or customActionsBottom table hook.
Add to customActionsTop or customActionsBottom hook #
((table) => {
// Get total page count
const pageCount = table.instance.getPageCount()
const pagination = table.instance.getState().pagination
const pageSize = pagination.pageSize // Current page size
const urlParams = new URLSearchParams(window.location.search)
let pageIndex = parseInt(urlParams.get("pp-page")) // Current page index
if (pageIndex === null || isNaN(pageIndex)) {
pageIndex = 0 // We're on the first pahe
}
// Link to previous page is disable on first page
const linkPrevious = pageIndex === 0 ? "" : `
<button onclick="window.location.href='?pp-page=${pageIndex-1}'">PREVIOUS</button>
`
// Link to last page is disable on (pageCount-2) page
const linkNext = pageIndex > pageCount-2 ? "" : `
<button onclick="window.location.href='?pp-page=${pageIndex+1}'">NEXT</button>
`
return `<span>
${linkPrevious}
${linkNext}
</span>`
})Table Builder Settings #
- Enable server-side processing (required)
- Disable large table support (to get an accurate page count)
