Dynamically hide/show rows of datatable

[snowdrop]

Good day. I’m a beginner in using VueJS and Quasar and I would like to ask if there is already an upcoming or already existing functionality to dynamically hide/show rows in the datatable? Say I have a list of items that I can activate/deactivate. Then there is an option to show activated items only, deactivated items only or both. I think it is possible by dynamically modifying the data being passed to the table but I would need to perform a server call for a fresh, filtered data, or I could store this on Vuex (to be done on the future). I can also create a copy of the original data, then based on the original data, filter it and make a new list that will displayed, but the problem with this is when the displayed data is updated, you also need to update the original data. (I don’t know if there are other efficient ways to implement this. :)) It think it might be faster if the data being displayed already is the one to be filtered instead of performing again a server call. Thanks in advance.

[benoitranque]

The data table is reactive, you can simple remove rows from the model and they will not display. Nothing forces you to add all the data you get from the server to the data table model. You could do something like this using computed properties:

data() {
  return {
    serverData: [] // all the data from server
  }
},
computed: {
  tableData() {
    return this.serverData.filter(item => {
      // return boolean for filtering
      return item.condition === true
    })
  }
}

[snowdrop]

@benoitranque thank you. I’ll try this on a couple of days, I can’t get a hand of my project right now for some reasons. But I think this will work. Thanks again!