Responsiveness
The Pager component is responsive by default.
To disable the responsive behavior, set the Responsive() option to false. As a result, all Pager elements are visible, no matter the screen resolution of the device.
Starting with version Q2 2025, the Pager's sizing is no longer based on fixed breakpoints. Instead, the optimized responsive behavior renders as many elements as possible within the available space. For more information, refer to the Breaking Changes section.
The responsive Pager determines which elements to render based on the available space. The component's elements are displayed in the following order:
- Numeric Page Number Buttons or a Numeric Input, if the Pager type is set to
Input(). - Page Sizes Dropdown
- Info label
- Refresh button (if enabled)
As the screen size decreases, the elements are hidden from the bottom to the top of this list, starting with the Refresh button, to maintain optimal layout within the available space.
On smaller screens, when using the default Numeric() Pager type, the numeric page buttons are automatically replaced with a single input field that functions the same way as when the Input() option is enabled.