Responsive Design

The Pager supports responsive web-design by adapting its layout based on the set width or the available screen size. To enable the responsive layout, set the responsive property to true.

There are three breaking points which determine the visibility of the internal group of elements:

• pagerWidth >= 768px - When the Pager width is greater than or equal to 768 pixels, all elements are visible.
• pagerWidth < 768px & pagerWidth >= 600px - When the Pager width is between 600px and 768px, the Info element is hidden.
• pagerWidth < 600px - When the Pager width is less than 600px, the PageSizes element is also hidden. If the Pager type is numeric, the page number buttons are replaced with a Select element.

Try to resize the browser width to see the different layouts:

Suggested Links

• API Reference of the Pager Props