Vue Table with Pagination

<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <h3>Vue Table with paginatin</h3>
    <table>
      <thead>
        <tr>
          <th>S.no</th>
          <th>Language</th>
          <th>Developer Name</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in itemsToDisplay" :key="item.id">
          <td>{{ item.id }}</td>
          <td>{{ item.language }}</td>
          <td>{{ item.dev_name }}</td>
        </tr>
      </tbody>
    </table>
    <div class="pagination">
      <button @click="goToFirstPage">First Page</button>
      <button @click="previousPage" :disabled="currentPage === 1">Previous</button>
      <div v-for="pageNumber in pageNumbers" :key="pageNumber">
        <span class="page-link" :class="{ active: currentPage === pageNumber }" @click="jumpToPage(pageNumber)">
          {{ pageNumber }}
        </span>
      </div>
      <button @click="nextPage" :disabled="currentPage === pageNumbers.length">Next</button>
      <button @click="goToLastPage">Last Page</button>

</div>
  </div>
  <script type="module">
    const app = new Vue({
      el: "#app",
      data() {
        return {
          items: [
            { id: 1, language: 'Vue', dev_name: 'Andrew' },
            { id: 2, language: 'React', dev_name: 'CodeSmith' },
            { id: 3, language: 'Angular', dev_name: 'Softwize' },
            { id: 4, language: 'Node', dev_name: 'DevHive' },
            { id: 5, language: 'Express', dev_name: 'Matthew Taylor' },
            { id: 6, language: 'Php', dev_name: 'ByteBuilders' },
            { id: 7, language: 'Javascript', dev_name: 'Jennifer Lee' },
            { id: 8, language: 'Vuetify', dev_name: 'Robert Thompson' },
            { id: 9, language: 'Bootstrap', dev_name: 'Christopher Davis' },
            { id: 10, language: 'Codemirror', dev_name: 'Laura Smith' },
            { id: 11, language: 'Quill-Vue', dev_name: 'William Johnson' },
            { id: 12, language: 'HTML', dev_name: 'Elizabeth Martinez' },
            { id: 13, language: 'CSS', dev_name: 'David Lee' },
            { id: 14, language: 'Jquery', dev_name: 'Andrew' },
            { id: 15, language: 'MYSQL', dev_name: 'AlgoAllies' },

],
          itemsPerPage: 5,
          currentPage: 1
        }

},
      computed: {
        itemsToDisplay() {
          const start = (this.currentPage - 1) * this.itemsPerPage
          const end = start + this.itemsPerPage
          return this.items.slice(start, end)
        },
        pageNumbers() {
          return Array.from({ length: Math.ceil(this.items.length / this.itemsPerPage) }, (_, i) => i + 1)
        }
      },
      methods: {
        previousPage() {
          if (this.currentPage > 1) {
            this.currentPage--
          }
        },
        nextPage() {
          if (this.currentPage < this.pageNumbers.length) {
            this.currentPage++
          }
        },
        jumpToPage(pageNumber) {
          this.currentPage = pageNumber
        },
        goToFirstPage() {
          this.currentPage = 1
        },
        goToLastPage() {
          this.currentPage = this.pageNumbers.length
        }
      }

});
  </script>

th,
    td {
      text-align: left;
      padding: 8px;
      border: 1px solid #ddd;
    }

th {
      background-color: #f2f2f2;
      color: #333;
    }

.pagination {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 20px;
    }

button,
    .page-link {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      height: 36px;
      min-width: 36px;
      background-color: #ffffff;
      border: 1px solid #e5e5e5;
      border-radius: 3px;
      color: #333333;
      cursor: pointer;
      font-size: 14px;
      font-weight: 500;
      padding: 0 12px;
      margin: 0 5px;
      text-decoration: none;
      transition: all 0.2s ease-in-out;
    }

button:hover,
    .page-link:hover {
      background-color: #f5f5f5;
    }

button:focus,
    .page-link:focus {
      outline: none;
      box-shadow: 0px 0px 0px 3px rgba(66, 153, 225, 0.2);
    }

button:disabled,
    .page-link.disabled {
      opacity: 0.5;
      cursor: default;
    }

.active {
      background-color: #2196f3;
      border-color: #2196f3;
      color: #ffffff;
    }

@media only screen and (max-width: 768px) {
      .pagination {
        flex-wrap: wrap;
      }

button,
      .page-link {
        margin: 5px;
      }
    }
  </style>
</body>
</html>