How to specify editable column weights in v-data-table?

Question

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?

Answer 1

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