Paginated Orders Table Block for React

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.

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.

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.

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.

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.

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.