Pagination Primitives

[bnhr]

Do you folks consider creating a Pagination Component? I think it would be great if there is any chance to build complex things like Pagination...

[benoitgrelard]

Hey @bnhr can you provide more details on what you mean by Pagination component?
Do you mean something like in google search results?

Or are you envisaging something else entirely?

[bnhr]

Yea, something like that, next and prev with numeric button

[agustif]

I like how bumbag.style one works
https://www.bumbag.style/docs/components/pagination

[josias-r]

Bootstrap also has one (which I'm planning on replacing), for some reference
https://6-4-0--reactstrap.netlify.app/components/pagination/

[AurelianSpodarec]

So if you have 5000 items, are you going to see 5000 items in the select/dropdown?

[okalil]

@bnhr @benoitgrelard @jjenzz I would like to propose an api draft:

<Pagination.Root
  itemsPerPage={itemsPerPage}
  total={total}
  page={page}
  defaultPage={defaultPage}
  onPageChange={(page) => {  } }
>
  <Pagination.Previous></Pagination.Previous>
  <Pagination.List>
    {(items) =>
      items.map((item) => <PaginationItem /> )
    }
  </Pagination.List>
  <Pagination.Next></Pagination.Next>
</Pagination.Root>

PaginationList would receive a render function as children to map through page numbers and breaks...
What do you guys think?

PS:
Could also have something like Pagination.Select to support @agustif example...

[dimitropoulos]

if it's useful to you, the API you propose is similar to https://react-bootstrap.github.io/components/pagination/#more-options (see my other comment about react-ui-roundup)

[marko-hologram]

if it's useful to you, the API you propose is similar to https://react-bootstrap.github.io/components/pagination/#more-options (see my other comment about react-ui-roundup)

This React Bootstrap package has first/last page buttons which can be useful to easily go to start/end of the data list.

So maybe the updated API for this Radix implementation would be like this:

<Pagination.Root
  itemsPerPage={itemsPerPage}
  total={total}
  page={page}
  defaultPage={defaultPage}
  onPageChange={(page) => {  } }
>
  <Pagination.First></Pagination.First>
  <Pagination.Previous></Pagination.Previous>
  <Pagination.List>
    {(items) =>
      items.map((item) => <PaginationItem /> )
    }
  </Pagination.List>
  <Pagination.Next></Pagination.Next>
  <Pagination.Last></Pagination.Last>
</Pagination.Root>

[dimitropoulos]

for anyone interested, I added this to react-ui-roundup https://react-ui-roundup.dimitrimitropoulos.com/#Pagination

I was looking into implementing this with radix

[58bits]

I think pagination components can be both tough and quite opinionated and so perhaps that's the reason why the team at Radix UI have not yet included one.

I'm embarrassed to admit how long this took me but.. here's an example based on Radix Primitives and Tailwind...

https://github.com/infonomic/remix.infonomic.io/tree/develop/app/ui/components/pager

.. with a lot of help from the Material UI headless usePagination hook found here... https://mui.com/material-ui/react-pagination/#usepagination

[AurelianSpodarec]

I don't think its because they are opinionated.

A basic standard pagination doing the 'hard lifting' would be good enough. That's why we want the pagination.

[yangmingshan]

Hi guys, I found a independent component: https://github.com/thijssmudde/react-headless-pagination, and it looks nice. But yes I want Radix implement Pagination too.

[winters-song]

Hi guys, I think pagination logics is quite simple, so I've made a simple one:

import { Button } from "../ui/button";
import { ChevronLeft, ChevronRight } from "lucide-react";

interface IProps {
  page: number;
  count: number;
  onChange: (val: number) => void
}

const GROUP_MAX = 5; 
const half = Math.ceil(GROUP_MAX / 2)

export default function Pagination(props: IProps) {
  const { page, count, onChange } = props;

  const getButton = (current: number) => 
    <Button key={current} variant={`${page === current? 'secondary': 'ghost'}`} onClick={() => onChange(current)}>
      {current}
    </Button>
  

  return (
    <div className="mx-auto w-96 flex flex-row justify-center">
      {
        count > 1 && <Button variant="ghost" disabled={page===1} onClick={() => page > 1 && onChange(page - 1)}>
          <ChevronLeft />
        </Button>
      }

      {
        count <= GROUP_MAX + 2 ?
          Array(count).fill(0).map((item, index)=> getButton(index + 1)) : 
          <>
            {getButton(1)}
            { page > 1 + half && <span className=" leading-10">...</span> }
            { Array(GROUP_MAX).fill(0).map((item, index)=> {
              const p = page - half + index + 1
              return (p > 1 && p < count) ? getButton(p): ''
            })}
            { page < count - half && <span className=" leading-10">...</span> }
            {getButton(count)}
          </>
      }

      {
        count > 1 && <Button variant="ghost" disabled={page===count} onClick={() => page < count && onChange(page + 1)}>
          <ChevronRight />
        </Button>
      }
    </div>
  );
}```

[josfaber]

Great! Can be used as is in radix :-)

[benoitgrelard]

Duplicate of #1856