How to set initial 'rows per page' value in Vuetify DataTable component?

10
votes

I have a page with Vuetify DataTable component (Vuetify 1.5.7) and using default component's pagination. I set the 'Rows per page' select values using the :rows-per-page-items property.

Now I want to set initial value from this rows-per-page-items array (not only the first one!) when entering the page.

Is it possible and how can I do this?

Example code of table is shown below:

<v-data-table
            :headers="headers"
            :items="equipment"
            class="elevation-1"
            :rows-per-page-items='[15, 30, 50, 100]'>
      <template v-slot:items="props">
        <td>{{ props.item.name }}</td>
      </template>
</v-data-table>
4
vue.jsvuetify.js

4 Answers

9
votes

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/ ]

18
votes

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.

6
votes

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
    }, ...
  }
}
0
votes

Just in case someone runs into this but wants it for the latest vuetify 2

It has changed to use camel Casing itemsPerPageOptions from the old kebab casing items-per-page-options

:footer-props="{'itemsPerPageOptions':[15, 30, 50, 100, -1]}"