Paginations

Overview

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

JSXPine 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.component";

export function InputPaginationExample() {
	return (
		<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.component";

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

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.component";

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

Custom Button

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

Copied !

import { PrimaryButton } from "$components/button.component";
import { SelectPagination } from "$components/pagination.component";

export function CustomButtonPaginationExample() {
	return (
		<SelectPagination
			x-init={`
                $watch("selectedPage", (value) => {
                    console.log({ selectedPage: value });
                })
            `}
			pages={3}
			class="[&_input]:w-24"
			selectedPage={3}
			customFirstButton={
				<PrimaryButton
					x-bind:disabled="isFirstPage"
					x-on:click="selectFirstPage"
					text="Première"
				/>
			}
			customPreviousButton={
				<PrimaryButton
					x-bind:disabled="isFirstPage"
					x-on:click="selectPreviousPage"
					text="Précédente"
				/>
			}
			customNextButton={
				<PrimaryButton
					x-bind:disabled="isLastPage"
					x-on:click="selectNextPage"
					text="Suivante"
				/>
			}
			customLastButton={
				<PrimaryButton
					x-bind:disabled="isLastPage"
					x-on:click="selectLastPage"
					text="Dernière"
				/>
			}
		/>
	);
}