Vuetify v-data-table : hide expand icon when no data

Question

How to hide the expand icon for rows having no data ?

<v-data-table
  :headers="headers"
  :items="items"
  :options.sync="options"
  :footer-props="{
    'items-per-page-options': [20, 50, 100],
    'items-per-page-text': '',
  }"
  show-expand
  dense
>
  <template #item.index="{ index }">
    {{ options.itemsPerPage * (options.page - 1) + index + 1 }}.
  </template>
  <template #expanded-item="{ headers, item }">
    {{ item || ''}}
  </template>
</v-data-table>

Answer 1

Data table component has one more slot: #item.data-table-select.

You can override this slot to manually manage the last cell with expand icon.

By example, this code hides all expand buttons on rows where related object's fat prop is lower than 10:

...
<template #item.data-table-expand="{ item, expand, isExpanded }">
  <td v-if="item.fat < 10" class="text-start">
    <v-btn icon 
           @click="expand(!isExpanded)" 
           class="v-data-table__expand-icon"
           :class="{'v-data-table__expand-icon--active' : isExpanded}">
      <v-icon>mdi-chevron-down</v-icon>
    </v-btn>
  </td>
</template>
...

Check an example at CodePen.