Pagination

A comprehensive pagination component with navigation controls, page numbers, and ellipsis indicators. Perfect for navigating through large datasets.

Import

import { Pagination } from "@sparrowengg/twigs-react";

Usage

const PaginationExample = () => {
  const [activePage, setActivePage] = useState(1);

  return (
    <Box css={{ display: "flex", flexDirection: "column", gap: "$6", alignItems: "center" }}>
      <Flex gap="$4" alignItems="center">
        <Pagination
          activePage={activePage}
          itemsPerPage={10}
          total={100}
          onChange={(event, page) => setActivePage(page)}
        />
      </Flex>
    </Box>
  );
};

Examples

Advanced Pagination

Comprehensive example showing different pagination configurations with various sizes, sibling counts, and page ranges.

Props

Prop	Type	Default
`total?`	`number`	-
`itemsPerPage?`	`number`	-
`activePage?`	`number`	-
`siblingCount?`	`number`	`1`
`onChange?`	`(event: SyntheticEvent, page: number) => void`	-
`size?`	`'xxs' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'`	`'sm'`
`css?`	`object`	-

Pagination

Import

Usage

Examples

Advanced Pagination

Props

Pagination

On this page