Search blocks by description or jump to a page.
Table footer pagination in two densities: a numbered bar with a row range and rows per page control, plus a compact prev and next variant.
The source for every Application block is included with Pro and Team. Start a plan to copy the code.
Already on a plan? Log in
Pagination Bar renders two pagination densities stacked. The first is a numbered bar under a member table stub with Name, Role, and Last active columns and three rows (Priya Raman, Jonas Weber, Alba Ferrer). Its footer pairs a Showing 76 to 100 of 1,284 range summary and a Rows per page control reading 25 with the numbered pager: previous, page 1, an ellipsis, pages 3 through 5 with 4 active, another ellipsis, then page 52, and next. The second is a compact first page variant, a single row with Previous disabled, a Page 1 of 52 position, and Next.
Both are built on the ui/pagination primitives, so the active link, ellipsis, and prev and next controls come from the library. The pages array carries label, active, and ellipsis flags; the middle numbers hide under sm via hidden sm:block while the active page always shows.
Reach for this block under any paged table or list. Wire the range summary to your query offset and total count, the Rows per page control to your page size, and the page array to your current cursor so the active number tracks the data.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the footer under a records table. Other configurations:
Tip: the middle page numbers hide under sm while the active page stays, so the bar never wraps or overflows on a narrow table.