RhombusKit

Pagination

Pagination splits a long collection into pages and gives users the controls to move between them. <rhombus-pagination> wraps Material's <mat-paginator> with the token contract and emits the same stable PageState ({ pageIndex, pageSize, length }) the data table does, so you never import Material's PageEvent.

Example

1 – 10 of 95

When to use

  • Use a paginator to page any collection — a list, a grid, search results — not just the data table. It is a standalone control, so reach for it wherever the source already lives in your own state.
  • When the user benefits from discrete, addressable pages and a visible total — jumping to first/last and seeing "where am I" matters more than continuous scrolling.

When not to use

  • To page the rows of a tabular dataset, prefer the Data Table — it hosts a paginator internally and wires the same PageState for you.
  • For an indeterminate or streaming fetch where there is no stable total, show a Progress indicator and load incrementally instead of paging.
  • When there is nothing to page because the collection is empty, render an Empty State rather than an idle paginator.

Related components

  • Data Table — paginated, sortable rows.
  • Select — the control behind the page-size picker.
  • Progress — loading state while a page is fetched.
  • Empty State — when there is nothing to page.

Was this page helpful?