Pagination slot

vue3-easy-data-table is providing a pagination slot exposing four pagination related varaibles: isFirstPage, isLastPage, currentPaginationNumber, maxPaginationNumber,and two pagination related functions: nextPage, prevPage.

Example

So, you can customize pagination like this:

<EasyDataTable
  :headers="headers"
  :items="mockItems"
>
  <template #pagination="{ prevPage, nextPage, isFirstPage, isLastPage }">
    <button :disabled="isFirstPage" @click="prevPage">
      prev page
    </button>
    <button :disabled="isLastPage" @click="nextPage">
      next page
    </button>
  </template>
</EasyDataTable>

Edit on CodeSandboxopen in new window

NameAddressHeightWeightAgeFavourite sportFavourite fruits
name-1address-1111footballapple
name-2address-2222runningorange
name-3address-3333swimmingpeach
name-4address-4444basketballbanana
name-5address-5555footballapple
name-6address-6666runningorange
name-7address-7777swimmingpeach
name-8address-8888basketballbanana
name-9address-9999footballapple
name-10address-10101010runningorange

⚠️ pagination slot feature is based on the slotsopen in new window feature of vue.js. So before using the pagination slot feature in vue3-easy-data-table, Please make sure you have known how to use the slotsopen in new window feature of vue.js.