Selectable rows without row-clicked event

Is your feature request related to a problem? Please describe…

I have a selectable table that when a row is clicked, it opens a modal with information about the row. I’m mainly handling the row selection with custom checkboxes that let you check/uncheck a row to select that row.

I’m leveraging the this.$refs.selectableTable selectRow and unselectRow methods to handle the selecting when the checkboxes are toggled.

The problem I’m running into is that clicking the row selects the row as well as opens the modal, which is not desirable in my application. I would like the row to only be selectable by the checkboxes I’ve added to the table.

Describe the solution you’d like

I would like to be able to use all of the functionality of the selectable table without the row-clicked event triggering selecting the row.

Describe alternatives you’ve considered

I’ve tried stopping the events on the row-clicked event, but by that point it’s too late to stop the emitter.

Additional context

Here is my table configuration right now:

<b-table
    ref="selectableTable"
    selectable
    @row-selected="onRowSelected"
    select-mode="multi"
    hover
    selected-variant="active"
    @row-clicked="openModal"
    :items="localItems"
    :fields="columns"
    responsive
    outlined
    :busy="loading"
    :filter="filters"
    :filter-function="filterInput"
    :show-empty="true"
>

[trouttdev]

Yep, that worked great. Thanks! If anyone comes across this in the future, this is what I did: Add :tbody-tr-class="determineActive" to your table and then add the method:

determineActive(item, type) {
    if (item && type == 'row') {
        if (this.selectedRows.some(row => row.id == item.id)) {
            return 'table-active';
        }
    }
},

[fuoridallarete]

Is there then a kind of work around to solve it? Sorry to bother…