pagination

import { pagination } from '@markless/ui';

export default function Pagesfunction Pages(): Element() @{@{ · Component bodyOpens the body of a component, where ordinary statements and the markup they produce sit together.
	<pagination.root(alias) function root({ count, page, siblingCount, disabled, onChange, children, ...rest }: pagination.PaginationRootProps): Element count(property) count: numberHow many pages there are in total - pages, not rows. How many rows fit on a page is the consumer's data layer, and a component told about the data twice can disagree with itself.={5} page(property) page?: number | undefinedWhich page is showing, counting from 1. Omit it and it starts at page 1.={1}>
		<pagination.backtrigger(alias) function backtrigger({ children, onClick, ...rest }: pagination.PaginationBackTriggerProps): Element>Previous</pagination.backtrigger(alias) function backtrigger({ children, onClick, ...rest }: pagination.PaginationBackTriggerProps): Element>
		<pagination.item(alias) function item({ value, children, ...rest }: pagination.PaginationItemProps): Element value(property) value: numberWhich page this box stands for, counting from 1.={1}>
			<pagination.itemtrigger(alias) function itemtrigger({ children, onClick, ...rest }: pagination.PaginationItemTriggerProps): Element>1</pagination.itemtrigger(alias) function itemtrigger({ children, onClick, ...rest }: pagination.PaginationItemTriggerProps): Element>
		</pagination.item(alias) function item({ value, children, ...rest }: pagination.PaginationItemProps): Element>
		<pagination.item(alias) function item({ value, children, ...rest }: pagination.PaginationItemProps): Element value(property) value: numberWhich page this box stands for, counting from 1.={2}>
			<pagination.itemtrigger(alias) function itemtrigger({ children, onClick, ...rest }: pagination.PaginationItemTriggerProps): Element>2</pagination.itemtrigger(alias) function itemtrigger({ children, onClick, ...rest }: pagination.PaginationItemTriggerProps): Element>
		</pagination.item(alias) function item({ value, children, ...rest }: pagination.PaginationItemProps): Element>
		<pagination.forwardtrigger(alias) function forwardtrigger({ children, onClick, ...rest }: pagination.PaginationForwardTriggerProps): Element>Next</pagination.forwardtrigger(alias) function forwardtrigger({ children, onClick, ...rest }: pagination.PaginationForwardTriggerProps): Element>
	</pagination.root(alias) function root({ count, page, siblingCount, disabled, onChange, children, ...rest }: pagination.PaginationRootProps): Element>
}

The page number is written once, on the item, and the control inside reads it back, so the two can never fall out of step. count is pages, not rows — how many rows fit on a page is your data layer, and a component told about the data twice can disagree with itself. For long runs, ask the family which pages to draw: pagination.entries(count, page, siblingCount) returns the range, so how pages are picked can change without changing what you wrote.

There is no exported state for this family yet. A consumer reaches the range through pagination.entries rather than reading the instance.

Anatomy

• pagination.root — the <nav> landmark. Named "Pagination" unless you say otherwise.
• pagination.item — one page's box, declaring which page it stands for.
• pagination.itemtrigger — the control inside an item. It takes no page number of its own.
• pagination.itemlink — the same control over an <a>, for pagination with real URLs.
• pagination.backtrigger and pagination.forwardtrigger — one step either way.

It writes ui-active and ui-disabled.

Props on pagination.root

Prop	Type	What it does
count	number	How many pages there are in total. Required.
page	number	Which page is showing, counting from 1. Omit it and it starts at page 1.
siblingCount	number	How many pages to show on each side of the current one. Omit it and it is 1.
disabled	boolean	Nothing navigates, and every control reports unavailable.
onChange	(page) => void	Called with the new page number when a person moves to another page.

Everything a <nav> accepts reaches the element too. pagination.item takes its own value.