• Animation
    • Buttons
    • Charts
    • Common Utilities
    • Conversational UI
    • Data Query
    • Data Tools
    • Date Inputs
    • Date Math
    • Dialogs
    • Drawing
    • Dropdowns
    • Editor
    • Excel Export
    • File Saver
    • Form
    • Gantt
    • Gauges
    • Grid
    • Indicators
    • Inputs
    • Labels
    • Layout
    • ListBox
    • ListView
    • Notification
    • PDF Processing
    • PivotGrid
    • Popup
    • Progress Bars
    • Ripple
    • Scheduler
    • Sortable
    • Tooltip
    • TreeList
    • TreeView
    • Upload
    Sample Applications
    Styling & Themes
    Common Features
    Project Setup

Pager Overview

The KendoReact Pager provides options for splitting content into pages.

The KendoReact Pager is part of the KendoReact library of React UI components. It is distributed through NPM under the kendo-react-data-tools package.

Basic Usage

You can configure the Pager by using the following properties:

  • buttonCountSets the maximum numeric buttons count before the buttons are collapsed.
  • infoToggles the information about the current page and the total number of records.
  • typeAccepts the numeric (buttons with numbers) and input (input for typing the page number) values.
  • pageSizesDisplays a menu for selecting the page size.
  • previousNextToggles the Previous and Next buttons.
  • responsiveToggles the responsive layout.
View Source
Edit In Stackblitz  
Change Theme:

Responsive Design

The Pager supports responsive web-design by adapting its layout based on the set width or the available screen size. By default, the responsive layout is enabled. To disable it, set the responsive property to false.

There are three breaking points which determine the visibility of the internal group of elements:

  • pagerWidth >= 768px - When the Pager width is greater than or equal to 768 pixels, all elements are visible.
  • 768px < pagerWidth <= 600px - When the Pager width is less than 768px, the Info element is hidden.
  • pagerWidth > 600px - When the Pager width is less than 600px, the PageSizes element is also hidden. If the Pager type is numeric, the page number buttons are replaced with a Select element.

Try to resize the browser width to see the different layouts:

View Source
Edit In Stackblitz  
Change Theme:

Functionality and Features

The Pager provides globalization support.