A navigation control for paged data. It lives beside a table or list, never inside it. Controlled-by-attribute but self-updating: clicking moves the page (updating page) and emits nana-page-change so consumers can slice (client-side) or refetch (server-side).
Show code Copy < nana-pagination page = "1" total-pages = "10" ></ nana-pagination >
npm install @nana-tec/ui-components
import " @nana-tec/ui-components/pagination " ;
< nana-pagination page = " 1 " total-pages = " 10 " ></ nana-pagination >
The layout attribute switches between numbered (default), compact, and
simple.
Show code Copy < nana-pagination page = "4" total-pages = "20" layout = "numbered" show-first-last ></ nana-pagination > < nana-pagination page = "4" total-pages = "20" layout = "compact" ></ nana-pagination > < nana-pagination page = "4" total-pages = "20" layout = "simple" ></ nana-pagination >
Show code Copy < nana-pagination page = "6" total-pages = "64" variant = "default" ></ nana-pagination > < nana-pagination page = "6" total-pages = "64" variant = "soft" ></ nana-pagination > < nana-pagination page = "6" total-pages = "64" variant = "filled" ></ nana-pagination > < nana-pagination page = "6" total-pages = "64" variant = "pill" ></ nana-pagination > < nana-pagination page = "6" total-pages = "64" variant = "ghost" ></ nana-pagination >
Show code Copy < nana-pagination page = "3" total-pages = "10" size = "sm" variant = "soft" ></ nana-pagination > < nana-pagination page = "3" total-pages = "10" size = "md" variant = "soft" ></ nana-pagination > < nana-pagination page = "3" total-pages = "10" size = "lg" variant = "soft" ></ nana-pagination >
Properties Property Attribute Type Default Description boundaryCountboundary-countnumber1Page numbers pinned at each end disabled— booleanfalseDisable the whole control (e.g. while loading) layout— PaginationLayout'numbered'Structural layout page— number1Current page (1-based) pageSizepage-sizenumber10Rows per page pageSizeOptionspage-size-optionsstring'10,25,50,100'Comma-separated page-size options showFirstLastshow-first-lastbooleanfalseShow « First / Last » buttons showJumpshow-jumpbooleanfalseShow the jump-to-page input showPageSizeshow-page-sizebooleanfalseShow the rows-per-page selector showResultCountshow-result-countbooleanfalseShow the "Showing X–Y of Z" summary siblingCountsibling-countnumber1Page numbers shown either side of the current page size— PaginationSize'md'Control size totalItemstotal-itemsnumber | undefined—Total number of items — derives total pages and the result count totalPagestotal-pagesnumber | undefined—Explicit total pages (used when totalItems is unknown) variant— PaginationVariant'default'Visual style
Events Event Description nana-page-changedetail: { page } nana-page-size-changedetail: { pageSize }
CSS parts Part Description ::part(nav)The controls container ::part(ellipsis)The truncation gap (…)
CSS custom properties Property Description --nana-pagination-radiusCorner radius of the page controls --nana-pagination-active-bgActive page background (filled / pill) --nana-pagination-active-colorActive page text colour (filled / pill)
Event Type Description nana-page-changeCustomEventdetail: { page } nana-page-size-changeCustomEventdetail: { pageSize }
Variable Default Description --nana-pagination-radius— Corner radius of the page controls --nana-pagination-active-bg— Active page background (filled / pill) --nana-pagination-active-color— Active page text colour (filled / pill)
Part Description navThe controls container — every page-number and navigation button ellipsisThe truncation gap (…) between page runs
Keyboard accessible Screen-reader labels Focus-visible states ARIA roles and states WCAG 2.2 AA contrast Explore Pagination interactively Every state, prop, and edge case — with live controls — in Storybook.
