0
293
ViewsHow to specify editable column weights in v-data-table?
I have a similar table like the following screenshot shows:
What I'd like to achieve is to assign a weight to each numeric column within this table, i.e., to the columns called "Calories", "Fat", "Carbs", "Protein", and "Iron". To be more concrete, it should be possible in a separate header row to enter a weight (this should be left to the table user, i.e., it should be editable) with which the column values are multiplied and then added up to a weighted sum in a separate column.
Please see the following scratch as for further clarfification.
Is this possible to achieve with v-data-table? Can anyone provide guidance or even a MWE for an editable header row with which to do a weighted summation of the numeric table data?
1 answers
Answer question0
you can add an additional row before the actual data with the slot: body.prepend
Your template could look like that:
<div id="app">
<v-app id="inspire">
<v-data-table :headers="headers" :items="desserts" :items-per-page="5" class="elevation-1">
<template #body.prepend>
<tr class="">
<td class="text-start"></td>
<td class="text-start"><input class="red--text" value=1></td>
<td class="text-start"><input class="red--text" value=1></td>
<td class="text-start"><input class="red--text" value=1></td>
<td class="text-start"><input class="red--text" value=1></td>
<td class="text-start"><input class="red--text" value=1></td>
</tr>
</template>
</v-data-table>
</v-app>
</div>
Code pen: https://codepen.io/florent-bouisset/pen/QWaRqOy?editors=1010
You should be able to bind input to data and calculate the last column you want