Skip to main content

Pagination

Storybook

To implement Pagination component into your project you'll need to add the import:

import { Pagination } from "@shoptet/ui";

After adding import into your project you can use it simply like:

<Pagination
  summary="<strong>124</strong> items total"
  limits={
    <Pagination.Limits
      itemsPerPage={25}
      label="Products per page"
      onChange={() => {}}
    />
  }
  pages={
    <Pagination.Pages
      pagesTotal={5}
      pageCurrent={1}
      previousPageUrl={null}
      nextPageUrl="/page/2"
      getLinkProps={(page) => ({ href: `?from=${page}`, onClick: () => {} })}
    />
  }
  jump={
    <Pagination.Jump
      totalPages={5}
      label="Show page"
      getLinkProps={(page: number) => ({ href: `?from=${page}` })}
    />
  }
/>