I have a datatable with hundreds of columns (and rows) and I want all of them to be edittable. The Vuetify example on https://vuetifyjs.com/en/components/data-tables (section:content editing ) shows the possibilty of making cells editable. However, doing this for hundreds of column manually is out of the question. Is there a way to make all cells editable by default?
9
votes
Individually editable like in the example.
– yam350
The actual task is to make a table like an Excel sheet, which would allow selecting, copying and pasting of multiple cells . As a first step it would suffice to have individually editable cells.
– yam350
Yes. All cells need to be editable in the whole table. As per the vuetify example only the columns defined like below can be editable.
– yam350
<template v-slot:item.iron="props"> <v-edit-dialog :return-value.sync="props.item.iron" large persistent @save="save" @cancel="cancel" @open="open" @close="close" >
– yam350
1 Answers
17
votes
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>
