Skip to content

TablePagination

Any list in which the number of records is greater than the number of records to be displayed per page includes navigation to the next pages of results. Pagination (from "page"), i.e. dividing the results into pages, requires refreshing every time the parameters of the displayed list change.

Props

limit
required
Number of records displayed per page
type:Number
default:10
options
List of selection of the number of records displayed per page
type:Array as PropType<number[]>
default:[10, 20, 30]
size
Is responsible for the size of buttons
type:String
default:xs
values:xs, sm
firstTitle
Auxiliary text for the button with link to the first page of the results displayed
type:String
default:Go to first page
prevTitle
Auxiliary text for the button with link to the previous page of the results displayed
type:String
default:Go to previous page
nextTitle
Auxiliary text for the button with link to the next page of the results displayed
type:String
default:Go to next page
lastTitle
Auxiliary text for the button with link to the last page of the results displayed
type:String
default:Go to last page
loading
Information whether data is currently being loaded
type:Boolean
default:false
next
Number of the next page
type:number
default:1
prev
Number of the previous page
type:number
default:1
first
First page number
type:number
default:1
last
Last page number
type:number
default:1
page
The number of the current page
type:number
default:1
pages
Number of all pages
type:number
default:1

Slots

desc
Slot for text about the number of records.
pageof
Slot for text with number selected, default: "10 of 100 row(s) selected."
perpage
Slot for text indicating the page number of displayed results, default: "Page 1 of 10"

Events

set-limit
Updating the number of elements per page

Examples

Standard pagination
10 of 100 row(s) selected.
Rows per page
Page 1 of 2
html
<table-pagination :limit="20" :options=[10,20,30] :pages="2" :page="1" />