The Pager supports a responsive web-design by adapting its layout based on the set width or the available screen size.
Using the Pager template disables its default responsive behavior.
Based on its width, the Pager component determines which internal elements will be rendered. When the Pager width is greater than or equal to 768 pixels, it will display all elements as follows:
- The Previous and Next buttons.
- The numeric page number buttons, or, if the Pager
typeis set to
'input', a numeric input.
- The drop-down list with the page sizes.
When the Pager width is less than 768 pixels, some of its elements are hidden as follows:
- When the width is less than 768 pixels, its
infoelement will be hidden.
- When the width is less than 600 pixels, its page-size drop-down list will also be hidden. If the Pager
numeric, the page-number buttons will be replaced by a
The following example demonstrates the different Pager layouts based on its width.