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
CurrentPageIndex^REQUIRED	`int`	Current page index. Zero based. Displayed numbers start with 1 which is page index 0.
TotalPages^REQUIRED	`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`, 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`