Is column/cell exclusion of @row-clicked event on b-table possible ?

Hi everyone,

I have a b-table (to display a list of records of course) in which I use the @row-clicked event to open the form view of the clicked record. I also use a column with b-form-checkbox to be able to select several lines (because selectable prop can’t be used aside of my event since my event switches to another component).

The thing is the checkbox is quite small and sometimes when I want to tick it I click outside of it, so on the row, and it triggers my event.

It would be very great to have a way to say : exclude these columns (for instance here the one with the checkboxes and the Actions column)

Since we have a way to define fields in a b-table with :fields, that I use like this :

  table_fields: [
    { key: 'selected' },
    { key: 'username', sortable: true },
    { key: 'firstName', sortable: true },
    { key: 'lastName', sortable: true },
    { key: 'groupIds', label: 'Groups' },
    { key: 'isActive', sortable: true, label: 'Status' },
    { key: 'actions', label: 'Actions' }
  ],

Would it be possible to implement a prop (like sortable) like exclude-from-rowclick or something like that ?

That would end up with something like :

  table_fields: [
    { key: 'selected', exclude-from-rowclick: true },
    { key: 'username', sortable: true },
    { key: 'firstName', sortable: true },
    { key: 'lastName', sortable: true },
    { key: 'groupIds', label: 'Groups' },
    { key: 'isActive', sortable: true, label: 'Status' },
    { key: 'actions', label: 'Actions', exclude-from-rowclick: true }
  ],

Maybe that already exists ? But I didn’t find it.

Thanks for your help.

[Hiws]

You could set a class on the cell (field) that sets padding to 0 (i.e. class p-0), and then render a div in the cell that has width and height set to 100% (classes w-100 and h-100, and add classes d-flex and align-items-center and justify-items-center to center the checkbox vertically and horizontally) and then add @click.stop on the div to prevent the click from bubbling up.

That’s pretty much exactly what i did in the codepen i posted above

[Hiws]

Here’s a codepen with a working example of what you could do to get this behavior.

By filling the cell with a div that has @click.stop, clicking the div wont trigger the @row-clicked event, while leaving the checkbox as is.

https://codepen.io/Hiws/pen/eYNWLEb