vuetify Data Table: Is it possible to dynamically change the number of rows of the data table?

Question

Is it possible to change dynamically to show all the rows of a data table and then again switch back to default, let's say the default is 50?

My task is-
Users want to export data to excel in the order where multiple columns are sorted. This was possible by manipulating the DOM but not possible if there are rows more than the default one.
So to do that, the user has to select ALL rows first in the footer to export all rows in excel, else it will export only the default 50 rows.

My idea is-
When a user clicks on the export button, it should dynamically change it to ALL rows and when export is completed, switch back the rows to the default which is 50.

Answer 1

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;
  }
}

Answer 2

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;
  }
}