Paginator

Used to break up large datasets into smaller, more manageable chunks.

Paginator can be used on its own but it works great with the Table component.

Basic usage

By default, the paginator component has a pageSize of 10.

import { Paginator } from "@caspeco/casper-ui-library";

export default function Demo() {
  return <Paginator w="250px" itemCount={100} />;
}

Items

To react to page changes, you can use the onPageChange prop.

import { Box, Paginator } from "@caspeco/casper-ui-library";
import { useState } from "react";

export default function Demo() {
  const [pageIndex, setPageIndex] = useState(0);

  const items = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K"];
  const pageSize = 3;
  const itemsOnPage = items.slice(pageIndex * pageSize, (pageIndex + 1) * pageSize);

  return (
    <>
      <Box w="200px" h="75px" textAlign="right">
        {itemsOnPage.map((item) => (
          <div key={item}>{item}</div>
        ))}
      </Box>
      <Paginator pageSize={pageSize} itemCount={items.length} onPageChange={setPageIndex} />
    </>
  );
}

Variants

All the different variants

import { Flex, Paginator, ThemeSpace } from "@caspeco/casper-ui-library";

export default function Demo() {
  return (
    <Flex direction="column" alignItems="flex-start" gap={ThemeSpace.Medium}>
      <Paginator itemCount={100} variant="ghost" w="250px" />
      <Paginator itemCount={100} variant="outline" />
    </Flex>
  );
}