Responsive Design

The Pager supports responsive web-design by adapting its layout based on the set width or the available screen size. By default, the responsive layout is enabled. To disable it, set the responsive property to false.

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.
• 768px < pagerWidth <= 600px - When the Pager width is less than 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.

Move the slider in the below demo to see the different supported layouts:

Suggested Links

• API Reference of the Pager Props