Ark UI

Basic Usage

First, import the required components from the package:

import {
  Pagination,
  PaginationEllipsis,
  PaginationList,
  PaginationListItem,
  PaginationNextPageTrigger,
  PaginationPageTrigger,
  PaginationPrevPageTrigger,
} from '@ark-ui/react'

Here’s an example of how to use the Pagination component:

import { useState } from 'react'
import {
  Pagination,
  PaginationEllipsis,
  PaginationList,
  PaginationListItem,
  PaginationNextPageTrigger,
  PaginationPageTrigger,
  PaginationPrevPageTrigger,
} from '@ark-ui/react'

const Basic = () => (
  <Pagination defaultPage={2} count={5000} pageSize={10} siblingCount={2}>
    {({ pages }) => (
      <PaginationList>
        <PaginationListItem>
          <PaginationPrevPageTrigger>Previous Page</PaginationPrevPageTrigger>
        </PaginationListItem>
        {pages.map((page, index) =>
          page.type === 'page' ? (
            <PaginationListItem key={index}>
              <PaginationPageTrigger {...page}>{page.value}</PaginationPageTrigger>
            </PaginationListItem>
          ) : (
            <PaginationListItem key={index}>
              <PaginationEllipsis index={index}>&#8230;</PaginationEllipsis>
            </PaginationListItem>
          ),
        )}
        <PaginationListItem>
          <PaginationNextPageTrigger>Next Page</PaginationNextPageTrigger>
        </PaginationListItem>
      </PaginationList>
    )}
  </Pagination>
)

import { For, createSignal } from 'solid-js'
import {
  Pagination,
  PaginationEllipsis,
  PaginationList,
  PaginationListItem,
  PaginationNextPageTrigger,
  PaginationPageTrigger,
  PaginationPrevPageTrigger,
} from '@ark-ui/solid'

const Basic = () => (
  <Pagination count={5000} pageSize={10} siblingCount={2}>
    {(api) => (
      <PaginationList>
        <PaginationListItem>
          <PaginationPrevPageTrigger>
            Previous <span class="visually-hidden">Page</span>
          </PaginationPrevPageTrigger>
        </PaginationListItem>

        <For each={api().pages}>
          {(page, index) =>
            page.type === 'page' ? (
              <PaginationListItem>
                <PaginationPageTrigger value={page.value}>{page.value}</PaginationPageTrigger>
              </PaginationListItem>
            ) : (
              <PaginationListItem>
                <PaginationEllipsis index={index()}>&#8230;</PaginationEllipsis>
              </PaginationListItem>
            )
          }
        </For>
        <PaginationListItem>
          <PaginationNextPageTrigger>
            Next <span class="visually-hidden">Page</span>
          </PaginationNextPageTrigger>
        </PaginationListItem>
      </PaginationList>
    )}
  </Pagination>
)

<script setup lang="ts">
import {
  Pagination,
  PaginationEllipsis,
  PaginationList,
  PaginationListItem,
  PaginationNextPageTrigger,
  PaginationPageTrigger,
  PaginationPrevPageTrigger,
} from '@ark-ui/vue'
</script>

<template>
  <Pagination v-slot="{ pages }" :count="5000" :page-size="10" :sibling-count="2">
    <PaginationList>
      <PaginationPrevPageTrigger>Previous Page</PaginationPrevPageTrigger>
      <template v-for="(page, index) in pages">
        <PaginationPageTrigger v-if="page.type === 'page'" :key="page" :value="page.value">
          {{ page.value }}
        </PaginationPageTrigger>
        <PaginationEllipsis v-else :key="index" :index="index"> &#8230; </PaginationEllipsis>
      </template>
      <PaginationListItem>
        <PaginationNextPageTrigger>Next Page</PaginationNextPageTrigger>
      </PaginationListItem>
    </PaginationList>
  </Pagination>
</template>

Controlled Pagination

To create a controlled Pagination component, manage the state of the current page using the page prop and update it when the onChange event handler is called:

import { useState } from 'react'
import {
  Pagination,
  PaginationEllipsis,
  PaginationList,
  PaginationListItem,
  PaginationNextPageTrigger,
  PaginationPageTrigger,
  PaginationPrevPageTrigger,
} from '@ark-ui/react'

const Controlled = () => {
  const [currentPage, setCurrentPage] = useState(1)

  return (
    <Pagination
      count={5000}
      pageSize={10}
      siblingCount={2}
      page={currentPage}
      onPageChange={(details) => setCurrentPage(details.page)}
    >
      {/* ... */}
    </Pagination>
  )
}

import { For, createSignal } from 'solid-js'
import {
  Pagination,
  PaginationEllipsis,
  PaginationList,
  PaginationListItem,
  PaginationNextPageTrigger,
  PaginationPageTrigger,
  PaginationPrevPageTrigger,
} from '@ark-ui/solid'

const Controlled = () => {
  const [currentPage, setCurrentPage] = createSignal(1)

  return (
    <Pagination
      count={5000}
      pageSize={10}
      siblingCount={2}
      page={currentPage()}
      onPageChange={(details) => setCurrentPage(details.page)}
    >
      {/* ... */}
    </Pagination>
  )
}

Story not available

Customizing Pagination

You can customize the Pagination component by setting various props such as dir, pageSize, siblingCount, and translations. Here’s an example of a customized Pagination:

import { useState } from 'react'
import {
  Pagination,
  PaginationEllipsis,
  PaginationList,
  PaginationListItem,
  PaginationNextPageTrigger,
  PaginationPageTrigger,
  PaginationPrevPageTrigger,
} from '@ark-ui/react'

const Customized = () => (
  <Pagination
    count={5000}
    pageSize={20}
    siblingCount={3}
    dir="ltr"
    translations={{
      nextPageTriggerLabel: 'Next',
      prevPageTriggerLabel: 'Prev',
      pageTriggerLabel: (details) => `Page ${details.page}`,
    }}
  >
    {/* ... */}
  </Pagination>
)

import { For, createSignal } from 'solid-js'
import {
  Pagination,
  PaginationEllipsis,
  PaginationList,
  PaginationListItem,
  PaginationNextPageTrigger,
  PaginationPageTrigger,
  PaginationPrevPageTrigger,
} from '@ark-ui/solid'

const Customized = () => {
  return (
    <Pagination
      count={5000}
      pageSize={20}
      siblingCount={3}
      dir="ltr"
      translations={{
        nextPageTriggerLabel: 'Next',
        prevPageTriggerLabel: 'Prev',
        pageTriggerLabel: (details) => `Page ${details.page}`,
      }}
    >
      {/* ... */}
    </Pagination>
  )
}

Story not available

Conclusion

The Pagination component offers an intuitive and flexible solution for managing paginated content in your applications. With its extensive set of features and customization options, it can accommodate a wide range of use cases and designs.