[Vuejs]-Vuetify Data Table: Is it possible to dynamically change the number of rows of the data table?

by

0👍

✅

well, I figured it out in the documentation by reading the answer from @Neha, this prop needs to be in sync to have any changes to it and this can be done with .sync modifier. The only thing we need to add .sync after the prop like :items-per-page.sync, see code below:

In template

In template-

<v-data-table
  :headers="headers"
  :items="rows"
  item-key="id"
  class="elevation-1"
  :items-per-page.sync="rowsPerPage"
>
</v-data-table>

In script

data() {
  return {
    rowsPerPage: 50,
  }
},

methods: {
  excelExportDOM() {
    this.rowsPerPage = -1;

    // do stuff

    this.rowsPerPage = 50;
  }
}

0👍

You can definitely do this by utilizing the items-per-page prop which is available in both Vuetify 2 and Vuetify 3. According to the documentation, the objective of this prop is-

Changes in how many items per page should be visible. Can be used with
.sync modifier. Setting this prop to -1 will display all items on the
page.

That’s it. When the user clicks on the export button, set this prop’s value to -1 which will show all rows, and when the export is finished, set its value again to your default which is 50.

Here is how you can accomplish this-

In template-

<v-data-table
  :headers="headers"
  :items="myItems"
  item-key="name"
  class="elevation-1"
  :items-per-page="itemsPerPage"
>
</v-data-table>

In script-

data() {
  return {
    itemsPerPage: 50,
  }
},

methods: {
  exportDataToExcel() {
    this.itemsPerPage = -1;

    // WRITE HERE YOUR CODE TO EXPORT

    this.itemsPerPage = 50;
  }
}

Leave a comment