Skip to main content

Pager

The Pager control is a handy tool for dividing a large-scale content into pages and navigating between them. With SVAR Pager, you can easily set the total number of pages and the number of records rendered per page. It is also possible to specify what page that should be displayed in Pager at the moment.

Pager

Initialization​

To create a Pager instance on a page, you need to complete two steps:

  • import the source file of the control on a page:
App.jsx
import { Pager } from "@svar-ui/react-core";
  • apply the <Pager> element to initialize a pager:
App.jsx
function App() {
  return <Pager />;
}

The default pager is initialized with the first page active and 20 rows rendered per page.

Setting the value​

When a pager is created, the content of the 1st page is displayed. If you want to select a different page, use the value property and set the number of the page that should become active:

<Pager value={2} total={100} />

Related sample: Pager

Getting the current value​

It is possible to get the value of the page selected at the moment. In React you do this using component state and the Pager's onChange event. For example:

import { useState } from "react";
import { Pager } from "@svar-ui/react-core";

function App() {
  const [page, setPage] = useState(2);

  return <Pager value={page} onChange={(ev) => setPage(ev.value)} total={100} />;
}

Related sample: Pager

Catching the change of the active page​

In case you need to catch the change of the selected page, you can do it by handling the change event. In React this becomes the onChange prop. Inside the handler you will receive an object describing the newly selected page:

function changeHandler(ev) {
  const newState = ev;
  console.log(newState);
  // => { value: 2, from: 20, to: 40 }
}

<Pager value={2} total={100} onChange={changeHandler} />

The event handler will receive an object with the number of the newly opened page and the numbers of the start and end rows of this page.

Setting the total number of records​

You can specify the total number of records that should be split into pages. For this, you need to use the total property and set the desired number as a value:

<Pager total={100} />

Related sample: Pager

Setting the number of records per page​

In order to distribute content among pages, it is necessary to specify how many records should be rendered at a page. The pageSize property is provided for this purpose. Set the number of records to be displayed per page as a value of this config:

<Pager pageSize={30} />

Related sample: Pager