Vue Table with Pagination

Vue Table with Pagination: In Vue.js, implementing pagination in tables is a user-friendly way of handling large data sets. Developers can use Vue.js components, data properties, computed properties, and custom methods to create a system that efficiently navigates and displays data. Users can easily navigate through pages, display items specific to the current page, and access navigation controls. This makes it easy to access information and reduces the need for excessive scrolling. Pagination is a simple yet effective way to optimize the usability of tables and provide users with a more efficient and pleasant experience.

written

reviewed

updated

How to add pagination to a Vue table?

This is a Vue.js code that displays a table of programming languages and their developers. It also includes pagination buttons to navigate through the table.

The data includes an array of objects with properties for ID, language, and developer name. The number of items displayed per page and the current page number are stored in the data.

The computed properties calculate the items to display based on the current page number and items per page, as well as the page numbers based on the total number of items and items per page.

The methods include functions to navigate to the previous or next page, jump to a specific page, or go to the first or last page.

Overall, this code provides a simple and efficient way to display and navigate a large table of data.

Vue Tablw with Pagination Example

  <div id="app">
    <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' },
           ],
          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>

Run

VueJs Tutorial

Vue Table with Pagination

How to add pagination to a Vue table?

Vue Tablw with Pagination Example

Output of above example

VueJs Tutorial

Vue Table with Pagination

Feedback for Abhishek

How to add pagination to a Vue table?

Vue Tablw with Pagination Example

Output of above example