Tesserae - Pagination

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.

API reference

class

Pagination

public sealed class Pagination : ComponentBase<Pagination, HTMLElement>

A page-number navigation strip used to walk through pages of results.

Constructors

Properties

Methods

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);
        }
    }
}

Pagination

Description

API reference

Constructors

Pagination

Properties

Pagination.TotalItems

Pagination.PageSize

Pagination.CurrentPage

Pagination.TotalPages

Pagination.MaxPageButtons

Pagination.ShowStatus

Methods

Pagination.SetTotalItems

Pagination.SetPageSize

Pagination.SetPage

Pagination.OnPageChange

Pagination.Next

Pagination.Previous

Pagination.First

Pagination.Last

Pagination.Render

Samples

Basic Pagination

Small Result Set

Large Result Set

See also