Paginated Table
Customers table with a working pagination footer showing numbered page buttons, previous and next controls, and a live range summary line.
Customers table with a working pagination footer showing numbered page buttons, previous and next controls, and a live range summary line.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Paginated Table is the customers view with a working pagination footer wired underneath. Twelve accounts run from Northwind Labs to Lamna Healthcare, five per page, each row showing the company name and billing email, a plan Badge (Team, Growth, or Free), plus right-aligned seats, MRR, and created date in tabular figures. The footer carries a range line reading Showing 1 to 5 of 12 customers, numbered page buttons that mark the active page with an outline variant and aria-current, and Previous and Next controls that disable at the two edges.
Customers are one typed array and the current page lives in a single useState. The slice, range end, and page count all derive from a PAGE_SIZE constant, so changing the page size is a one line edit. The footnote names the upgrade path: swap the client slice for a server query with limit and offset once the dataset outgrows one payload.
Reach for this block on any list long enough to break into pages but small enough that a full data grid is overkill, wired to your accounts or records endpoint. Move the page number into a URL search param when the current page should survive navigation and refresh.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the billing customers list. Other paginated tables:
Tip: keep the range line and the numbered buttons in agreement; if one says page 3 and the other shows rows from page 2, users stop trusting both.