Bootstrap-vue table select cells

Question

I am using VueJs with Bootstrap. With the current code I can only select a whole row. Is it possible to select one or multiple table cells?

Hope you can help me!

<template>
    <div class="scheduler">
        <b-table ref="selectableTable"
                 selectable
                 :items="scheduleMap"
                 :fields="fields">
        </b-table>
    </div>
</template>

<script>
    export default {
        name: 'Scheduler',
        data() {
            return {
                fields: ['time', 'bookedCourt1', 'bookedCourt2'],
                scheduleMap: [
                    {time: "9:00 AM", bookedCourt1: true, bookedCourt2: false},
                    {time: "10:00 AM", bookedCourt1: false, bookedCourt2: true},
                    {time: "11:00 AM", bookedCourt1: false, bookedCourt2: true},
                ],
            }
        }
    }
</script>

Answer 1

Is it possible to select one or multiple table cells?

Unfortunately this isn't possible. As you probably saw you can only select whole row https://bootstrap-vue.org/docs/components/table#row-select-support.

But you can pass a custom cell to a table. For example:

<template>
    <div class="scheduler">
        <b-table ref="selectableTable"
                 selectable
                 :items="scheduleMap"
                 :fields="fields">
          <template v-slot:cell(bookedCourt1)="row">
            <b-form-checkbox v-model="row.item.bookedCourt1" name="check-button" switch>
              Booked Court 1
            </b-form-checkbox>
          </template>
          <template v-slot:cell(bookedCourt2)="row">
            <b-form-checkbox v-model="row.item.bookedCourt2" name="check-button" switch>
              Booked Court 2
            </b-form-checkbox>
          </template> 
        </b-table>
    </div>
</template>

<script>
    export default {
        name: 'Scheduler',
        data() {
            return {
                fields: ['time', 'bookedCourt1', 'bookedCourt2'],
                scheduleMap: [
                    {time: "9:00 AM", bookedCourt1: true, bookedCourt2: false},
                    {time: "10:00 AM", bookedCourt1: false, bookedCourt2: true},
                    {time: "11:00 AM", bookedCourt1: false, bookedCourt2: true},
                ],
            }
        }
    }
</script>

Working sample: https://codesandbox.io/s/vigilant-leakey-dknvx

Answer 2

I just add a click event for each cell of my table. Possibly not the best solution, but for my case enough :)

<tr v-for="(time, timeIndex) in times" :key="timeIndex">
  <td>
    {{ time }}
</td>
<td :class="
    @click="setModalData(...)">
   {{ ... }}
</td>
</tr>