VVibeFlui

Pagination

Pagination is configured under table.pagination.

Basic pagination

TS
table: {
  pagination: {
    enabled: true,
    page: 1,
    pageSize: 10,
    pageSizeOptions: [10, 25, 50]
  }
}

Defaults

PropertyDefault
page1
pageSize10
pageSizeOptions[10, 25, 50]
pageParampage
pageSizeParampageSize

Server pagination

TS
table: {
  mode: "server",
  totalPath: "data.total",
  pagination: {
    enabled: true,
    pageParam: "page",
    pageSizeParam: "limit"
  }
}

In server mode, totalPath lets VibeFlui calculate the page count from the backend total.

The footer shows:

  • current page
  • total pages
  • total count when table.totalPath is set
  • previous and next buttons
  • page size select

Query state

TS
{
  page: 2,
  pageSize: 25
}