• What is KendoReact
  • Getting Started
  • Server Components
  • Components
    • Animation
    • Barcodes
    • Buttons
    • Chartsupdated
    • Common Utilities
    • Conversational UIupdated
    • Data Gridupdated
    • Data Query
    • Data Tools
    • Date Inputs
    • Date Math
    • Dialogs
    • Drawing
    • Dropdownsupdated
    • Editor
    • Excel Export
    • File Saver
    • Formupdated
    • Ganttupdated
    • Gauges
    • Indicators
    • Inputsupdated
    • Labels
    • Layoutupdated
    • ListBox
    • ListView
    • Map
    • Notification
    • OrgChartnew
    • PDF Processing
    • PDFViewer
    • PivotGrid
    • Popup
    • Progress Bars
    • Ripple
    • Scheduler
    • ScrollView
    • Sortable
    • Spreadsheetupdated
    • TaskBoard
    • Tooltips
    • TreeList
    • TreeViewupdated
    • Upload
  • Sample Applications
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Changelog
  • Updates
  • Troubleshooting
Components / Data Tools / API / PagerProps / 

PagerProps

NameTypeDefaultDescription

buttonCount?

number

Sets the maximum numeric buttons count before the buttons are collapsed.

className?

string

Sets additional classes to the Pager.

dir?

string

Sets the direction of the component.

info?

boolean

Toggles the information about the current page and the total number of records.

messagesMap?

(messageKey: string) => { defaultMessage: string; messageKey: string; }

Useful for modifying the Pager messages.

navigatable?

boolean

If set to true, the user can use dedicated shortcuts to interact with the Pager. By default, navigation is disabled and the Pager content is accessible in the normal tab sequence.

onPageChange?

(event: PageChangeEvent) => void | (event: BasePageChangeEvent) => void

Fires when the page of the Pager is changed. You have to handle the event yourself and page the data.

pageSizes?

number[] | undefined[]

Displays a menu for selecting the page size.

pageSizeValue?

string | number

Sets the selected value of the page size Dropdownlist. It is useful when the selected value could also be a string not only a number.

previousNext?

boolean

Toggles the Previous and Next buttons.

responsive?

boolean

Defines if the pager will be responsive. Defaults to true.

size?

"null" | "small" | "large" | "medium"

medium

Configures the size of the Pager.

The available options are:

  • small
  • medium
  • large
  • null—Does not set a size className.

skip

number

The number of records that will be skipped.

style?

React.CSSProperties

The styles that are applied to the Pager.

take

number

The number of records that will be taken.

total

number

The total number of records.

type?

"input" | "numeric"

Defines the type of the pager.

  • (Default) numeric — Renders buttons with numbers.
  • input — Renders an input field for typing the page number.

In this article

Not finding the help you need?

Contact Support