Pagination

Pagination displays page navigation and lets users change the current page. It can be used with list components such as Basic List and Custom List.
When combined with list components, pagination can be implemented pseudo-functionally using pagination actions.
This is a component added in v3.4.0.

Properties

No	Item	Input	Default	Action Property	Type	Action Default	Description
1	ID	string	Auto	id	string	Auto	The [id] property cannot be set by actions.
2	Width	number	350	width	number	350	Component width
3	Height	number	40	height	number	40	Component height
4	X	number		x	number		X coordinate
5	Y	number		y	number		Y coordinate
7	Variant	select 1. Text 2. Outlined	Text	variant	string	text	Pagination style
8	Shape	select 1. Circular 2. Rounded	Circular	shape	string	circular	Pagination shape
9	Color	string Color Picker		color	string		Component color
10	Size	select 1. Medium 2. Large 3. None	Medium	size	string	medium	Size of each button that makes up the pagination. When [None], [Font Size] can be set arbitrarily.
11	Font Size	number	14	fontSize	number	14	Font size of each button that makes up the pagination Effective only when [Size] is “None”
12	Count	number	10	count	number	10	Total page count (1 or more)
13	Boundary Count	number	1	boundaryCount	number	1	Pages always shown at the start and end
14	Sibling Count	number	1	siblingCount	number	1	Adjacent pages shown before and after the current page
15	Show First Button	boolean	OFF	showFirstButton	boolean	false	Show button to go to the first page
16	Show Last Button	boolean	OFF	showLastButton	boolean	false	Show button to go to the last page
17	Hide Next Button	boolean	OFF	hideNextButton	boolean	false	Hide the button to go to the next page
18	Hide Previous Button	boolean	OFF	hidePrevButton	boolean	false	Hide the button to go to the previous page
19	Disabled	boolean	OFF	disabled	boolean	false	Component disabled/enabled state
20	Visibility	boolean	ON	visibility	boolean	true	Show/Hide the component
21	Page	number	1	page	number	1	Current page number (1-based)
22	Change Event	select 1. None 2. Action	None				Event setting on page change

Note

• [page] starts at 1. Specify 1 or more for [count].
• If you set the Change Event to “Action”, an action is executed when the page changes. Inside the action, refer to $ui.<componentId>.page for the current page and $ui.<componentId>.count for total pages.
• When using list components, pseudo pagination can be implemented by setting the offset and limit of SQL functions in the pagination action to retrieve data.

Events

Event Name	Description
onchange	Fired when the page number changes.