__checkbox column disabled based on row value

[AngeloAnolin]

I know this has been asked on this issue # 289.

But I am unsure how to implement the row-class to disable the checkbox column for a specific row.

On the row-class wiki it says, you can define a method and it applies a class that is applied to the row itself. How do I return a class that would only be defined for the checkbox column itself?

Appreciate any insight. Thanks.

[ratiw]

@AngeloAnolin Sorry, my suggestion in #286 was a bit vague. The suggestion was actually not to use __checkbox special field, but instead use the vuetable:row-clicked event together with row-class prop to achieve the single select visual experience.

I think the implementation of __checkbox special field does not really account for the situation where you could selectively disable the checkbox on each row.

But if you would like to do that I would suggest you look at Field Component in v2.0-beta of Vuetable-2 as it allows you to create your own component. You can even extend the existing __checkbox (which is also implemented as a Field Component as well) by providing additional logic that you want.

If you look at VuetableCheckbox code, it actually is extended via VuetableCheckboxMixin mixin.

[Sikander648]

How can we provide a limit to the number of selected check boxes. Say we want to restrict the limit to one? @ratiw

[chaiwei]

I created a MyVuetableFieldCheckbox.vue

<template>
  <th v-if="isHeader"
    class="vuetable-th-component-checkbox"
  >
    <input type="checkbox"
      @change="toggleAllCheckbox($event)"
      :checked="isAllItemsInCurrentPageSelected()"
    >
  </th>
  <td v-else
    class="vuetable-td-component-checkbox"
  >
    <input type="checkbox"
      :disabled="rowField.disabledId(rowData)"
      @change="toggleCheckbox(rowData, $event)"
      :checked="isSelected(rowData)"
    >
  </td>
</template>
<script>
import VuetableFieldCheckboxMixin from 'vuetable-2/src/components/VuetableFieldCheckboxMixin.vue'

export default {
  name: 'vuetable-field-checkbox',
  mixins: [VuetableFieldCheckboxMixin],
}
</script>

then use it like

<template>
  <vuetable
    :fields="col_fields"
    ...
   >
  </vuetable>
</template>
<script>
import VuetableFieldCheckbox from "../../Components/MyVuetableFieldCheckbox"
export default {
 data() {
    return {
        col_fields: [
            {
                name: VuetableFieldCheckbox,
                disabledId: function(rowData) {
                    return rowData.cancelled == 1? true : false
                }
            },
        ] 
    }
  }
}
</script>