Data Pager

import { AXDataPagerModule } from '@acorex/components/data-pager';

Data Pager component helps users navigate large datasets by providing controls such as "next," "previous," and page numbers. This allows users to seamlessly move between different sections of content, improving accessibility and preventing the interface from becoming overwhelming.

Overview

In this section, you can test different options of this component and see the output in real time

1 of 50 pages (1000 items)

Total Count

Compact View

Readonly

Disabled

Usage

A simple example of using ax-data-pager

Preview

Code

Methods

onBlur	AXFocusEvent	Specifies the function to be called when the data pager loses focus.
onFocus	AXFocusEvent	Specifies the function to be called when the data pager gains focus.
stateChange	AXComponentState	Invokes the function when the state of the data pager changes.
readonlyChange	boolean	Calls the function when the readonly state of the data pager changes.
valueChange	any	Calls the function when the value of the data pager changes.
onValueChanged	AXValueChangedEvent<any>	Triggers the function when the value of the data pager changes.
disabledChange	boolean	Calls the function when the disabled state of the data pager changes.
validationRulesChange	AXFormValidationRule[]	Invokes the function when the validation rules for the data pager change.
onOptionChanged	AXOptionChangedEvent	Triggers the function when an option related to the data pager changes.

Props

disabled	boolean	false	Disables the data pager.
readonly	boolean	false	Determines if the data pager is read-only, meaning the user cannot change the current page.
value	-	-	Specifies the current selected color value of the color palette.
name	string	-	Defines the name of the data pager, used for identification purposes.
displayMode	AXDataPagerMode	full	Specifies the display mode of the data pager.
total	number	0	Sets the total number of pages available in the data pager.
size	number	-	Determines the number of pages shown at once in the data pager.
isLoading	boolean	false	Indicates whether the data pager is currently loading data.