CODEWITHSUNDEEP
javascriptreactjspaginationsveltetanstack
Gaurav
Gaurav

Reputation: 79

TanStack Svelte Table Pagination

I was using TanStack Table Svelte Library and I wanted to use pagination but they haven't given any example on that, if anyone has any idea how to use the pagination on the Svelte table or if there are any methods that can help?

Upvotes: 1

Views: 936

Answers (1)

Jesse Reilly
Jesse Reilly

Reputation: 317

Using basic example found at https://tanstack.com/table/v8/docs/examples/svelte/basic as a starting point, make the following changes to enable basic pagination:

<script>
import {
  ...
  getPaginationRowModel, // Import the pagination model
} from '@tanstack/svelte-table';

...

const options = writable({
  ...
  getPaginationRowModel: getPaginationRowModel(), // Enable pagination
  autoResetPageIndex: true, // Automatically update pagination when data or page size changes
});

$table.setPageSize(10);

</script>




<table>
<!-- No need to edit table code/html - the rows shown/hidden will be handled by svelte-table  -->
</table>

<!-- Add buttons to control page index -->
<button
    on:click={() => $table.previousPage()}
    disabled={!$table.getCanPreviousPage()}
>
  Prev
</button>

<button
    on:click={() => $table.nextPage()}
    disabled={!$table.getCanNextPage()}
>
  Next
</button>

Upvotes: 1

Related Questions