<b-table> mark rows as unselectable

In my application the table serves both to display data and allow the “owner” of the data to the change the state of the rows by selecting them and then clicking a button. However some rows are in a state which allowing them to be changed doesn’t make sense.

It would be great if the row object could specify a _selectable boolean (like _showDetails) which enable/disable the ability to select the row. (If the row is in a range being selected, it is just omitted from the range).

You’d also have to decide how to handle the row being clicked with range mode (do nothing? select all the rows up to but not including the row?).

I’m sure there’s a workaround where I listen for clicks and then conditionally deselect the row immediately, so consider this low priority.

I also understand if this is too niche to justify the complexity.

[siddiqian-developer]

I did a very short solution based on @sandrovw64 's solution above.

After adding the _rowVariant, which will appear as a class in each which is to be unselectable, make it unselectable in CSS as following:

.table-row-disabled { pointer-events: none !important; }

[sandrovw64]

For those who needs a disabled row in a <b-table>, here is my implementation:

<b-table ref="table"
              :fields="table.fields"
              hover
              :items="items"
              select-mode="multi"
              selectable
              thead-class="d-none"
              @row-selected="onRowSelected">

...
computed: {
    items() {
      var items = [];
      if (this.list.items.length > 0) {
        items = Object.assign([], this.list.items);
        items.forEach((item) => {
          if (this.getDisabled(item)) {
            item = this.setRowVariant(item);
          }
        });
      }
      return items;
    },
...
methods: {
    onRowSelected(items) {
      var selected = [];
      items.forEach((element, index) => {
        if (this.getDisabled(element)) {
            this.$refs.table.unselectRow(index);
        } else {
          selected.push(element);
        }
      });
      this.selected = selected;
    },
    setRowVariant(item) {
      return (item._rowVariant = "row-disabled");
    },
}
...

And then, in my custom table.scss file I added

.table-hover .table-row-disabled:hover {
  background-color: var(--gray-2);
  cursor: not-allowed !important; 
}

Notice the .table-hover class. My b-table is set to hover. If yours is not, then just use .table