Pagination
Usage
Page navigation for a long result set. The window shows two pages either side of the current one with ellipses beyond, so the control keeps a stable width whether there are ten pages or ten thousand.import { Pagination } from '@summonware/ui';Best practices
DoKeep the total count visible nearby. "Page 4 of 12" is more use than the control alone.
DoPut pagination below the list, and repeat it above when the list is longer than a screen.
Don'tPaginate fewer than about two screens of content. Just show it all.
Don'tReset to page 1 on unrelated state changes — it loses the user's place for no reason.
Examples
Common configurations, variations and states.Windowed
Page 4 of 12
Page 4 of 12 — two neighbours each side, with the first and last always reachable.
Few pages
Page 2 of 4
Below the window size every page is listed and no ellipsis appears.