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.