How to set initial 'rows per page' value in Vuetify DataTable component?
Use the pagination.sync
to control pagination:
<v-data-table
:headers="headers"
:items="equipment"
class="elevation-1"
:rows-per-page-items="[15, 30, 50, 100]"
:pagination.sync="pagination">
<template v-slot:items="props">
<td>{{ props.item.name }}</td>
</template>
</v-data-table>
...
data() {
return {
pagination: {
rowsPerPage: 30
}, ...
}
}
[ https://jsfiddle.net/95yf1xe8/ ]
This is the current interface as of version 2.3.4+:
<v-data-table
....
:footer-props="{'items-per-page-options':[2,15, 30, 50, 100, -1]}"
:options="options">
....
</v-data-table>
...
data() {
return {
options: {
itemsPerPage: 100
}, ...
}
}
In case someone runs into this but wants it for vuetify 2
It has changed to use the footer-props
:footer-props="{'items-per-page-options':[15, 30, 50, 100, -1]}"
with -1 for all
See the api in vuetify docs
with the footer props in the v-data-footer
component of the tables api.