shadcn.io is not affiliated with official shadcn/ui
Paginated Orders Table Block for React Aria
An orders table of 24 rows that pages: a rows-per-page menu, the numbered pagination, a polite line saying which orders are on screen, and every page drawn once more unseen so the pager never moves.
Installation
Overview
Page through a long table without the page jumping, with this paginated orders table for React with React Aria. A compact header names the desk, and one framed panel with a plus mark on each corner holds a native table of orders and a band that ends the block. The band has a Select for rows per page (5 or 10), a polite line that says where you are ("Page 2 of 5, showing 6 to 10 of 24 orders") and the catalog Pagination: Previous, the numbered pages and Next, each a real link to its own address that swaps the rows in place, with the ends disabled and out of the tab order. Choosing another size keeps the first row you can see on screen. Every page of the current size is also drawn once more, unseen, in the same cell, so the tallest sets the height and the pager never moves when you change page. On a phone and below the large breakpoint the order number, customer and date fold under the title, so nothing scrolls sideways. It's built from Pagination, Select, Badge and Guides, with a CSS entrance only. For order desks, ledgers, admin lists and any table too long for one screen.
FAQ
How do I fill it with my own rows?
Edit ORDERS, newest first, each with an id, a customer, a title, an amount in dollars, a date as an ISO day and a status of packing, shipped or collected. SIZES lists the rows-per-page choices. The number of pages, the polite line, the first and last row shown and the numbered links are all worked out from the rows and the size, so nothing is typed twice. Dates are written in UTC, so they read the same on the server and in every visitor's time zone.
Does it fetch anything, and how do I page a real list?
No: the 24 orders are typed rows and rowsOf cuts the page out of them. For a real list, keep the pager as it is, request the page and size in go and chooseSize and render the rows that come back, with the total from the response. Each page number is a real link to ?page=n, so you can make it a route of your own, and the click is cancelled only so the demo can swap the rows in place.
How does the pager stay still?
Every page of the current size is rendered again behind the visible one, in the same grid cell, invisible, inert and hidden from assistive technology. The cell is as tall as the tallest page, so a short last page leaves its space and the band under it never moves; this holds on a phone, where long titles wrap. Changing the rows per page does change the height, because it changes how many rows there are, and the menu keeps the first row you can see on screen.
Is the pager accessible?
The pager is a named navigation landmark holding a list of links. The current page is marked with aria-current="page", the disabled end is aria-disabled and out of the tab order (React Aria uses isDisabled), and Previous and Next carry names even where their words are hidden on a phone. The polite status line is present from the start and says the page and the range after every change. Focus stays on the link you pressed, so you can keep pressing Next from the keyboard; if the pressed end becomes disabled, focus moves to the current page. On React Aria the links are its Link: they take onPress and are disabled with isDisabled.
What happens with many pages?
Up to seven pages show every number. Past that the pager keeps seven fixed slots: the first page, the last, a window around the current one and a gap on each skipped side, so it never changes width as you move. With 24 orders the pager only needs that at a size under four, but the helper is there for your own data.
How does it look on a phone?
The table keeps Title, Amount and Status, with the order number, customer and date as a second line under the title. Under it the band stacks: the line saying where you are, the rows-per-page menu and the pager, whose Previous and Next shrink to arrows beside the page numbers.