Understand `rows-per-page-items` at Vuetify Data iterators + Data tables, can I set default page?

Question

At Vuetify docs for Data Tables, and docs for Data Iterators I do not manage to understand the rows-per-page-items prop usage and its options, nor find any in-details explanation at any other place.

Specifically, what I want to know is if one could use the mentioned prop to set the chosen-rows-per-page-amount to a default value other than the first in selection.

For example, drop down selection:

Items per page:  10
                [20] -> Selected by default
                 30
                 40

I know that I can do:

Items per page: [20] -> First, so will be selected by default
                 10
                 30
                 40

Doing:

<v-data-iterator :rows-per-page-items="[20, 10, 30, 40]" ... />

But the above is not so ideal, UX-wise.

Answer 1

For anyone using vuetify 2.0 you have to use the footer prop on the data table like so:

<v-data-table
  :headers="headers"
  :items="items"
  :footer-props="{
    'items-per-page-options': [10, 20, 30, 40, 50]
  }"
  :items-per-page="30"
  :search="search"
>

Answer 2

You can define the data property as so (if you're using template structure):

rowsPerPageItems: [10, 20, 30, 40],
pagination: {
    rowsPerPage: 20
},

and your component tag props:

<v-data-iterator
    :rows-per-page-items="rowsPerPageItems"
    :pagination.sync="pagination"
    ... />

The "pagination - rows per page" prop value defines your default.