I have at bootstrap vue b-table with the following column/type assignments:
- (c1) Include in Run, checkbox
- (c2) Name, string
- (c3) ID, integer
- (c4) Mode, string
- (c5) Target Type, string
- (c6) Angles On, integer
- (c7) Angles Off, integer
- (c8) Latitude, float
- (c9) Longitude, float
- (c10) Status, string
- (c11) Edit, button (pops up a modal)
Most of the columns are 'sortable', however the Edit column does not sort with the rest of the table. The Edit column is a column of buttons which pop up a modal allowing the user to modify the fields of a row. When the table is sorted on a column and the row positions change, the edit remains rigidly assigned to the original row, resulting in the wrong row being modified.
I have tried making the Edit column 'sortable', but this had no effect. The Include in Run column of checkboxes are sorting with the rest of the rows, but that pesky Edit column won't budge. Below is the table defined in the template:
<b-table bordered
id="customTable"
striped hover
:items="this.mittTargets"
class="fontSize"
:fields="fields">
<template v-slot:cell(selected)="row">
<b-form-group>
<input type="checkbox"
v-model="row.item.selected"
:id="row.item.ID"
class="fontSize"
@change="updateTargets(row.item)"/>
</b-form-group>
</template>
<template v-slot:cell(actions)="row">
<b-button size="sm"
@click="editModalConnect(row.item, row.index, $event.target)"
id="button-gradient"
v-b-tooltip.hover
title="single click">
Edit
</b-button>
</template>
</b-table>
I appreciate any help I may get on this.