Select All table rows (not only by pages) in vue-good-table Vue component

Question

I'm using a Vue component called vue-good-table (https://xaksis.github.io/vue-good-table/) in a Laravel project. I just need to be able to select all the records in the table, using also the pagination offered by the component. The component offers this SelectAll feature, BUT the problem is that it works only for each page. You can select all the rows of the actual page, but not all the rows in the entire table, as shown in the following gif:

selectAll example

Is it possible to select all the table rows or something similar with a selectAll button?

Thanks!

Michael Hýža Michael Hýža · Accepted Answer · 2021-02-01T15:57:20

Add to your table @on-select-all="selectAll" So it looks like:

<vue-good-table
    @on-select-all="selectAll"    
    :columns="columns"
    :rows="rows"
    :select-options="{ enabled: true }">
</vue-good-table>

And create new method

selectAll(){
      this.row.forEach(item=>{
        if(item.vgtSelected){
          this.$set(item,'vgtSelected', false);
        }else{
          this.$set(item,'vgtSelected', true);
        }
      },this);
    }

This should solve your problem

Select All table rows (not only by pages) in vue-good-table Vue component

1 Answers