Tesserae

Pagination

Description

A component to navigate through pages

Pagination allows users to navigate through a large set of data by breaking it into smaller, manageable chunks called pages.

It provides controls to move between pages, jump to specific pages, and see the current position within the total set.

Samples

Basic Pagination

pagination-basic-sample.js

using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var status = TextBlock("Showing page 1").Medium();

            var component = VStack().Children(
                Card(status).MB(16),
                Pagination(totalItems: 120, pageSize: 10, currentPage: 1)
                   .OnPageChange(p => status.Text = $"Showing page {p.CurrentPage}")
            );

            document.body.style.overflow = "hidden";
            MountCenteredToBody(component);
        }
    }
}

Small Result Set

pagination-small-sample.js

using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var component = Pagination(totalItems: 25, pageSize: 10, currentPage: 1)
                .OnPageChange(p => Toast().Information($"Selected page {p.CurrentPage}"));

            document.body.style.overflow = "hidden";
            MountCenteredToBody(component);
        }
    }
}

Large Result Set

pagination-large-sample.js

using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var component = Pagination(totalItems: 1000, pageSize: 20, currentPage: 5)
                .OnPageChange(p => Toast().Information($"Selected page {p.CurrentPage}"));

            document.body.style.overflow = "hidden";
            MountCenteredToBody(component);
        }
    }
}