Dynamically toggle visibility of table row - bootstrap-vue

Question

Is there a way to dynamically hide / show (display) a table row in a dynamic bootstrap-vue table?

I'm currently using the _rowVariant prop to create a class on the row, which is working, but I'm having trouble figuring out how to additionally connect the show_old_projects value to the row's display... since the rows are added dynamically.

<b-form-checkbox v-model="show_old_projects" value="true" unchecked-value="false">
  Show old projects
</b-form-checkbox>

<b-table :fields="fields" :items="projects" :filter="filter"></table>

...

validateProjects() {
  for (const project of this.projects){
    if (project.end_date < this.date) {
      project._rowVariant = 'muted'; 
    }
  }
}

...

.table-muted {
  @extend .text-muted;
}

Any ideas?

You could just watch the show_old_projects value and validateProjects() when it changes? If you want to completely remove the row from the table, you could remove the project from the items array. — nardnob
Pre-filtering the items data before passing it to b-table would be your best bet. you can use Javascript's built in Array.prototype.filter(...) method — Troy Morehouse

shaneparsons shaneparsons · Accepted Answer · 2018-12-04T17:10:57

Here's what I ended up doing:

created 2 arrays projects and old_projects
created another table for old_projects below the projects table
added a v-show="show_old_projects" to the old_projects table
upon fetching the data, I iterated through it and organized the projects into their respective arrays

If somebody can think of a cleaner way to do this I'm open to suggestions... otherwise this is working fine.

Dynamically toggle visibility of table row - bootstrap-vue

1 Answers