Vuetify Datatable - Enable content editing on all columns

AFAIK, there's no way to make all header fields editable by default, but you could customize the body template, and dynamically render the data using v-for and the v-edit-dialog for each item. For example...

           <template v-slot:body="{ items, headers }">                <tbody>                    <tr v-for="(item,idx,k) in items" :key="idx">                        <td v-for="(header,key) in headers" :key="key">                            <v-edit-dialog                              :return-value.sync="item[header.value]"                              @save="save"                              @cancel="cancel"                              @open="open"                              @close="close"                            > {{item[header.value]}}                              <template v-slot:input>                                <v-text-field                                  v-model="item[header.value]"                                  label="Edit"                                  single-line                                ></v-text-field>                              </template>                            </v-edit-dialog>                        </td>                    </tr>                </tbody>            </template>

Codeply