Data Table
Pagination
Numbered pages, a rows-per-page select and a "Showing 21–30 of 380" range, all built from pageInfo.
Preview
| 1 | Ada Lovelace | ada.lovelace@vitnode.com |
| 2 | Alan Ritchie | alan.ritchie@vitnode.com |
| 3 | Grace Lamarr | grace.lamarr@vitnode.com |
| 4 | Linus Torvalds | linus.torvalds@vitnode.com |
| 5 | Margaret Liskov | margaret.liskov@vitnode.com |
| 6 | Dennis Turing | dennis.turing@vitnode.com |
| 7 | Katherine Johnson | katherine.johnson@vitnode.com |
| 8 | Ken Berners-Lee | ken.berners-lee@vitnode.com |
| 9 | Barbara Hamilton | barbara.hamilton@vitnode.com |
| 10 | Guido van Rossum | guido.vanrossum@vitnode.com |
Showing 1–10 of 36
Usage
There's nothing to wire up. Pass pageInfo from the API and the table renders
numbered pages, a rows-per-page select (10, 20, 30 or 40) and a "Showing 21–30
of 380" range.
- Pages are real links.
?page=3works with middle-click and "open in new tab", while a plain click stays client-side. - Phones get a label. Below
sm, the numbers collapse to "Page 3 of 38" between the arrows. - Filters and page size reset to page one. The old page no longer means what it did.
- Too far lands on the last page. The API clamps a page past the end, so stale links still show rows.
The API does the counting. See Pagination for the route side, including the index your sorted column needs.