Paginator

Controls for displaying paged data.

Overview / Hero - KL

 

The Paginator component serves to divide lengthy data lists into navigable, manageable sections. It provides clickable page numbers or navigation buttons, enabling user movement through data pages.


Anatomy

The Paginator component is composed of the following elements:

  • A label that indicates the number of items per page
  • A page size select component which enables the user to select the number of items to display per page
  • A paginator range that shows the current page and the total number of pages
  • Previous and Next buttons for navigating between pages
Overview / Anatomy - KL

States

Paginator states include 'Disabled' for irrelevant pages or buttons. For detailed configuration, see the Angular component.


Types

Not all Paginator elements are mandatory. Variations like hiding page size and paginator range are possible. See the Angular component for a live preview.