dimanche 18 juin 2023

How can i implement a checkbox in v-data-table header for vuetify 3?

When i try to customize my data table header using v-slot:headers select-all checkbox disappears. I guess i need to re implement it by myself. There are a lots of example for Vuetify 2 in the net but there isn't any for Vuetify 3 version.

Default checkbox disappears

Here is my code.

<v-data-table
      :show-select="true"
      v-model="selected"
      :headers="headers"
      :items="items"
    >
      <template v-slot:headers="{ columns, isSorted, getSortIcon, toggleSort }">
        <tr>
          <template v-for="column in columns" :key="column.key">
            <th v-if="column.key != 'data-table-group'">
              <span v-if="colum.key == 'data-table-select'">
                <v-checkbox></checkbox>
              </span>
              <span v-else class="ml-2"></span>
            </th>
          </template>
        </tr>
      </template>
</v-data-table>

so how can I make a checkbox which is working like default select-all function for vuetify 3 ?




Aucun commentaire:

Enregistrer un commentaire