Adding SEO links to table

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.

✨ Example

((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 (required to get an accurate page count).