HxPager #


Basic usage #

Although HxPager is mainly used within HxGrid, you can use it on its own to solve any other paging scenarios.

<HxPager CurrentPageIndex="0" TotalPages="1" />
<HxPager CurrentPageIndex="0" TotalPages="6" />
<HxPager CurrentPageIndex="0" TotalPages="10" />
<HxPager CurrentPageIndex="0" TotalPages="11" />
<HxPager CurrentPageIndex="0" TotalPages="50" />

Customization #

There are several parameters that allow pager customization.


Parameters #

Name Type Description
CurrentPageIndexREQUIRED int Current page index. Zero-based. Displayed numbers start with 1, which is page index 0.
TotalPagesREQUIRED int Total number of pages of data items.
CssClass string Any additional CSS class to apply.
CurrentPageIndexChanged EventCallback<int> Event raised when the page index is changed.
FirstPageIcon IconBase Icon for the "First page" button.
LastPageIcon IconBase Icon for the "Last page" button.
NextPageIcon IconBase Icon for the "Next page" button.
NumericButtonsCount int? Count of numbers to display. The default value is 10.
PreviousPageIcon IconBase Icon for the "Previous page" button.
Settings PagerSettings Set of settings to be applied to the component instance (overrides Defaults, overridden by individual parameters).

Static properties #

Property Type Description
Defaults PagerSettings Application-wide defaults for HxPager.

CSS variables #

Name Description Default
--hx-pager-margin Pager margin. 1rem
An unhandled error has occurred. Reload 🗙