VueJS Sortable Table Except Specific Rows

Question

Assuming I have this code for a v-table implementing sortable:

<script>
  export default {
    data() {
      return {
        sortBy: 'age',
        sortDesc: false,
        fields: [
          { key: 'last_name', sortable: true },
          { key: 'first_name', sortable: true },
          { key: 'age', sortable: true }
        ],
        items: [
          { age: 40, first_name: 'Dickerson', last_name: 'Macdonald' },
          { age: 21, first_name: 'Larsen', last_name: 'Shaw' },
          { age: 89, first_name: 'Geneva', last_name: 'Wilson' },
          { age: 38, first_name: 'Jami', last_name: 'Carney' },
          { age: 55, first_name: 'Average Age', last_name: '' }
        ]
      }
    }
  }
</script>

How can I prevent the last row ({ age: 55, first_name: 'Average Age', last_name: '' }) being sorted? I want the last row to stay as the last row regardless how many times I change/click the sort of columns.

I tried creating two tables, one for with the headers and data while the other table just contains the average age. However, there is a possibility that the table have a horizontal scrollbar so having two tables is not really a good solution.

Answer 1

I just found this in the VueJS documentation for creating a footer https://bootstrap-vue.org/docs/components/table#header-and-footer-custom-rendering-via-scoped-slots