CODEWITHSUNDEEP
vue.jsbootstrap-vue
shaneparsons
shaneparsons

Reputation: 1639

Dynamically toggle visibility of table row - bootstrap-vue

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?

Upvotes: 1

Views: 2706

Answers (1)

shaneparsons
shaneparsons

Reputation: 1639

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.

Upvotes: 1

Related Questions