Table component, row details messing with vuex

[nmwael]

Describe the bug

So we are using the table component, and are using the row details feature, but it seems that the table component are manipulating the original object to store state, which conflicts with vuex.

https://bootstrap-vue.org/docs/components/table#row-details-support

Are there a way around this?

[Hiws]

A workaround could be to create a computed property that returns an array for the table, this array would contain your store objects nested into another object. It would look something like this.

computedItems() {
  const items = [];

  this.$store.state.storeItems.forEach(item => {
    this.items.push({ info: item })
  })

  return items;
}

By nesting the store object into a property, it wont be directly manipulated by b-table when you show/hide the details.

Example: https://codepen.io/Hiws/pen/VwLZomW

[nmwael]

@Hiws I see what you mean... Would'nt this be a viable implementation for the b-table itself?

I tried keeping state outside the array aswell but there are no way for this.

[tmorehouse]

The only problem with keeping the state outside of the data is that <b-table> does not always control the source data (i.e. providers) If the source data changes (i.e. a new data from a different database, but using the same <b-table>. It would be almost impossible to track if the table has changed sources.