Vuetify datatable select all with disabled checkboxes

Question

I'm having an issue with datatables with select rows. I have rows which have the checkbox disabled, but the select all checks them anyway... Is this a bug?

I made a codepen: https://codepen.io/slayerbleast/pen/jOWjzWJ

How can I fix the selectAll checkbox only check the available checkboxes?

Template:

<v-content>
    <v-data-table
        v-model="selected"
        :headers="headers"
        :items="desserts"
        item-key="name"
        show-select
    >
    <template #item="{ item }">
        <tr>
            <td>
                <v-checkbox
                    :disabled="item.calories > 250"
                    class="pa-0 ma-0"
                    :ripple="false"
                    v-model="selected"
                    :value="item"
                    hide-details
                >
                </v-checkbox>
            </td>
            <td>{{item.name}}</td>
            <td>{{item.calories}}</td>
            <td>{{item.fat}}</td>
            <td>{{item.carbs}}</td>
            <td>{{item.protein}}</td>
            <td>{{item.iron}}</td>
        </tr>
    </template>
    </v-data-table>
</v-content>

data:

data: () => ({
        selected: [],
            headers: [
          {
            text: 'Dessert (100g serving)',
            align: 'start',
            sortable: false,
            value: 'name',
          },
          { text: 'Calories', value: 'calories' },
          { text: 'Fat (g)', value: 'fat' },
          { text: 'Carbs (g)', value: 'carbs' },
          { text: 'Protein (g)', value: 'protein' },
          { text: 'Iron (%)', value: 'iron' },
        ],
        desserts: [...]
})

Answer 1

On a v-data-table component you can set a selectable-key property:

The property on each item that is used to determine if it is selectable or not

If not specified, it uses isSelectable by default. What you can do is to create a computed property to add this info to your desserts attribute like so:

computed: {
  enrichedDesserts() {
    return this.desserts.map(x => ({ ...x, isSelectable: x.calories <= 250 }));
  }
}

Then change the items property of your v-data-table:

<v-data-table :items="enrichedDesserts">

Please see this Codepen for a working example.