v-slot adding a new column name

I am working with v-data-table and trying to add a new column that is calories and divided it by fat. I am trying to set up the new column name, but have been unable to figure it out.

I know that using

<template v-slot:item.fat="{item}">
              <span>test1</span>
</template>

Will change what is put in the fat column, but how do I create a new column?

Here is a link to my code https://codepen.io/aaronk488/pen/vYePVoZ?editors=101

Check this codepen I made: https://codepen.io/cmfc31/pen/dyVrQNz?editors=101

You have to define the new column in your headers array.

 headers: [
        {
          text: "Dessert (100g serving)",
          align: "start",
          value: "name"
        },
        {
          text: "My new column",
          align: "start",
          value: "mynewcol"
        },
...

Then you can use/modify it with the item slot in your datatable, like this.

<v-data-table
    :headers="headers"
    :items="desserts"
    item-key="name"
    class="elevation-1"
>
    <template v-slot:item.mynewcol="{ item, index }">
      {{ 'Test ' + index }}
    </template>
</v-data-table>