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.

You could copy the age property for every other array item but set it to something like false for the last one and sort after that property instead. — shaedrich
– shaedrich, Commented Mar 2, 2022 at 9:40

James Arnold · Accepted Answer · 2022-03-03 06:04:19Z

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

answered Mar 3, 2022 at 6:04

James Arnold

7903 gold badges12 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

VueJS Sortable Table Except Specific Rows

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related