Usage

Import

import { Pagination } from '@passfort/castle'
content_copy
Copy

Example

<Pagination value={1} count={10} />
<Pagination value={1} count={10} />
content_copy
Copy
live example

Full

You can set the type prop to full to render a pagination with more options.

<Stack>
  <Pagination
    type="full"
    value={1}
    count={300}
    itemsPerPage={25}
    itemsPerPageConfig={[25, 50]}
  />
</Stack>
<Stack>
  <Pagination
    type="full"
    value={1}
    count={300}
    itemsPerPage={25}
    itemsPerPageConfig={[25, 50]}
  />
</Stack>
content_copy
Copy
live example

Options

You can hide item range and items per page with the following props.

<Stack spacing={4} divider={<Divider />}>
  <Pagination
    type="full"
    value={1}
    count={300}
    itemsPerPage={25}
    itemsPerPageConfig={[25, 50]}
    showItemRange={false}
  />
  <Pagination
    type="full"
    value={1}
    count={300}
    itemsPerPage={25}
    showItemRange={false}
  />
</Stack>
<Stack spacing={4} divider={<Divider />}>
  <Pagination
    type="full"
    value={1}
    count={300}
    itemsPerPage={25}
    itemsPerPageConfig={[25, 50]}
    showItemRange={false}
  />
  <Pagination
    type="full"
    value={1}
    count={300}
    itemsPerPage={25}
    showItemRange={false}
  />
</Stack>
content_copy
Copy
live example