How can we add sorting for multiple table headings in vue js

Question

How can we add sorting for multiple table heading in vue js? Present status: Sorting is working for firstname only. orderBy 'firstname' order Is it possible to sort more heading like orderBy 'firstname' 'lastname' 'email' order. It's a part of laravel based project. Any help will be greatly appreciated.

Table head

<th v-for="key in columns" @click="order = order * -1" :class="{active: sortKey == key}">@{{ colTitles[key] }}</th>

Table raw

<tr v-for="(index, item) in items | orderBy 'firstname' order">
                        <td>@{{ item.erp_id }}</td>
                        <td>@{{item.firstname}}</td>
                        <td><a href="{{ url('/customer/details/') }}/@{{ item.id }}">@{{item.lastname}}</a></td>
                        <td>@{{item.email}}</td>
                        <td>@{{item.phone_1}}</td>
                        <td>@{{item.status}}</td>
                        <td>@{{item.created_on}}</td>
</tr>

js

data: {
        sortKey: '',

        order: 1,

        columns: ['erp_id', 'firstname', 'lastname', 'email', 'phone_1', 'status', 'created_on'],

        colTitles: {'erp_id':'@lang('messages.customerListPageTableCustomerNo')', 'firstname':'@lang('messages.customerListPageTableFirstname')', 'lastname':'@lang('messages.customerListPageTableLastname')', 'email':'E-Mail', 'phone_1':'@lang('messages.customerListPageTablePhone')', 'status':'Status', 'created_on':'@lang('messages.customerListPageTableAddedDate')'},
}

asemahle · Accepted Answer · 2016-07-03 16:27:10Z

1

EDIT - Changing sort when header is clicked

You have indicated that you want sort order to change based on which heading is clicked. The original answer explains how to sort by multiple properties (first sort by prop1, if both prop1 are the same then by sort by prop2, etc.).

To change sort order, you must change the property which orderBy. To do this, make the property a variable, and change that variable when the heading is clicked.

Here is a snippet showing how to do this:

var app = new Vue({
	el: '#app',
  
  data: {
    sortProp: 'firstname',
    items: [
      { firstname: 'aaa', lastname: 'ccc', email: 'eee' },
      { firstname: 'bbb', lastname: 'ddd', email: 'ddd' },
      { firstname: 'ccc', lastname: 'eee', email: 'aaa' },
      { firstname: 'ddd', lastname: 'aaa', email: 'ccc' },
      { firstname: 'eee', lastname: 'bbb', email: 'bbb' },
    ]
  },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.js"></script>
<div id="app">
  <table border="1" style="width:100%">
    <tr>
      <!-- We change the sortProp when a heading is clicked -->
      <th @click="sortProp = 'firstname'">First Name</th>
      <th @click="sortProp = 'lastname'">Last Name</th> 
      <th @click="sortProp = 'email'">Email</th>
    </tr>
    
    <!-- We sort based on `sortProp`, which is a variable rather than a hardcoded string -->
    <tr v-for="item in items | orderBy sortProp">
      <td>{{ item.firstname }}</td>
      <td>{{ item.lastname }}</td> 
      <td>{{ item.email }}</td>
    </tr>
  </table>  
</div>

Original Answer - Sorting on multiple properties

Vue js 1.0 does support multiple sort order, and it uses exactly the syntax you proposed. E.g. orderBy 'prop1' 'prop2' ... 'propN' order.

Here is a snippet showing this in action

var app = new Vue({
	el: '#app',
  
  data: {
  	order: 1,
    items: [
      { firstname: 'aaa', lastname: 'ddd', email: 'eee' },
      { firstname: 'bbb', lastname: 'ccc', email: 'ddd' },
      { firstname: 'aaa', lastname: 'ccc', email: 'ddd' },
      { firstname: 'aaa', lastname: 'aaa', email: 'ddd' },
      { firstname: 'aaa', lastname: 'aaa', email: 'aaa' },
    ]
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.js"></script>
<div id="app">
  <ul>
    <li v-for="item in items | orderBy 'firstname' 'lastname' 'email' order">
      {{ item.firstname }} {{ item.lastname }} - {{ item.email }}
    </li>
  </ul>
</div>

If you are using an older version of Vue (0.12 or 0.11) this feature may not be available.

edited Jul 3, 2016 at 16:27

answered Jul 3, 2016 at 6:57

asemahle

20.8k4 gold badges42 silver badges38 bronze badges

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

3 Comments

Sarath TS Over a year ago

Thanks. Iam using 1.0.25 version of VueJS. I tried this code but it is not working for me. In my case only firstname is sorting. When I click on lastname table head, sorting result is getting based on firstname

asemahle Over a year ago

Do you want sort order to change based on the heading that you click?

asemahle Over a year ago

@Rahul Click the green check-mark beneath the question score. This marks the answer as correct ;)

Collectives™ on Stack Overflow

How can we add sorting for multiple table headings in vue js

1 Answer 1

EDIT - Changing sort when header is clicked

Original Answer - Sorting on multiple properties

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

EDIT - Changing sort when header is clicked

Original Answer - Sorting on multiple properties

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related