Pagination Options
A set of options that are related to table pagination. Each of these are optional and reasonable defaults will be used if you leave off the property.
<vue-good-table
:columns="columns"
:rows="rows"
:pagination-options="{
enabled: true,
perPage: 5,
position: 'top',
perPageDropdown: [3, 7, 9],
dropdownAllowAll: false,
setCurrentPage: 2,
nextLabel: 'next',
prevLabel: 'prev',
rowsPerPageLabel: 'Rows per page',
ofLabel: 'of',
allLabel: 'All',
}">
</vue-good-table>
enabled
type: Boolean (default: false)
Enable Pagination for table. By default the paginator is created at the bottom of the table.
<vue-good-table
:columns="columns"
:rows="rows"
:pagination-options="{
enabled: true
}">
</vue-good-table>
position
type: String (default: 'bottom')
Add pagination on 'top' or 'bottom' (top and bottom) of the table (default position is bottom)
<vue-good-table
:columns="columns"
:rows="rows"
:pagination-options="{
enabled: true,
position: 'top'
}">
</vue-good-table>
perPage
type: Integer (default: 10)
Number of rows to show per page
<vue-good-table
:columns="columns"
:rows="rows"
:pagination-options="{
enabled: true,
perPage: 5
}">
</vue-good-table>
perPageDropdown
type: Array (default: [10,20,30,40,50])
Customize the dropdown options for the amount of items per page
<vue-good-table
:columns="columns"
:rows="rows"
:pagination-options="{
enabled: true,
perPageDropdown: [3, 7, 9]
}">
</vue-good-table>
dropdownAllowAll
type: Boolean (default: true)
enables/disables 'All' in the per page dropdown.
<vue-good-table
:columns="columns"
:rows="rows"
:pagination-options="{
enabled: true,
perPageDropdown: [3, 7, 9],
dropdownAllowAll: false,
}">
</vue-good-table>
setCurrentPage
type: Number
set current page programmatically.
WARNING
There's no validation for number of pages so please be careful using this.
<vue-good-table
:columns="columns"
:rows="rows"
:pagination-options="{
enabled: true,
setCurrentPage: 2,
}">
</vue-good-table>
pagination label/text options
you can change one or more of the texts shown on pagination by overriding the labels in the following way:
<vue-good-table
:columns="columns"
:rows="rows"
:pagination-options="{
enabled: true,
nextLabel: 'next',
prevLabel: 'prev',
rowsPerPageLabel: 'Rows per page',
ofLabel: 'of',
allLabel: 'All',
}">
</vue-good-table>