Svelte Page Navigation

About The Project

A simple Svelte component for handling pagination, nothing more. Corrections and suggestions are welcome.

Built With

The demo app utilizes Pico.css as its styling framework.

The SVG icons used in this project are retrieved from Iconify, specifically the following icons:

• material-symbols:dark-mode-outline
• material-symbols:light-mode-outline
• material-symbols:chevron-left
• material-symbols:chevron-right
• material-symbols:first-page
• material-symbols:last-page
• material-symbols:more-horiz
• mdi:github

Getting Started

1. Install the package.

   npm i @dflare/svelte-page-navigation
   

2. Import the Paginator component.

   import {Paginator} from "@dflare/svelte-page-navigation";
   

3. Add the Paginator component to the markup and handle the chenge event.

   <Paginator on:change={pageChangeHandler} />
   

Paginator component

The Paginator component is the main component that implements pagination and provides the following properties:

• pages: a number that represents the total number of items to be managed. Its default value is 10.
• currentPage: a number indicating the current page (Zero-based numbering). Its default value is 0.
• initChunkSize: a number indicating the size of page grouping. If this number is smaller than the total number of pages and the available space is sufficient, then the page navigation buttons will be displayed in groups of size equal to initChunkSize. Its default value is equal to the total number of pages set with the pages property.
• initShowFirstButton: a boolean that, when set to true, enables displaying a button to directly navigate to the first page. The default value is true.
• initShowLastButton: a boolean that, when set to true, enables displaying a button to directly navigate to the last page. The default value is true.
• showCurrentPageLabel: a boolean that, when set to true, enables displaying a label with the current page number. The default value is false.
• customPaginatorButton: it allows to specify a custom component that represents the button used by Paginator component.

If there is enough available space, the Paginator component will display all the buttons for the pages (based on the values set for the pages and initChunkSize properties). Otherwise, it will automatically reduce the number of visible buttons.

Usage

Basic example

<script>
    import {Paginator} from '@dflare/svelte-page-navigation';
    
    let pages = 20;
    let currentPage = 6; // It can be omitted if you want to use the default value of 0 (Zero-based numbering)
    let initChunkSize = 10;
    let initShowFirstButton = true; // It can be omitted if you want to use the default value of true 
    let initShowLastButton = true; // It can be omitted if you want to use the default value of true
  let showCurrentPageLabel = true; // It can be omitted if you want to use the default value of false

    function pageChangeHandler(event) {
        currentPage = event.detail.page;
    }
</script>

<div>
    Current Page: {currentPage + 1}
</div>

<Paginator 
    pages={pages}
    currentPage={currentPage}
    initChunkSize={initChunkSize}
    initShowFirstButton={initShowFirstButton}
    initShowLastButton={initShowLastButton}
    showCurrentPageLabel={showCurrentPageLabel}
    on:change={pageChangeHandler} />

Result

(Try it on Svelte REPL)

Custom button example

To create a completely custom button, it is sufficient to create a new component that has the structure and properties of the PaginatorButton default component. The custom component should be passed to the Paginator component, which will use it instead of the default one.

App.svelte

<script>
    import {Paginator} from '@dflare/svelte-page-navigation';
    import CustomButton from './CustomButton.svelte';
    
    let pages = 20;
    let currentPage = 6;
    let initChunkSize = 10;

    function pageChangeHandler(event) {
      currentPage = event.detail.page;
    }
</script>

<div>
    Current Page: {currentPage + 1}
</div>

<Paginator
    customPaginatorButton={CustomButton}
    pages={pages}
    currentPage={currentPage}
    initChunkSize={initChunkSize}
    on:change={pageChangeHandler} />

CustomButton.svelte

<script>
    export let title = undefined;
    export let disabled = false;
    export let page = undefined;
    export let active = false;
</script>

<button type="button" disabled={disabled} data-page={page} class:active={active} title={title} on:click>
    <slot></slot>
</button>

<style>
    button {
        display: flex;
        align-items: center;
        justify-content: center; 
        width: 75px;
        height: 75px;
        padding: 0.75rem 1rem;
        border: 0;
        margin: 0;        
        border-radius: 50%;
        text-align: center;
        cursor: pointer;
        background-color: #1095c1;
        color: #f0f0f0;
        word-break: break-all;
        overflow: hidden;
        transition: background-color, opacity 0.15s ease;
    }

    button:hover {
        background-color: #07aee5;
    }

    button:active {
        transform: scale(0.95);
    }

    button[disabled] {
        opacity: 0.5;
        pointer-events: none;
    }

    button.active {
        background-color: #4CAF50;
        font-weight: bold;
    }
</style>

Result

(Try it on Svelte REPL)

License

Distributed under the MIT License. See LICENSE.md for more information.