Navigation
table.setPage(5) // Go to any page number
table.setPage('previous') // Go to the previous page
table.setPage('next') // Go to the next page
table.setPage('last') // Go to the last page
Under the hood, your data is reloaded at each page change.
Markup:
<aside>
<button onclick={() => table.setPage(1)}>First page</button>
<button onclick={() => table.setPage('previous')}>Previous</button>
{#each table.pagesWithEllipsis as page}
<button class:active={page === table.currentPage} onclick={() => table.setPage(page)}>
{page ?? '...'}
</button>
{/each}
<button onclick={() => table.setPage('next')}>Next</button>
<button onclick={() => table.setPage('last')}>Last page</button>
</aside>