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>

Name	Address	Height	Weight	Age	Favourite sport	Favourite fruits
name-1	address-1	1	1	1	football	apple
name-2	address-2	2	2	2	running	orange
name-3	address-3	3	3	3	swimming	peach
name-4	address-4	4	4	4	basketball	banana
name-5	address-5	5	5	5	football	apple
name-6	address-6	6	6	6	running	orange
name-7	address-7	7	7	7	swimming	peach
name-8	address-8	8	8	8	basketball	banana
name-9	address-9	9	9	9	football	apple
name-10	address-10	10	10	10	running	orange

rows per page:

10

• 10
• 15
• 20

1–10 of 100

⚠️ pagination slot feature is based on the slots 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 slots feature of vue.js.