Getting started

16 May 20259 minutes to read

This section explains you the steps required to create a simple Pager and demonstrate the basic usage of the Pager component in React environment.

Dependencies

Below is the list of minimum dependencies required to use the Pager.

|-- @syncfusion/ej2-react-grids
    |-- @syncfusion/ej2-grids

Setup for Local Development

To easily set up a React application, use create-vite-app, which provides a faster development environment, smaller bundle sizes, and optimized builds compared to traditional tools like create-react-app. For detailed steps, refer to the Vite installation instructions. Vite sets up your environment using JavaScript and optimizes your application for production.

Note: To create a React application using create-react-app, refer to this documentation for more details.

To create a new React application, run the following command.

npm create vite@latest my-app

To set-up a React application in TypeScript environment, run the following command.

npm create vite@latest my-app -- --template react-ts
cd my-app
npm run dev

To set-up a React application in JavaScript environment, run the following command.

npm create vite@latest my-app -- --template react
cd my-app
npm run dev

Adding Syncfusion® packages

All the available Essential® JS 2 packages are published in npmjs.com public registry.
To install Pager component, use the following command

npm install @syncfusion/ej2-react-grids --save

Adding CSS reference

Add Pager component’s styles as given below in src/App.css.

@import "../node_modules/@syncfusion/ej2-react-grids/styles/material.css";

To refer App.css in the application then import it in the src/App.tsx file.

Adding Pager component

Now, you can start adding Pager component in the application. For getting started, add the Pager component in src/App.tsx file using following code.

Now place the below Pager code in the src/App.tsx.
Here the Pager is rendered with totalRecordsCount which is used to render numeric container.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { PagerComponent } from '@syncfusion/ej2-react-grids';
import { data } from './datasource';
class App extends React.Component<{}, {}>{
    render() {
        return <PagerComponent totalRecordsCount = {20}>
        </PagerComponent>
    }
};
ReactDOM.render(<App />, document.getElementById('pager'));

Page Size

pageSize value defines the number of records to be displayed per page. The default value for the pageSize is 12.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { PagerComponent } from '@syncfusion/ej2-react-grids';
class App extends React.Component {
    render() {
        return <PagerComponent totalRecordsCount={20} pageSize={1}>
        </PagerComponent>;
    }
}
;
ReactDOM.render(<App />, document.getElementById('pager'));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { PagerComponent } from '@syncfusion/ej2-react-grids';
class App extends React.Component<{}, {}>{
    render() {
        return <PagerComponent totalRecordsCount = {20} pageSize = {1}>
        </PagerComponent>
    }
};
ReactDOM.render(<App />, document.getElementById('pager'));

Page sizes

The pageSizes property in the Syncfusion® Pager component allows you to control the number of records displayed per page through a DropDownList integrated into the pager. This feature enhances the experience by providing flexibility in data viewing.

Enabling Page Sizes

To enable the pageSizes property, follow these steps:

  1. Import the PagerDropDown and Pager modules from the Syncfusion® Grid package.

  2. Inject the PagerDropDown into the Pager module to enable the DropDownList in the pager.

  3. Configure the pageSizes property by setting it to either true or providing an array of custom values to define the available page size options.

The following example demonstrates how to include the pageSizes property in the pager component.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { PagerComponent, PagerDropDown, Pager } from '@syncfusion/ej2-react-grids';
Pager.Inject(PagerDropDown);
class App extends React.Component {
    render() {
        return <PagerComponent totalRecordsCount = {200} pageSize = {10} pageSizes = {[10, 20, 50, 100]}>
        </PagerComponent>
    }
}
;
ReactDOM.render(<App />, document.getElementById('pager'));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { PagerComponent, PagerDropDown, Pager } from '@syncfusion/ej2-react-grids';
Pager.Inject(PagerDropDown);
class App extends React.Component<{}, {}>{
    render() {
        return <PagerComponent totalRecordsCount = {200} pageSize = {10} pageSizes = {[10, 20, 50, 100]}>
        </PagerComponent>
    }
};
ReactDOM.render(<App />, document.getElementById('pager'));

When the pageSizes property is set to true, it utilizes the default values.

Page Count

pageCount value defines the number of pages to be displayed in the pager component for navigation.
The default value for pageCount is 10 and value will be updated based on totalRecordsCount and pageSize values.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { PagerComponent } from '@syncfusion/ej2-react-grids';
class App extends React.Component {
    render() {
        return <PagerComponent totalRecordsCount={20} pageSize={1} pageCount={3}>
        </PagerComponent>;
    }
}
;
ReactDOM.render(<App />, document.getElementById('pager'));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { PagerComponent } from '@syncfusion/ej2-react-grids';
class App extends React.Component<{}, {}>{
    render() {
        return <PagerComponent totalRecordsCount = {20} pageSize = {1} pageCount = {3}>
        </PagerComponent>
    }
};
ReactDOM.render(<App />, document.getElementById('pager'));

Run the application

Now run the npm run dev command in the console to start the development server. This command compiles your code and serves the application locally, opening it in the browser.

npm run dev

Output will be appears as follows.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { PagerComponent } from '@syncfusion/ej2-react-grids';
class App extends React.Component {
    render() {
        return <PagerComponent pageSize={8} totalRecordsCount={20} pageCount={3}>
        </PagerComponent>;
    }
}
;
ReactDOM.render(<App />, document.getElementById('pager'));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { PagerComponent } from '@syncfusion/ej2-react-grids';
class App extends React.Component<{}, {}>{
    render() {
        return <PagerComponent pageSize = {8} totalRecordsCount = {20}  pageCount = {3}>
        </PagerComponent>
    }
};
ReactDOM.render(<App />, document.getElementById('pager'));