HxPager

Pager.

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 which allow you pager customization.

API

Parameters

Name Type Description
CurrentPageIndexREQUIRED int Current page index. Zero based. Displayed numbers start with 1 which is page index 0.
TotalPagesREQUIRED int Total pages of data items.
CssClass string Any additional CSS class to apply.
CurrentPageIndexChanged EventCallback<int> Event raised where 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. 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 HxPager.Defaults, overriden 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 🗙