How to remove the select all option from a v-data-table?

Question

I need to hide the select all option from a v-data-table, the vuetify component. According to the documentation including the header-prop, single-select as true should do it but is not working.

<v-data-table
v-model="selected
:headers="headers"
:items="items"
show-select
:header-props="{singleSelect:true}"
></v-data-table>

`single-select` prop leads to disabling the ability to select multiple rows. Do you really want to achieve this behaviour? If yes, you can just apply this prop to `v-data-table` component directly — Alexander Shkirkov, Feb 02 '22 at 02:17

score 1 · Answer 1 · answered Feb 10 '22 at 12:30

If you want to be able to only select one item at a time you can add single-select directly to v-data-table:

<v-data-table
  v-model="selected"
  :headers="headers"
  :items="items"
  show-select
  single-select
></v-data-table>

If you want to be able to select multiple items you can override the select all checkbox with the header.data-table-select slot:

<v-data-table
  v-model="selected"
  :headers="headers"
  :items="items"
  show-select
>
  <template #header.data-table-select></template>
</v-data-table>

score 1 · Answer 2 · answered May 17 '22 at 09:11

I use slot to overwrite the select-all.

<v-data-table
  v-model="selected"
  :headers="headers"
  :items="items"
  show-select
>
  <template v-slot:[`header.data-table-select`]></template>
</v-data-table>

and if you could put a title for sue, like this:

<v-data-table
  v-model="selected"
  :headers="headers"
  :items="items"
  show-select
>
  <template v-slot:[`header.data-table-select`]>Selected</template>
</v-data-table>

How to remove the select all option from a v-data-table?

2 Answers2