[Vuejs]-Is it possible to modify one particular column in v-data-table header

by

1👍

✅

I think you are looking for the header.<name> slot. Similarly, the item.<name> slot is used to override the default rendering of a specific cell.

Note that you should always use different values in your header data definition, as that data is used as key in v-for:

headers: [
  { text: 'Column 1', value: 'foo' },
  { text: 'Column 2', value: 'bar' },
  { text: 'Checkbox Column', value: 'myCheckbox' }
],

<v-data-table :items="items" :headers="headers">
  <template v-slot:header.myCheckbox="{ header }">
    {{ header.text }}
    <v-checkbox
      v-model="selectAllSk"
      @input="selectAllSkChanged"
    />
  </template>
  <template v-slot:item.myCheckbox="{ item, value }">
    {{item[value]}}
    <v-checkbox
      v-model="selectAllSk"
      @input="selectAllSkChanged"
    />
  </template>
</v-data-table>

Also have a look at Vuetify’s default row selection mechanism, which would draw the select boxes for you.

👤Moritz Ringler

Leave a comment