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

Question

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>

Answer 1

This is the current solution for Vuetify 2.3+.

Single component:

<v-data-table
  :items-per-page="10"
  :footer-props="{ 'items-per-page-options': [10, 50, 100, -1] }"
/>

Overriding globally:

It is possible to override the default property on a component's property:

import VDataFooter from 'vuetify/lib/components/VDataIterator/VDataFooter';

VDataFooter.options.props.itemsPerPageOptions.default = () => [10, 50, 100, -1];

This will prevent you from having to set the footer props every time you render a <v-data-table />.

Nuxt.js edition

Add the following file vuetify-defaults.js to your plugins directory:

import VDataFooter from 'vuetify/lib/components/VDataIterator/VDataFooter';

export default () => {
  VDataFooter.options.props.itemsPerPageOptions.default = () => [10, 50, 100, -1];
};

Now in your nuxt.js.config file, add the file to your plugins array:

{
  plugins: [
    '~/plugins/vuetify-defaults.js'
  ]
}