Can bootstrap-vue table row selection be selected via a checkbox

Question

I currently have a bootstrap vue table that has the left column all being checkboxes. I have set the table rows to be selectable which is working fine. I'd like to be able to select the rows via a checkbox and not clicking on the actual .

I'd also like to know if it's possible to select all rows via the top left checkbox.

take a look at my jsfiddle to see what i have now.

rows selectable via checkbox for each row
all rows selectable via top left checkbox

https://jsfiddle.net/itsjess/mLztuf6o/2/

<b-table id="my-table" class="mb-20" :borderless="true" 
      :items="merchants" :fields="fields" selectable @row- 
      selected="rowSelected" selectedVariant="success" :per- 
      page="perPage" :current-page="currentPage" small responsive>
     <template slot="HEAD_index" slot-scope="data">
                <b-form-checkbox></b-form-checkbox>
            </template>

     <template slot="index" slot-scope="data">
                <b-form-checkbox :id="'checkbox' + data.index" v-model="data.item.index" checked="checked">
                </b-form-checkbox>
            </template>

    <template slot="outlet" slot-scope="data">
                {{ data.item.name }}
            </template>

     <template slot="orderacc" slot-scope="data">
                on
            </template>

     <template slot="taskcomp" slot-scope="data">
                40%
            </template>
</b-table>

Charles Tombo · Accepted Answer · 2021-03-25 08:59:33Z

4

i achieved this using Refs on the table and scoped cell slot. i added a cell scoped slot then used rowSelected which is aboolean to my checkbox v-model then added a change event to also trigger selection of the row when a checkbox is checked and unchecked.

 <b-table ref="tableRef" selectable   select-mode="multi">
 </b-table>

   <template #cell(selected)="data">
          <b-form-checkbox
            @change="checked(data.index, data.rowSelected)"
            v-model="data.rowSelected"
          >
          </b-form-checkbox>          
    </template>

 checked(index: number, checked: boolean) {
    let tableRef: any = this.$refs.tableRef
    // to select all use tableRef.selectAllRows()
    // to see all availabe table properties just do a console.log(tableRef)
    if (checked === false){
    tableRef.selectRow(index)
    } else {
      tableRef.unselectRow(index)
    }
  }

answered Mar 25, 2021 at 8:59

Charles Tombo

1011 silver badge5 bronze badges

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

1 Comment

Victor Ortiz Over a year ago

I just had to change checked === true and it worked perfectly, thanks.

Max Sinev · Accepted Answer · 2019-06-19 11:25:29Z

1

I don't see any support for selecting rows via checkbox in bootstrap table, so probably you have to handle this case by yourself:

Remove selectable and @row-selected bindings and add selected items to your own array. I prepared some implementation from your jsfiddle: https://jsfiddle.net/maxsinev/unp7jzwo/

P.S. If you will have table with dynamic items which you will receive through some API it will be necessary to store uuid as checkbox value instead of an object reference (like in my jsfiddle).

answered Jun 19, 2019 at 11:25

Max Sinev

6,0192 gold badges30 silver badges37 bronze badges

1 Comment

lbris Over a year ago

Would it be possible to implement it as a mixin ? So that each view that needs such a table element could benefit of it easily, without having to reimplement it again (and keeping DRY principles)

Amal Ezzine · Accepted Answer · 2024-04-15 13:28:29Z

1

If you're seeking to bypass the selection of rows upon clicking and exclusively enable row selection through checkboxes, simply add no-select-on-click prop to your b-table component.

answered Apr 15, 2024 at 13:28

Amal Ezzine

112 bronze badges

Collectives™ on Stack Overflow

Can bootstrap-vue table row selection be selected via a checkbox

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related