Pagination

Storybook

Browse the props, controls and all the stories of Pagination in Storybook.

The Pagination component renders the page navigation (previous, page numbers, next), a page size selector and, optionally, the current page and the total number of items. It is a controlled component: it doesn't hold any state and only emits events. The Table component uses it to paginate its rows.

Usage

Pagination relies on the Select and PaginationButton components of the registry. Import the all entry point to register them:

import { useState } from "react";
import { Pagination } from "@tsed/react-formio/molecules/pagination/all";

export function MyPagination() {
  const [pageIndex, setPageIndex] = useState(0);
  const [pageSize, setPageSize] = useState(10);
  const pageCount = 50;

  return (
    <Pagination
      pageIndex={pageIndex}
      pageSize={pageSize}
      pageCount={pageCount}
      canPreviousPage={pageIndex > 0}
      canNextPage={pageIndex < pageCount - 1}
      onPageIndexChange={setPageIndex}
      onClickPreviousPage={() => setPageIndex(pageIndex - 1)}
      onClickNextPage={() => setPageIndex(pageIndex + 1)}
      onPageSizeChange={setPageSize}
    />
  );
}

Or import the modules separately:

import { Pagination } from "@tsed/react-formio/molecules/pagination/Pagination";
import "@tsed/react-formio/molecules/pagination/PaginationButton";
import "@tsed/react-formio/molecules/forms/select/all";

Props

Name	Type	Default	Description
pageIndex	number		Current page index (0-based).
pageCount	number		Total number of pages.
pageSize	number		Current page size, selected in the page size selector.
pageSizes	number[]	[10, 25, 50, 100]	Page sizes proposed in the page size selector.
canPreviousPage	boolean		Enables the "Previous" button.
canNextPage	boolean		Enables the "Next" button.
pageOptions	number[]		When set, displays "Page x of pageOptions.length".
rowCount	number		When set, displays the total number of items.
layout	"html5" | "react" | "choicesjs"		Layout of the page size Select.
i18n	FormOptions["i18n"]		Translations of the labels (Previous, Next, items per page, Page, Total, items).
className	string		Additional CSS classes.
onPageIndexChange	(pageIndex: number) => void		Called with the 0-based index when a page number is clicked.
onClickPreviousPage	() => void		Called when the "Previous" button is clicked.
onClickNextPage	() => void		Called when the "Next" button is clicked.
onPageSizeChange	(pageSize: number) => void		Called when a new page size is selected.

Example

Live exampleOpen in Storybook ↗

Override

Pagination is registered under the name Pagination, and the buttons it renders under the name PaginationButton. See Registering react components.

import { registerComponent } from "@tsed/react-formio/registries/components";
import type { PaginationProps } from "@tsed/react-formio/molecules/pagination/Pagination";

function MyPagination(props: PaginationProps) {
  // ...
}

registerComponent("Pagination", MyPagination);