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.

Samples

Basic Pagination

pagination-basic-sample.cs

using Transpose.Core;
using Tesserae;
using static Transpose.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 Transpose.Core;
using Tesserae;
using static Transpose.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 Transpose.Core;
using Tesserae;
using static Transpose.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);
        }
    }
}

API reference

class

Pagination

public sealed class Pagination : ComponentBase<Pagination, HTMLElement>, IBindableComponent<int>

A page-number navigation strip used to walk through pages of results. It reads as a footer under the thing it pages: the controls, then how much there is. A set that fits on one page renders nothing at all, since a lone "1" button beside two greyed chevrons says only that there is nothing to navigate. Call ShowForSinglePage when the strip should hold its place regardless.

Namespace: Tesserae
Inheritance: ComponentBase<Pagination, HTMLElement> → Pagination
Implements: IBindableComponent<int>

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 how many page numbers the strip shows around an ellipsis; minimum 5, default 7. Once a set has more pages than fit, the strip is always this many plus two slots wide.
ShowStatus	Shows the status.
ShowForSinglePage	Gets or sets whether the strip renders for a set that fits on a single page. Off by default, which is what keeps a short list from carrying a control that can do nothing.
ShowFirstLastButtons	Gets or sets whether the jump-to-first and jump-to-last chevrons render. Off by default: the strip always numbers the first and the last page, so the pair duplicates the two buttons sitting immediately beside them.

Property

Pagination.MaxPageButtons

public int MaxPageButtons { get ; set ; }

Gets or sets how many page numbers the strip shows around an ellipsis; minimum 5, default 7. Once a set has more pages than fit, the strip is always this many plus two slots wide.

Property

Pagination.ShowForSinglePage

public bool ShowForSinglePage { get ; set ; }

Gets or sets whether the strip renders for a set that fits on a single page. Off by default, which is what keeps a short list from carrying a control that can do nothing.

Property

Pagination.ShowFirstLastButtons

public bool ShowFirstLastButtons { get ; set ; }

Gets or sets whether the jump-to-first and jump-to-last chevrons render. Off by default: the strip always numbers the first and the last page, so the pair duplicates the two buttons sitting immediately beside them.

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.
SetFormat	Changes how the range and the count are written - for another language, or for "1 to 25 of 118".
AsListFooter	Returns the component styled as the footer of the list above it - a rule along the top and the padding that separates the controls from the last row.
WithFirstLastButtons	Returns the component configured to render the jump-to-first and jump-to-last chevrons.
AlwaysVisible	Returns the component configured to render for a set that fits on a single page.
AsObservable	Returns an observable that tracks the current page number.
SetBoundValue	Programmatically updates the current page as part of a two-way binding.
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.
GetFocusedKey	Reads which control the keyboard is on, so the rebuild below can put it back. Without it, paging with the keyboard drops focus to the body and the next Tab starts from the top.
GetPageNumbers	The slots the strip shows, left to right: a page number, or 0 for an ellipsis. Past the point where every page fits, there are always `MaxPageButtons` + 2 of them and an ellipsis takes a slot the way a number does, so which pages are shown moves as you page and the width of the row never does. An ellipsis always stands for at least two pages.
Render	Renders the component's root HTML element.

Method

Pagination.AsListFooter

public Pagination AsListFooter()

Returns the component styled as the footer of the list above it - a rule along the top and the padding that separates the controls from the last row.

Method

Pagination.GetFocusedKey

private string GetFocusedKey()

Reads which control the keyboard is on, so the rebuild below can put it back. Without it, paging with the keyboard drops focus to the body and the next Tab starts from the top.

Method

Pagination.GetPageNumbers

private IEnumerable<int> GetPageNumbers(int totalPages)

The slots the strip shows, left to right: a page number, or 0 for an ellipsis. Past the point where every page fits, there are always MaxPageButtons + 2 of them and an ellipsis takes a slot the way a number does, so which pages are shown moves as you page and the width of the row never does. An ellipsis always stands for at least two pages.

Pagination

Description

Samples

Basic Pagination

Small Result Set

Large Result Set

API reference

Constructors

Pagination

Properties

Pagination.TotalItems

Pagination.PageSize

Pagination.CurrentPage

Pagination.TotalPages

Pagination.MaxPageButtons

Pagination.ShowStatus

Pagination.ShowForSinglePage

Pagination.ShowFirstLastButtons

Methods

Pagination.SetTotalItems

Pagination.SetPageSize

Pagination.SetPage

Pagination.SetFormat

Pagination.AsListFooter

Pagination.WithFirstLastButtons

Pagination.AlwaysVisible

Pagination.AsObservable

Pagination.SetBoundValue

Pagination.OnPageChange

Pagination.Next

Pagination.Previous

Pagination.First

Pagination.Last

Pagination.GetFocusedKey

Pagination.GetPageNumbers

Pagination.Render

See also