vue data table

https://vuetifyjs.com/en/components/data-tables#data-table 참고

• sort 주의 할 점 :

1.  내부적으로 sort에 ascending(오름차 순) / descending(내림차 순) / unsorted (미정렬) 상태가 존재 한다.
• 따라서, data table 컬럼에 sortable을 true로 한 컬럼은 세 가지 상태를 준수하게 된다.
• => 미정렬 상태로 인해 sort가 안되는 것 처럼 보이지만 제대로 작동하는 것
• => 이 부분이 거슬린다면 must-sort를 True로 변경하면 미정렬 상태는 없음


2. 사용자 정의 정렬 함수

• Date 데이터는 날짜의 차이에 따라 정렬이 되어야 한다. 따라서 custom-sort props에 사용자 정의 정렬 함수를 추가 해야 한다.

<v-data-table :custom-sort="customSort" :headers="headers"></v-data-table>

• custom-sort 함수는 (item 목록, index (column의 value 값), 정렬 방법) 세가지 인자 값을 가지고 정렬된 목록의 아이템을 반환하면 된다. (props의 custom-sort 참조)

• 대략적인 소스는다음과 같다.

  customSort(items, index, isDescending) {
    items.sort((a, b) => {      
      if (index === 'Column Name') {
        if (isDescending) {
          return new Date(b.timestamp) - new Date(a.timestamp);
        } else {
          return new Date(a.timestamp) - new Date(b.timestamp);
        }
      }

      //필요하다면 else-if문으로 column에 따라 다르게 적용가능
    });

   return items;
  }

• 첫 행 CSS 안 먹히는 버그
• 무심코 넘어갈려다가 보니 페이지의 첫 행들은 모두 CSS가 안먹는 버그가 발생 (page 첫 로드 시에만)
• 이때는 key props를 할당하면 다시 원하는 CSS가 먹힘(이상하게 콘솔로 찍으면 태그의 클래스가 혼자 다르게 먹음..)
• 예를 들어, v-for로 하였다면 key를 i로 한다던지, 특정 데이터를 반복하여 생성하였다면 해당 아이템의 id를 key로 할당 (:key="i")