Enable pagination

To display pagination buttons, you’ll need at least to know the total row count of the dataset (totalRows) and rowsPerPage parameters.

const table = new TableHandler(initialData, { rowsPerPage: 10, totalRows: 150 })

Most of the time, totalRows is given back from the server with each request:

// api response:
{
    count: 150,
    data: [...]
}

state exposes a setTotalRows() function:

table.load(async (state) => {
    // [fetching data...]
    state.setTotalRows(json.count)
    return json.data
})

Pages

{#each table.pages as page}
    <button type="button">{page}</button>
{/each}

Pages with ellipsis

{#each table.pagesWithEllipsis as page}
    <button type="button">{page ?? '...'}</button>
{/each}

Current page

<button type="button"
    class:active={page === table.currentPage}
    onclick={() => table.setPage(page)}
>
    {page ?? '...'}
</button>