What is the best method for retrieving the selected itemsPerPage in Vuetify's data-table in version 2.0

Question

What is the best method for retrieving the selected itemsPerPage in Vuetify's data-table in version 2.0

Recently, I've been struggling to retrieve the selected items-per-page on a Vuetify data-table due to some recent changes. I came across this helpful example: How to set initial 'rows per page' value in Vuetify DataTable component?

Here is the code snippet that was recommended:

<v-data-table
        :headers="headers"
        :items="equipment"
        class="elevation-1"
        :rows-per-page-items="[15, 30, 50, 100]"
        :pagination.sync="pagination">

And this part related to the data function:

data() {
return {
    pagination: {
      rowsPerPage: 30
    }, ...
  }
}

However, when attempting to access the currently-selected rowsPerPage, an error message appeared stating:

[BREAKING] 'pagination' has been removed, use 'options' instead. For more information, see the upgrade guide https://github.com/vuetifyjs/vuetify/releases/tag/v2.0.0#user-content-upgrade-guide

I went through the upgrade guide but found minimal information regarding footer control of pagination or how to sync the selected rows-per-page now. I experimented with using options and examined the table code here:

https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VDataTable/VDataTable.ts#L151

Unfortunately, it remains unclear how to fetch the selected itemsPerPage, and the options property does not seem to update reactively. If anyone knows the current method for achieving pagination sync, your insights would be greatly appreciated.

javascript vue.js vuejs2 vuetify.js

Answer 1

Answer №1

To customize the number of items per page and rows per page in Vuetify 2.x, follow these steps:

Firstly, use the following property in the data table component:

:items-per-page="5"

You can set the items per page directly as a number or assign it to a reactive data property for dynamic updates.

Similarly, you can manage rows per page by adding this property to the data table.

Add :footer-props="footerProps" to your template.

In the script section:

data(){
  return {
    footerProps: {'items-per-page-options': [15, 30, 50, 100]},
  }
}

Here is a working example on CodePen:

Check out the demo here

Working code snippet:

<div id="app">
  <v-app id="inspire">
    <v-data-table
      :headers="headers"
      :items="desserts"
      :items-per-page="5"
      class="elevation-1"
      :footer-props="footerProps"
      @update:items-per-page="getItemPerPage"
    ></v-data-table>
  </v-app>
</div>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      footerProps: {'items-per-page-options': [5, 10,15, 30, 50, 100]},
      headers: [
        {
          text: 'Dessert (100g serving)',
          align: 'left',
          sortable: false,
          value: 'name',
        },
        { text: 'Calories', value: 'calories' },
        { text: 'Fat (g)', value: 'fat' },
        { text: 'Carbs (g)', value: 'carbs' },
        { text: 'Protein (g)', value: 'protein' },
        { text: 'Iron (%)', value: 'iron' },
      ],
      desserts: [
        // Dessert data here...
      ],
    }
  },
  methods: {
    getItemPerPage(val) {
      console.log(val);
    },
  }
})

Answer 2

To customize the number of items per page and rows per page in Vuetify 2.x, follow these steps:

Firstly, use the following property in the data table component:

:items-per-page="5"

You can set the items per page directly as a number or assign it to a reactive data property for dynamic updates.

Similarly, you can manage rows per page by adding this property to the data table.

Add :footer-props="footerProps" to your template.

In the script section:

data(){
  return {
    footerProps: {'items-per-page-options': [15, 30, 50, 100]},
  }
}

Here is a working example on CodePen:

Check out the demo here

Working code snippet:

<div id="app">
  <v-app id="inspire">
    <v-data-table
      :headers="headers"
      :items="desserts"
      :items-per-page="5"
      class="elevation-1"
      :footer-props="footerProps"
      @update:items-per-page="getItemPerPage"
    ></v-data-table>
  </v-app>
</div>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      footerProps: {'items-per-page-options': [5, 10,15, 30, 50, 100]},
      headers: [
        {
          text: 'Dessert (100g serving)',
          align: 'left',
          sortable: false,
          value: 'name',
        },
        { text: 'Calories', value: 'calories' },
        { text: 'Fat (g)', value: 'fat' },
        { text: 'Carbs (g)', value: 'carbs' },
        { text: 'Protein (g)', value: 'protein' },
        { text: 'Iron (%)', value: 'iron' },
      ],
      desserts: [
        // Dessert data here...
      ],
    }
  },
  methods: {
    getItemPerPage(val) {
      console.log(val);
    },
  }
})

Answer 3

Answer №2

A simple method:

:footer-props="{ itemsPerPageOptions: [25,50,100,-1]}"

Keep in mind that using -1 will add the option 'All' to the list

Answer 4

A simple method:

:footer-props="{ itemsPerPageOptions: [25,50,100,-1]}"

Keep in mind that using -1 will add the option 'All' to the list

Answer 5

Answer №3

If you, like myself, were searching for the updated feature to display all rows by default, the method has been modified (- operational in v2.2.11):

Previous approach

:pagination.sync="{ rowsPerPage: -1 }"

Updated approach

:items-per-page="-1"

I am unsure if "items" and "rows" are used interchangeably, but this detail caught me off guard for some time.

Answer 6

If you, like myself, were searching for the updated feature to display all rows by default, the method has been modified (- operational in v2.2.11):

Previous approach

:pagination.sync="{ rowsPerPage: -1 }"

Updated approach

:items-per-page="-1"

I am unsure if "items" and "rows" are used interchangeably, but this detail caught me off guard for some time.

What is the best method for retrieving the selected itemsPerPage in Vuetify's data-table in version 2.0

Answer №1

Answer №2

Answer №3

Similar questions

Tips for applying a class to an element depending on data stored in Local Storage using JQuery

Alignment of content layout across two wrapper elements

What is the method for stopping a slide in this script?

Is there a way to eliminate span tags from elements?

I pressed the button but the globalCompositeOperation isn't working as expected. How can I make it function correctly to achieve the desired output like the second canvas?

Implementing URL routing and error handling in a Node.js application using the Express framework

Ways to avoid the CSS on the page impacting my widget?

How do I save the value of a callback function in Vue data?

Exporting data acquired from a MongoDB query using Node.js

Validating Forms in AngularJS: Ensuring At Least One Input Field is Not Empty

Ways to present a Nuxt page as a reply from an express route

Ways to retrieve lost methods in django-endless-pagination?

Inject the content loaded from the server into a div element, and insert that div at the

Adding a context menu to a Leaflet map

Change the color of the menu icon based on the specified HTML class or attribute

Sending a massive video file to a node.js server and saving it in AWS S3 with ReactJS

Using VueJS to connect a model attribute to a radio button

Function to save prices as cent-based figures in Javascript using Regex

Issue encountered when attempting to utilize Next-Auth alongside Credentials Provider to authenticate within a pre-existing system

Tips for maintaining the persistent state of tabs in a React.js application