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.

Namespace: Tesserae
Inheritance: ComponentBase<Pagination, HTMLElement> → Pagination

Constructors

Name	Description
Pagination	Initializes a new instance of this class.

Properties

Name	Description
TotalItems	Gets or sets the total items.
PageSize	Gets or sets the page size.
CurrentPage	Gets or sets the current page.
TotalPages	Gets or sets the total pages.
MaxPageButtons	Gets or sets the max page buttons.
ShowStatus	Shows the status.

Methods

Name	Description
SetTotalItems	Sets the total items of the component.
SetPageSize	Sets the page size of the component.
SetPage	Sets the page of the component.
OnPageChange	Registers a callback invoked when the page change event fires.
Next	Configures the component to next.
Previous	Configures the component to previous.
First	Configures the component to first.
Last	Configures the component to last.
Render	Renders the component's root HTML element.

Samples

Basic Pagination

pagination-basic-sample.cs

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.cs

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.cs

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