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
– nardnob, Commented Dec 4, 2018 at 16:14
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
– Troy Morehouse, Commented Jul 9, 2019 at 1:18

shaneparsons · Accepted Answer · 2018-12-05 18:01:00Z

1

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.

edited Dec 5, 2018 at 18:01

answered Dec 4, 2018 at 17:10

shaneparsons

1,6481 gold badge21 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Dynamically toggle visibility of table row - bootstrap-vue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related