<script>
 import Paginator from 'svelte-paginator'

 // Create test data
 let letters = '1234567890abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('')

 // Function to that loads the test data
 const loadLetters = (page, perPage) => {
   const start = perPage * (page-1)
   const end = start + perPage
   return {
     items: letters.slice(start, end), // The items to display for `page`
     numItems: letters.length // The total number of items available across all pages
   }
 }
</script>

<Paginator loadItems={loadLetters} let:items let:loading>
  <!-- Write code here for whatever you want to do with items, e.g. a list, a table, etc. -->

  <div>
    {#if loading}
      Loading...
    {:else}
      {#each items as letter}
        {letter}&nbsp;
      {:else}
        None
      {/each}
    {/if}
  </div>
</Paginator>

<script>
 import Paginator from 'svelte-paginator'

 let letters = '1234567890abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('')
 const loadLetters = async (page=1, perPage=10) => {
   await new Promise(resolve => setTimeout(resolve, 1500)) // Simulate a delay, e.g. loading from a server
   const start = perPage * (page-1)
   const end = start + perPage
   return {
     items: letters.slice(start, end),
     numItems: letters.length
   }
 }

 let reset = null
 const switchToGreek = () => {
   letters = 'αβγδεζηθικλμνξοπρστυφχψωΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩ'
   reset()
 }
</script>

<button on:click={switchToGreek}>Switch to Greek</button>

<Paginator loadItems={loadLetters} perPage={4} numPageLinks={12} currentPage={2} let:items let:loading bind:reset>
  <div>
    {#if loading}
      Loading...
    {:else}
      {#each items as letter}
        {letter}&nbsp;
      {:else}
        None
      {/each}
    {/if}
  </div>
</Paginator>

<Paginator loadItems let:items
  class_button="btn btn-outline-secondary"
  class_current_page="btn btn-secondary"
  class_button_group="btn-group">
  ...
</Paginator>