fix(VDataTable): selecting group should respect selectable prop

[J-Sek]

fixes #22409

Markup:

<template>
  <v-app theme="dark">
    <v-container max-width="700">
      <v-data-table
        v-model="selected"
        :group-by="groupBy"
        :headers="headers"
        :item-selectable="v => v.selectable"
        :items="items"
        item-value="id"
        show-select
      />

      <v-card class="mt-4">
        <v-card-title>Selected Items</v-card-title>
        <v-card-text>
          <pre>{{ selected }}</pre>
        </v-card-text>
      </v-card>
    </v-container>
  </v-app>
</template>

<script setup>
  import { ref } from 'vue'

  const headers = [
    { title: 'Name', key: 'name' },
    { title: 'Category', key: 'category' },
    { title: 'Selectable', key: 'selectable' },
  ]

  const items = [
    { id: 1, name: 'Item 1', category: 'Group A', selectable: true },
    { id: 2, name: 'Item 2', category: 'Group A', selectable: false },
    { id: 3, name: 'Item 3', category: 'Group A', selectable: true },
    { id: 4, name: 'Item 4', category: 'Group B', selectable: true },
    { id: 5, name: 'Item 5', category: 'Group B', selectable: false },
    { id: 6, name: 'Item 6', category: 'Group C', selectable: false },
    { id: 7, name: 'Item 7', category: 'Group C', selectable: false },
  ]

  const groupBy = [{ key: 'category' }]
  const selected = ref([])
</script>

<style>
.v-selection-control--disabled {
    color: red;
}
</style>