17

Notice: The original answer was asked for Vuetify 1.5.7, but API was changed in major releases.

For Vuetify 1.X use the accepted answer by stdob--.

For Vuetify 2.X use answer by Tim Hall or explanation by greensin.


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>

6 Answers 6

23

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.

9

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

1
  • 1
    how do i add the "All" option to the rows-per-page-item? Jan 16, 2020 at 15:06
8

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
    }, ...
  }
}
6

The API had changed since the answer was accepted. And it DOES NOT work in Vuetify 2, with Vue 2

The current way to update the footer currently active items shown per page in the footer and the options to select from the drop down is via the footer-props property on the v-data-table element. and within it an object utilizing the property of items-per-page-options like so:

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

Of course you can feel free to take "items-per-page-options": [10, 20, 30, 40, 50, -1] value and move it to a data property, same with items-per-page value. And of course customize it to any numeric value you want to filter the rows to.

  • -1 - is to provide the "give me all data entires" option
  • In my case i desired to present 50 items per page, and display the active size 50 in the footer "Rows per page ..." dropdown as well as have custom page sizes options including all option to select via the dropdown. I achieved it via the above code, tested and saw that it is working today(date in the answer)

Enjoy :)

Example from the data table that shows it enter image description here

5
  • The original question was asked specifically for Vuetify 1.5.7, so of course API could be changed between major releases. I don't think I need to re-accept answer according to current stable version cause it can confuse developers that uses Vuetify 1.X. Thank you for your answer, but what's the difference between your and most-voted answer by Tim Hall? Aug 23, 2022 at 15:14
  • 1
    @AlexanderShkirkov Your post dues to SEO pops up first when searching google on how to achieve this with the latest API. So I believe the right thin to do is expand on that and re-accept an answer that is the way the API works currently to help numerous people visiting this link expecting to find "the-right-way" to achieve this fast via SO. I believe it would benefit the community if you would do so, but again it is your call :)
    – greensin
    Aug 23, 2022 at 15:25
  • @AlexanderShkirkov My answer is more detailed and helpful in my opinion. But I really don't care which answer you accept :). My goal was to help prevent what happend to me when I reached this link searching google for the way to do this in Vuetify and try help the community.
    – greensin
    Aug 23, 2022 at 15:26
  • Oh, I see. I still think I shouldn't change the accepted answer (you can always use Trending sort to see the most actual answers), but I've added a short notice with an explanation and links to the answers. Thanks for the note! Aug 23, 2022 at 16:54
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'
  ]
}
0

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]}"

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.