Paginations

Overview

Pagination helps to chunk a massive data from server which can decrease your website performance.

Astropine has two types of pagination: input and select.

Discover what you can achieve below.

Input Pagination

Input Pagination is a set of input type number and buttons. By changing the intput number, you get back this value and can perform a navigation.

Copied !

---
import InputPagination from "$components/pagination/input/InputPagination.astro";
---

<InputPagination
  x-init={`$watch("selectedPage", (value) => {
        console.log({ selectedPage: value });
    })`}
  pages={20}
  class="[&_input]:w-24"
  selectedPage={3}
/>

Select Pagination

Select Pagination is Select component instead of input. The pages number is display in the select list.

Copied !

---
import SelectPagination from "$components/pagination/select/SelectPagination.astro";
---

<SelectPagination
  x-init={`$watch("selectedPage", (value) => {
        console.log({ selectedPage: value });
    })`}
  pages={20}
  class="[&_input]:w-24"
  selectedPage={13}
/>

Custom Button Label Pagination

Pagination has 4 props to change the 4 buttons label: firstButtonlabel, previousButtonLabel, nextButtonLabel and lastButtonLabel.

By default, icons are displayed.

Copied !

---
import InputPagination from "$components/pagination/input/InputPagination.astro";
---

<InputPagination
  x-init={`$watch("selectedPage", (value) => {
        console.log({ selectedPage: value });
    })`}
  pages={10}
  firstButtonLabel="First"
  previousButtonLabel="Previous"
  nextButtonLabel="Next"
  lastButtonLabel="Last"
/>

Custom Button Select Pagination

You can even change the 4 buttons design thanks to slot. Check example below to know how to do it.

Copied !

---
import PrimaryButton from "$components/button/primary/PrimaryButton.astro";
import SelectPagination from "$components/pagination/select/SelectPagination.astro";
---

<SelectPagination
  x-init={`$watch("selectedPage", (value) => {
        console.log({ selectedPage: value });
    })`}
  pages={5}
  class="[&_input]:w-24"
  selectedPage={3}
>
  <PrimaryButton
    :disabled="isFirstPage"
    @click="selectFirstPage"
    slot="first-button"
    text="Première"
  />
  <PrimaryButton
    :disabled="isFirstPage"
    @click="selectPreviousPage"
    slot="previous-button"
    text="Précédente"
  />
  <PrimaryButton
    :disabled="isLastPage"
    @click="selectNextPage"
    slot="next-button"
    text="Suivante"
  />
  <PrimaryButton
    :disabled="isLastPage"
    @click="selectLastPage"
    slot="last-button"
    text="Dernière"
  />
</SelectPagination>