title: How to automatically show difference of values between rows (Vue.js Data tables)
body: <p>How to automatically calculate difference of values between current and previous row. I use &quot;Data tables&quot; in Vue with Vuetify.
  In my code i added static values to illustrate what i want to do (&quot;Calories change&quot; column). This column shouldn't be available for adding and editing.</p>
  <p><strong>Example:</strong>
  <a href="https://i.stack.imgur.com/Y4UYq.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Y4UYq.jpg" alt="example image" /></a></p>
  <p>If previous value is more than current - I would like display &quot;-&quot; with difference value.</p>
  <p>If previous value is less than current - I would like display &quot;+&quot; with difference value.</p>
  <p>If values are the same - I would like display &quot;0&quot;.</p>
  <p>In this example the point is that I would like to know how many (more, less or the same) calories I ate in the following days.</p>
  <p>Could someone help with this case?</p>
  <p><strong>Demo:</strong> <a href="https://codepen.io/noobmaster2137/pen/mdOrEqj" rel="nofollow noreferrer">Codepen</a></p>
  <p><strong>HTML:</strong></p>
  <pre><code>&lt;div id=&quot;app&quot;&gt;
    &lt;v-app id=&quot;inspire&quot;&gt;
      &lt;v-data-table
        :headers=&quot;headers&quot;
        :items=&quot;results&quot;
        sort-by=&quot;date&quot;
        sort-desc
        class=&quot;elevation-1&quot;
      &gt;
        &lt;template v-slot:top&gt;
          &lt;v-toolbar
            flat
          &gt;
            &lt;v-toolbar-title&gt;Data&lt;/v-toolbar-title&gt;
            &lt;v-divider
              class=&quot;mx-4&quot;
              inset
              vertical
            &gt;&lt;/v-divider&gt;
            &lt;v-spacer&gt;&lt;/v-spacer&gt;
            &lt;v-dialog
              v-model=&quot;dialog&quot;
              max-width=&quot;500px&quot;
            &gt;
              &lt;template v-slot:activator=&quot;{ on, attrs }&quot;&gt;
                &lt;v-btn
                  color=&quot;primary&quot;
                  dark
                  class=&quot;mb-2&quot;
                  v-bind=&quot;attrs&quot;
                  v-on=&quot;on&quot;
                &gt;
                  Add new
                &lt;/v-btn&gt;
              &lt;/template&gt;
              &lt;v-card&gt;
                &lt;v-card-title&gt;
                  &lt;span class=&quot;headline&quot;&gt;{{ formTitle }}&lt;/span&gt;
                &lt;/v-card-title&gt;
    
                &lt;v-card-text&gt;
                  &lt;v-container&gt;
                    &lt;v-row&gt;
                      &lt;v-col
                        cols=&quot;12&quot;
                        sm=&quot;6&quot;
                        md=&quot;6&quot;
                      &gt;
                        &lt;v-menu
                          ref=&quot;dateMenu&quot;
                          v-model=&quot;dateMenu&quot;
                          :close-on-content-click=&quot;false&quot;
                          :return-value.sync=&quot;editedItem.date&quot;
                          transition=&quot;scale-transition&quot;
                          offset-y
                          min-width=&quot;auto&quot;
                        &gt;
                          &lt;template v-slot:activator=&quot;{ on, attrs }&quot;&gt;
                            &lt;v-text-field
                              v-model=&quot;editedItem.date&quot;
                              label=&quot;Select date&quot;
                              prepend-icon=&quot;mdi-calendar&quot;
                              readonly
                              v-bind=&quot;attrs&quot;
                              v-on=&quot;on&quot;
                            &gt;&lt;/v-text-field&gt;
                          &lt;/template&gt;
                          &lt;v-date-picker
                            v-model=&quot;editedItem.date&quot;
                            no-title
                            scrollable
                          &gt;
                            &lt;v-spacer&gt;&lt;/v-spacer&gt;
                            &lt;v-btn
                              text
                              color=&quot;primary&quot;
                              @click=&quot;dateMenu = false&quot;
                            &gt;
                              Cancel
                            &lt;/v-btn&gt;
                            &lt;v-btn
                              text
                              color=&quot;primary&quot;
                              @click=&quot;$refs.dateMenu.save(editedItem.date)&quot;
                            &gt;
                              OK
                            &lt;/v-btn&gt;
                          &lt;/v-date-picker&gt;
                        &lt;/v-menu&gt;
                      &lt;/v-col&gt;
                      &lt;v-col
                        cols=&quot;12&quot;
                        sm=&quot;6&quot;
                        md=&quot;6&quot;
                      &gt;
                        &lt;v-text-field
                          v-model=&quot;editedItem.calories&quot;
                          label=&quot;Calories&quot;
                        &gt;&lt;/v-text-field&gt;
                      &lt;/v-col&gt;
                    &lt;/v-row&gt;
                  &lt;/v-container&gt;
                &lt;/v-card-text&gt;
    
                &lt;v-card-actions&gt;
                  &lt;v-spacer&gt;&lt;/v-spacer&gt;
                  &lt;v-btn
                    color=&quot;blue darken-1&quot;
                    text
                    @click=&quot;close&quot;
                  &gt;
                    Cancel
                  &lt;/v-btn&gt;
                  &lt;v-btn
                    color=&quot;blue darken-1&quot;
                    text
                    @click=&quot;save&quot;
                  &gt;
                    Save
                  &lt;/v-btn&gt;
                &lt;/v-card-actions&gt;
              &lt;/v-card&gt;
            &lt;/v-dialog&gt;
            &lt;v-dialog v-model=&quot;dialogDelete&quot; max-width=&quot;500px&quot;&gt;
              &lt;v-card&gt;
                &lt;v-card-title class=&quot;headline&quot;&gt;Are you sure you want to delete this item?&lt;/v-card-title&gt;
                &lt;v-card-actions&gt;
                  &lt;v-spacer&gt;&lt;/v-spacer&gt;
                  &lt;v-btn color=&quot;blue darken-1&quot; text @click=&quot;closeDelete&quot;&gt;Cancel&lt;/v-btn&gt;
                  &lt;v-btn color=&quot;blue darken-1&quot; text @click=&quot;deleteItemConfirm&quot;&gt;OK&lt;/v-btn&gt;
                  &lt;v-spacer&gt;&lt;/v-spacer&gt;
                &lt;/v-card-actions&gt;
              &lt;/v-card&gt;
            &lt;/v-dialog&gt;
          &lt;/v-toolbar&gt;
        &lt;/template&gt;
        &lt;template v-slot:item.actions=&quot;{ item }&quot;&gt;
          &lt;v-icon
            small
            class=&quot;mr-2&quot;
            @click=&quot;editItem(item)&quot;
          &gt;
            mdi-pencil
          &lt;/v-icon&gt;
          &lt;v-icon
            small
            @click=&quot;deleteItem(item)&quot;
          &gt;
            mdi-delete
          &lt;/v-icon&gt;
        &lt;/template&gt;
        &lt;template v-slot:no-data&gt;
          No results
        &lt;/template&gt;
      &lt;/v-data-table&gt;
    &lt;/v-app&gt;
  &lt;/div&gt;
  </code></pre>
  <p><strong>JS:</strong></p>
  <pre><code>new Vue({
    el: '#app',
    vuetify: new Vuetify(),
    data: () =&gt; ({
      dateMenu: false,
      dialog: false,
      dialogDelete: false,
      headers: [
        {
          text: 'Date',
          align: 'start',
          sortable: true,
          value: 'date',
        },
        { text: 'Calories (kcal)', value: 'calories' },
        { text: 'Calories difference', value: 'caloriesChange', sortable: false },
        { text: 'Actions', value: 'actions', sortable: false },
      ],
      results: [],
      editedIndex: -1,
      editedItem: {
        date: new Date().toISOString().substr(0, 10),
        calories: 0,
        // this should calculate automatically
        caloriesChange: 0,
      },
      defaultItem: {
        date: new Date().toISOString().substr(0, 10),
        calories: 0,
        // this should calculate automatically
        caloriesChange: 0,
      },
    }),
  
    computed: {
      formTitle () {
        return this.editedIndex === -1 ? 'New Item' : 'Edit Item'
      },
    },
  
    watch: {
      dialog (val) {
        val || this.close()
      },
      dialogDelete (val) {
        val || this.closeDelete()
      },
    },
  
    created () {
      this.initialize()
    },
  
    methods: {
      initialize () {
        this.results = [
          {
            date: '2021-01-09',
            calories: 2905,
            // this should calculate automatically
            caloriesChange: '+ ' + 55 + ' kcal',
          },
          {
            date: '2021-01-08',
            calories: 2850,
            // this should calculate automatically
            caloriesChange: '+ ' + 150 + ' kcal',
          },
          {
            date: '2021-01-07',
            calories: 2700,
            // this should calculate automatically
            caloriesChange: '- ' + 800 + ' kcal',
          },
          {
            date: '2021-01-06',
            calories: 3500,
            // this should calculate automatically
            caloriesChange: '+ ' + 300 + ' kcal',
          },
          {
            date: '2021-01-05',
            calories: 3200,
            // this should calculate automatically
            caloriesChange: '+ ' + 300 + ' kcal',
          },
          {
            date: '2021-01-04',
            calories: 2900,
            // this should calculate automatically
            caloriesChange: '' + 0 + ' kcal',
          },
          {
            date: '2021-01-03',
            calories: 2900,
            // this should calculate automatically
            caloriesChange: '- ' + 100 + ' kcal',
          },
          {
            date: '2021-01-02',
            calories: 3000,
            // this should calculate automatically
            caloriesChange: '- ' + 10 + ' kcal',
          },
          {
            date: '2021-01-01',
            calories: 3010,
            // this should calculate automatically
            caloriesChange: '+ ' + 10 + ' kcal',
          },
          {
            date: '2020-12-31',
            calories: 3000,
            // this must be empty (first result)
            caloriesChange: '',
          },
        ]
      },
  
      editItem (item) {
        this.editedIndex = this.results.indexOf(item)
        this.editedItem = Object.assign({}, item)
        this.dialog = true
      },
  
      deleteItem (item) {
        this.editedIndex = this.results.indexOf(item)
        this.editedItem = Object.assign({}, item)
        this.dialogDelete = true
      },
  
      deleteItemConfirm () {
        this.results.splice(this.editedIndex, 1)
        this.closeDelete()
      },
  
      close () {
        this.dialog = false
        this.$nextTick(() =&gt; {
          this.editedItem = Object.assign({}, this.defaultItem)
          this.editedIndex = -1
        })
      },
  
      closeDelete () {
        this.dialogDelete = false
        this.$nextTick(() =&gt; {
          this.editedItem = Object.assign({}, this.defaultItem)
          this.editedIndex = -1
        })
      },
  
      save () {
        if (this.editedIndex &gt; -1) {
          Object.assign(this.results[this.editedIndex], this.editedItem)
        } else {
          this.results.push(this.editedItem)
        }
        this.close()
      },
    },
  })
  </code></pre>