Paginator API

API documentation for Paginator component

PaginatorRoot#

Props#

Defines valid properties in Paginator component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: PaginatorRootInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: PaginatorRootInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<PaginatorRootPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: PaginatorRootInstance) => ReactNode)	null	The children to render.
defaultPage	number	1	Default page number.
page	number	null	Current page number (controlled).
total	number	0	Total number of items.
itemsPerPage	number	10	Number of items per page.
onPageChange	(event: usePaginatorChangeEvent) => void	null	Callback fired when the page changes.
siblings	number	2	Number of sibling pages to show on each side of current page.
edges	number	1	Number of edge pages to show at the beginning and end.
disabled	boolean	false	Whether the paginator is disabled.
showEllipsis	boolean	true	Whether to show ellipsis.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

State#

Defines valid state in Paginator component.

name	type	default	description
activePage	number	null	Current active page number.
canPrev	boolean	null	Whether the previous page is available.
canNext	boolean	null	Whether the next page is available.
totalPages	number	null	Total number of pages.

Exposes#

Defines the methods and properties exposed by Paginator component.

name	type	default	description
getAriaLabel	(labelType: string) => string	null	Get the aria label for the given label type.
prev	() => void	null	Go to previous page.
next	() => void	null	Go to next page.
first	() => void	null	Go to first page.
last	() => void	null	Go to last page.
handlePage	(page?: number) => void	null	Set the current page.
pages	PaginatorPageItem[]	null	Pages array.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of Paginator component.

name	type	default	description
root	PaginatorRootPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.
content	PaginatorRootPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the content's DOM element.
first	PaginatorRootPassThroughType<HTMLAttributes<HTMLButtonElement>>	null	Used to pass attributes to the first's DOM element.
prev	PaginatorRootPassThroughType<HTMLAttributes<HTMLButtonElement>>	null	Used to pass attributes to the prev's DOM element.
next	PaginatorRootPassThroughType<HTMLAttributes<HTMLButtonElement>>	null	Used to pass attributes to the next's DOM element.
last	PaginatorRootPassThroughType<HTMLAttributes<HTMLButtonElement>>	null	Used to pass attributes to the last's DOM element.

Types#

Instance

Instance of Paginator component.

values
ComponentInstance<PaginatorRootProps, PaginatorRootState, PaginatorRootExposes>

PaginatorPages#

Props#

Defines valid properties in PaginatorPages component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: PaginatorPagesInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: PaginatorPagesInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<PaginatorPagesPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: PaginatorPagesInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by PaginatorPages component.

name	type	default	description
paginator	PaginatorRootInstance	null

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of PaginatorPages component.

name	type	default	description
root	PaginatorPagesPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of PaginatorPages component.

values
ComponentInstance<PaginatorPagesProps, PaginatorPagesState, PaginatorPagesExposes>

PaginatorPage#

Props#

Defines valid properties in PaginatorPage component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: PaginatorPageInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: PaginatorPageInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<PaginatorPagePassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: PaginatorPageInstance) => ReactNode)	null	The children to render.
disabled	boolean	null	Used to disable the page button.
value	number	null	Used to set the value of the page button.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by PaginatorPage component.

name	type	default	description
paginator	PaginatorRootInstance	null

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of PaginatorPage component.

name	type	default	description
root	PaginatorPagePassThroughType<HTMLAttributes<HTMLButtonElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of PaginatorPage component.

values
ComponentInstance<PaginatorPageProps, PaginatorPageState, PaginatorPageExposes>

PaginatorEllipsis#

Props#

Defines valid properties in PaginatorEllipsis component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: PaginatorEllipsisInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: PaginatorEllipsisInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<PaginatorEllipsisPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: PaginatorEllipsisInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by PaginatorEllipsis component.

name	type	default	description
paginator	PaginatorRootInstance	null

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of PaginatorEllipsis component.

name	type	default	description
root	PaginatorEllipsisPassThroughType<HTMLAttributes<HTMLButtonElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of PaginatorEllipsis component.

values
ComponentInstance<PaginatorEllipsisProps, PaginatorEllipsisState, PaginatorEllipsisExposes>

PaginatorFirst#

Props#

Defines valid properties in PaginatorFirst component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: PaginatorFirstInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: PaginatorFirstInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<PaginatorFirstPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: PaginatorFirstInstance) => ReactNode)	null	The children to render.
disabled	boolean	null	Used to disable the first button.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by PaginatorFirst component.

name	type	default	description
paginator	PaginatorRootInstance	null

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of PaginatorFirst component.

name	type	default	description
root	PaginatorFirstPassThroughType<HTMLAttributes<HTMLButtonElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of PaginatorFirst component.

values
ComponentInstance<PaginatorFirstProps, PaginatorFirstState, PaginatorFirstExposes>

PaginatorLast#

Props#

Defines valid properties in PaginatorLast component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: PaginatorLastInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: PaginatorLastInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<PaginatorLastPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: PaginatorLastInstance) => ReactNode)	null	The children to render.
disabled	boolean	null	Used to disable the last button.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by PaginatorLast component.

name	type	default	description
paginator	PaginatorRootInstance	null

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of PaginatorLast component.

name	type	default	description
root	PaginatorLastPassThroughType<HTMLAttributes<HTMLButtonElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of PaginatorLast component.

values
ComponentInstance<PaginatorLastProps, PaginatorLastState, PaginatorLastExposes>

PaginatorNext#

Props#

Defines valid properties in PaginatorNext component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: PaginatorNextInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: PaginatorNextInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<PaginatorNextPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: PaginatorNextInstance) => ReactNode)	null	The children to render.
disabled	boolean	null	Used to disable the next button.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by PaginatorNext component.

name	type	default	description
paginator	PaginatorRootInstance	null

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of PaginatorNext component.

name	type	default	description
root	PaginatorNextPassThroughType<HTMLAttributes<HTMLButtonElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of PaginatorNext component.

values
ComponentInstance<PaginatorNextProps, PaginatorNextState, PaginatorNextExposes>

PaginatorPrev#

Props#

Defines valid properties in PaginatorPrev component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: PaginatorPrevInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: PaginatorPrevInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<PaginatorPrevPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: PaginatorPrevInstance) => ReactNode)	null	The children to render.
disabled	boolean	null	Used to disable the previous button.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by PaginatorPrev component.

name	type	default	description
paginator	PaginatorRootInstance	null

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of PaginatorPrev component.

name	type	default	description
root	PaginatorPrevPassThroughType<HTMLAttributes<HTMLButtonElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of PaginatorPrev component.

values
ComponentInstance<PaginatorPrevProps, PaginatorPrevState, PaginatorPrevExposes>

usePaginator#

Props#

Defines valid properties in usePaginator.

name	type	default	description
defaultPage	number	1	Default page number.
page	number	null	Current page number (controlled).
total	number	0	Total number of items.
itemsPerPage	number	10	Number of items per page.
onPageChange	(event: usePaginatorChangeEvent) => void	null	Callback fired when the page changes.
siblings	number	2	Number of sibling pages to show on each side of current page.
edges	number	1	Number of edge pages to show at the beginning and end.
disabled	boolean	false	Whether the paginator is disabled.
showEllipsis	boolean	true	Whether to show ellipsis.

State#

Defines valid state in usePaginator.

name	type	default	description
activePage	number	null	Current active page number.
canPrev	boolean	null	Whether the previous page is available.
canNext	boolean	null	Whether the next page is available.
totalPages	number	null	Total number of pages.

Exposes#

Defines the return type of usePaginator.

name	type	default	description
prev	() => void	null	Go to previous page.
next	() => void	null	Go to next page.
first	() => void	null	Go to first page.
last	() => void	null	Go to last page.
handlePage	(page?: number) => void	null	Set the current page.
pages	PaginatorPageItem[]	null	Pages array.

Types#

Instance

Instance of usePaginator headless.

values
HeadlessInstance<usePaginatorProps, usePaginatorState, usePaginatorExposes>