Pagination

Pagination component is used for paging through paged result sets.

Import

import { Pagination } from '@sajari-ui/core';

import { Pagination } from '@sajari-ui/core';

Usage

Editable Example

Current page: 1

function Example() {
  const [page, setPage] = React.useState(1);

  return (
    <Box textAlign="text-center">
      <Text>Current page: {page}</Text>
      <Pagination margin="mt-2" totalResults={1000} pageSize={20} page={page} onChange={setPage} />
    </Box>
  );
}

function Example() {
  const [page, setPage] = React.useState(1);
  return (
    <Box textAlign="text-center">
      <Text>Current page: {page}</Text>
      <Pagination margin="mt-2" totalResults={1000} pageSize={20} page={page} onChange={setPage} />
    </Box>
  );
}

Compact

Use compact prop to show a shorten form.

Editable Example

Current page: 1

function Example() {
  const [page, setPage] = React.useState(1);

  return (
    <Box textAlign="text-center">
      <Text>Current page: {page}</Text>
      <Pagination compact margin="mt-2" totalResults={1000} pageSize={20} page={page} onChange={setPage} />
    </Box>
  );
}

function Example() {
  const [page, setPage] = React.useState(1);
  return (
    <Box textAlign="text-center">
      <Text>Current page: {page}</Text>
      <Pagination compact margin="mt-2" totalResults={1000} pageSize={20} page={page} onChange={setPage} />
    </Box>
  );
}

Props

The Pagination component composes the Box component so you can pass props for Box.

Name	Type	Default	Description
`pageCount`	`number`		The total number of pages.
`totalResults`	`number`		The total number of results (used to calculate page count if not set).
`pageSize`	`number`		The number of results per page (used to calculate page count if not set).
`page`	`number`		The current page.
`onChange`	`function`		The callback handler. The current page is passed as the only argument.
`compact`	`default`	`false`	Enable compact mode.