Vuetify data table - export to excel

Question

I want to export data from vuetify data table to excel. If user change sorting or filter data I want to export the data as I can see. Every operation is client-side, server only generates whole data source.

<v-data-table
  :headers="headers"
  :items="items"
  :items-per-page="5"
></v-data-table>
...
created() {
  this.items = await this.$axios.$get('/api/get-items')
}

My idea is take json data and use e.g. exceljs to generate excel file. But, there is only one prop (items), which is array before client-side operations (like sorting or filtering). Of cource, that I can take html code and parse data to json or edit api to accept sorting, filterig etc., but this is ugly way. Is there any other solution?

Answer 1

You can do it client-side with one major restriction: you will not be able to use pagination on this table.

If it's OK for you, a special @current-items event should to the trick:

<v-data-table
  :headers="headers"
  :items="desserts"
  :items-per-page="-1"
  @current-items="onCurrentItemsChanged"
></v-data-table>
...
data () {
  return {
    currentItems: [],
    ...
  }
},
methods: {
  onCurrentItemsChanged(val) {
    this.currentItems = val;
  }
}

This emits the items every time the internalCurrentItems is changed.

But when you apply pagination, this event will return only current page data. Not all table elements are displayed at once (to improve performance, I guess).

You won't be able to implement this via HTML code parse either, because v-data-table produce <tr>s only for the elements of the current page.

So if you are not satisfied with this restriction, it'd be better to do it server-side.

You can test this at CodePen.