Table Pagination

Table pagination feature, supporting client-side pagination (automatic slicing) and server-side pagination (remote request).

Client-Side Pagination

Pass full data to the table, which automatically slices and renders based on the pagination component state. Suitable for scenarios with small data volume (e.g., thousands of records).

ID	Name	Age	Address

1	User 1	20	Some City, Street 1
2	User 2	21	Some City, Street 2
3	User 3	22	Some City, Street 3
4	User 4	23	Some City, Street 4
5	User 5	24	Some City, Street 5
6	User 6	25	Some City, Street 6
7	User 7	26	Some City, Street 7
8	User 8	27	Some City, Street 8
9	User 9	28	Some City, Street 9
10	User 10	29	Some City, Street 10

• 1
• 2
• 3
• 4
• 5

Client-Side Pagination

Server-Side Pagination

Set pagination.remote to true to disable automatic slicing. Users need to listen to the page-change event, manually call the API to fetch data and update :data.

ID	Name	Age	Address

No Data

Total 0

• 1

Go to

Server-Side Pagination (Remote Request)

API

PaginationConfig

Pagination configuration options:

Property	Description	Type	Default
currentPage	Current page number	number	1
pageSize	Number of items per page	number	10
total	Total number of items	number	0
pageSizes	Items per page options	number[]	[10, 20, 50, 100]
layout	Pagination layout	string	'total, sizes, prev, pager, next, jumper'
remote	Whether remote pagination	boolean	false
align	Alignment	'left' | 'center' | 'right'	'left'
background	Show background	boolean	false
small	Use small pagination	boolean	false
hideOnSinglePage	Hide on single page	boolean	false

Events

Event Name	Description	Callback Parameters
page-change	Triggered when pagination parameters change	(params: { currentPage: number, pageSize: number }) => void