Pagination

Pagination with page navigation, next and previous links.

@react.component
let make = () =>
  <Pagination>

Installation

npx shadcn@latest add @rescript-shadcn/Pagination

Usage

<Pagination>
  <Pagination.Content>
    <Pagination.Item>
      <Pagination.Previous href="#" />
    </Pagination.Item>
    <Pagination.Item>
      <Pagination.Link href="#"> {"1"->React.string} </Pagination.Link>
    </Pagination.Item>
    <Pagination.Item>
      <Pagination.Link href="#" isActive=true> {"2"->React.string} </Pagination.Link>
    </Pagination.Item>
    <Pagination.Item>
      <Pagination.Link href="#"> {"3"->React.string} </Pagination.Link>
    </Pagination.Item>
    <Pagination.Item>
      <Pagination.Ellipsis />
    </Pagination.Item>
    <Pagination.Item>
      <Pagination.Next href="#" />
    </Pagination.Item>
  </Pagination.Content>
</Pagination>

Examples

Simple

A simple pagination with only page numbers.

@react.component
let make = () =>
  <Pagination>

Icons Only

Use just the previous and next buttons without page numbers. This is useful for data tables with a rows per page selector.

@react.component
let make = () =>
  <div className="flex items-center justify-between gap-4">

Next.js

By default the <Pagination.Link /> component will render an <a /> tag.

To use the Next.js <Link /> component, make the following updates to Pagination.res.

 
module Link = (...) => 
  <Item>
-   <a>
+   <Link>
      // ...
-   </a>
+   </Link>
  </Item>