vue table sorting object array

vue 에서 table 을 sorting 하는 방법은 두 가지가 있을 것이다.

라이브러리를 사용하거나 (lodash)

공식페이지의 가이드를 따라하거나.

 

 

해당 글에서는 라이브러리를 사용하지 않고 기능을 구현하는 예제를 다룬다.

 

compareValues: function (key, order='desc') {
			return function innerSort(a, b) {
				if (!a.hasOwnProperty(key) || !b.hasOwnProperty(key)) {
					// property doesn't exist on either object
					return 0;
				}

				const varA = (typeof a[key] === 'string')
					? a[key].toUpperCase() : a[key];
				const varB = (typeof b[key] === 'string')
					? b[key].toUpperCase() : b[key];

				let comparison = 0;
				if (varA > varB) {
					comparison = 1;
				} else if (varA < varB) {
					comparison = -1;
				}
				return (
					(order === 'desc') ? (comparison * -1) : comparison
				);
			};
		},

 

코드를 살펴보자.

 

1. key 와 정렬 방식을 입력받고 해당 key 가 있는지 체크.

 

2. 해당 key 의 값이 string type 인지 확인

 - string type 이라면 toUpperCase() 함수를 이용하여 string 의 대소문자를 맞춰준다.

 - string type 이 아니라면 그냥 비교하면 된다. (ex. 숫자, 날짜)

 

3. 값을 비교하고 정렬 방식에 맞는 값을 리턴해준다. 

 

 

해당 함수를 이용해서 정렬을 하면 되겠다.

 

    sortBy: function(column) {			
      if (column.sort) {
        this.sortKey = column.key;
		this.sortOrders[this.sortKey] = this.sortOrders[this.sortKey] * -1;
		var result_set = this.result_set;

		this.result_set = result_set.sort(this.compareValues(this.sortKey, this.sortOrders[this.sortKey]))
	  }
	},

 

desc 나 asc 대신 1이나 -1 을 직접 넣어줬다.

그리고 array.sort(compareValues()) 를 이용해 소팅한다.

 

선택된 column 의 key 를 기준으로 정렬하는 예제이다.