Vue 문서에서 테이블 정렬 및 페이징 기능을 구현하는 방법

data() {
  return {
    items: [
      { name: 'John', age: 20 },
      { name: 'Bob', age: 25 },
      { name: 'Alice', age: 30 },
      { name: 'Peter', age: 35 }
    ],
    sortKey: 'name',
    reverse: false
  }
},

methods: {
  sortBy(key) {
    this.sortKey = key;
    this.reverse = !this.reverse;
    this.items.sort((a, b) => {
      let modifier = 1;
      if (this.reverse) modifier = -1;
      if (a[this.sortKey] < b[this.sortKey]) return -1 * modifier;
      if (a[this.sortKey] > b[this.sortKey]) return 1 * modifier;
      return 0;
    });
  }
},

<th v-on:click="sortBy('name')">Name</th>
<th v-on:click="sortBy('age')">Age</th>

data() {
  return {
    items: [
      { name: 'John', age: 20 },
      { name: 'Bob', age: 25 },
      { name: 'Alice', age: 30 },
      { name: 'Peter', age: 35 }
    ],
    currentPage: 1,
    pageSize: 2
  }
},

computed: {
  displayedItems() {
    let start = (this.currentPage - 1) * this.pageSize;
    let end = start + this.pageSize;
    return this.items.slice(start, end);
  }
},

<ul class="pagination">
  <li v-bind:class="{ disabled: currentPage === 1 }" v-on:click="currentPage--">
    <a>Previous</a>
  </li>
  <li v-for="pageNumber in pages" v-bind:class="{ active: currentPage === pageNumber }" v-on:click="currentPage = pageNumber">
    <a>{{ pageNumber }}</a>
  </li>
  <li v-bind:class="{ disabled: currentPage === pageCount }" v-on:click="currentPage++">
    <a>Next</a>
  </li>
</ul>

computed: {
  pageCount() {
    return Math.ceil(this.items.length / this.pageSize);
  },
  pages() {
    let pagesArray = [];
    for (let i = 1; i <= this.pageCount; i++) {
      pagesArray.push(i);
    }
    return pagesArray;
  }
},