Skip to content
BigBang

Popular

    ↑↓Navigate↵OpenEscClose
    TR

    Components

    Pagination

    Page or cursor navigation under tables and lists, with a page size choice.

    Storybook
    Storybook
    Source
    Source

    Added

    • First version: Pagination with the Pagination.List, Pagination.Previous, Pagination.Next, Pagination.Page, Pagination.Ellipsis, Pagination.PageSize and Pagination.Summary parts, built on Button and Select.
    • Page mode (page, pageCount, onPageChange) and cursor mode (mode="cursor").
    • The pure paginationRange function; siblingCount and boundaryCount.
    • Page size and the “21-40 / 345” summary through pageSize, pageSizeOptions, onPageSizeChange and totalCount.
    • Link controls through getPageHref, disabled, size (sm 32 px, md 40 px) and label.
    • Below 1024 px: previous, next and a counter. Focus stays on the clicked control after a change.
    • Strings: ui.pagination.*.
    • The part prop types are exported: PaginationListProps, PaginationPageProps.

    Changed

    • Item heights are 32 and 36 px.
    • Focus shows as a 2 px outer focus outline with a 2 px gap (focus-outline).