Vue DataGrid - pager

Configures the pager.

Selector: DxPager
Type:

Object

The pager is an element that allows users to navigate through pages and change their size at runtime. The pager consists of the page navigator and several optional elements: the page size selector, navigation buttons, and page information.

DevExtreme HTML5 JavaScript jQuery Angular Knockout UI component DataGrid Pager

DataGrid Demo TreeList Demo

See Also

allowedPageSizes

Specifies the available page sizes in the page size selector.

Selector: DxAllowedPageSize
Type:

Array<Number | String>

|

String

Default Value: 'auto'
Accepted Values: 'all' | 'auto'

Set this property to an array of numbers that specify available page sizes. If you want to allow users to display all records on a single page, add the "all" value to this array. When the property is set to "auto" (the default value), the component automatically calculates the available page sizes based on the current page size.

DataGrid Demo TreeList Demo

displayMode

Specifies the pager's display mode.

Selector: display-mode
Type:

String

Default Value: 'adaptive'
Accepted Values: 'adaptive' | 'compact' | 'full'

The following table illustrates "full" and "compact" display modes:

displayMode Pager appearance
"full"
"compact"

The "adaptive" display mode switches between these two modes based on the component width.

infoText

Specifies the page information text.

Selector: info-text
Type:

String

Default Value: 'Page {0} of {1} ({2} items)'

You can use the following position markers in this text:

  • {0} - shows the current page number.
  • {1} - shows the total page count.
  • {2} - shows the total row count.
See Also

label

Specifies an aria-label attribute for the pager.

Type:

String

Default Value: 'Page Navigation'

showInfo

Specifies whether to show the page information.

Selector: show-info
Type:

Boolean

Default Value: false

DataGrid Demo TreeList Demo

showNavigationButtons

Specifies whether to show navigation buttons.

Selector: show-navigation-buttons
Type:

Boolean

Default Value: false

View Demo

showPageSizeSelector

Specifies whether to show the page size selector.

Selector: show-page-size-selector
Type:

Boolean

Default Value: false

DataGrid Demo TreeList Demo

See Also

visible

Specifies whether the pager is visible.

Type:

Boolean

|

String

Default Value: 'auto'
Accepted Values: 'auto'

The pager is visible if paging is enabled and the total row count is greater than the pageSize property.

DataGrid Demo TreeList Demo