Introduction

Vue.js is a popular JavaScript framework that allows developers to build dynamic and interactive user interfaces. When it comes to UI components, Vuetify is a powerful library that provides a wide range of pre-designed, customizable components.

In this article, we will focus on:

• Vuetify's data table component,

• How to optimize its performance when dealing with large datasets, and

• How to address the issue of slow rendering by implementing an infinite scroll feature.

Let's dive in!

Prerequisites

Before diving into the implementation, ensure you have a basic understanding of Vue.js and Vuetify. Familiarity with JavaScript and Vue.js single-file components will be helpful.

If you're new to these technologies, check out the official documentation for Vue.js and Vuetify to get started.

1. Setting up the Vuetify Data Table

To begin, let's set up the Vuetify data table component. In the template section, we define the structure of the data table using the v-data-table element. The headers array specifies the columns' text and properties, while the items property is bound to itemsToDisplay. This array initially holds all the items, and we will optimize the rendering process in the following steps.

I have disabled pagination using disable-pagination to implement infinite scroll and have used hide-default-footer to hide the default footer of the data table

• Make sure you add the ref prop as shown below, as it will be used to access the table properties.

    <!-- Vue template -->
    <template>
      <v-data-table
        ref="dataTable"
        :headers="headers"
        :items="itemsToDisplay.slice(itemStartIndex, itemEndIndex)"
        class="elevation-1"
        disable-pagination
        hide-default-footer
      >
        <!-- ... -->
      </v-data-table>
    </template>
  
    <script>
    export default {
      data() {
        // This is the number of rows that should be shown in at any given moment in the data table
        const itemsPerPage = 40
        return {
          itemStartIndex: 0,
          itemEndIndex: itemsPerPage,
          itemsPerPage:itemsPerPage,
          headers: [
            { text: "Dessert (100g serving)", align: "start", sortable: false, value: "name" },
            { text: "Calories", value: "calories" },
            { text: "Fat (g)", value: "fat" },
            { text: "Carbs (g)", value: "carbs" },
            { text: "Protein (g)", value: "protein" },
            { text: "Iron (%)", value: "iron" },
            { text: "Calcium (%)", value: "calcium" },
            { text: "Magnesium (%)", value: "magnesium" },
            { text: "Potassium (%)", value: "potassium" },
          ],
          desserts: generateRandomItems(), // Generate random items
        };
      },
      computed:{
        // if needed you can implement search or filter etc. logics on this computed property
        itemsToDisplay(){
            return this.desserts
        }
      }
    };
    </script>
  

  2. Generating Random Data

  To simulate a large dataset, I created a generateRandomItems() function that generates 100,000 random items. Each item has properties such as name, calories, fat, carbs, protein, iron, calcium, magnesium, and potassium. This allows us to have a realistic dataset to work with.

  • This step only creates data for demonstration purposes and can be skipped in real use-case scenarios.

<script>
export default {
  data() {
const itemsPerPage = 40
// Generate random items
function generateRandomItems() {
  const items = [];

  for (let i = 0; i < 100000; i++) {
    const item = {
      name: generateRandomString(),
      calories: getRandomNumber(100, 500),
      fat: getRandomFloat(0, 20),
      carbs: getRandomNumber(0, 50),
      protein: getRandomFloat(0, 10),
      iron: getRandomNumber(0, 5),
      calcium: getRandomNumber(0, 15),
      magnesium: getRandomNumber(0, 15),
      potassium: getRandomNumber(0, 15),
    };
    items.push(item);
  }

  return items;
}

// Helper functions to generate random data
function generateRandomString() {
  const characters = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
  let result = "";

  for (let i = 0; i < 10; i++) {
    result += characters.charAt(Math.floor(Math.random() * characters.length));
  }

  return result;
}

function getRandomNumber(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}

function getRandomFloat(min, max) {
  return (Math.random() * (max - min) + min).toFixed(1);
}
 return {
        //...
        }
}

// ...
</script>

3. Using v-intersect to Load and Display Items

Before we implement infinite scroll, let's understand how the v-intersect directive plays a role in loading and displaying items. The v-intersect directive is a powerful feature provided by Vuetify that allows us to detect when an element enters or exits the viewport. We can use this directive to trigger actions based on scrolling behavior.

In the code snippet below, we use the v-intersect directive to detect when the user is scrolling upward and trigger the loadLess function. Similarly, we use the v-intersect directive to detect when the user is scrolling downward and trigger the loadMore function:

• body.append and body.prependslots are used to add loaders above and below the table body so that they will be displayed when scrolled.

<template>
  <v-data-table
    ref="dataTable"
    :headers="headers"
    :items="itemsToDisplay.slice(itemStartIndex, itemEndIndex)"
    class="elevation-1"
    disable-pagination
    hide-default-footer
  >
    <!-- Display loading skeleton when scrolling upwards -->
    <!-- Condition in v-if is to display this ui only when user scrolls beyond displayed items -->
    <template v-if="inventoryStartIndex > 0" v-slot:[`body.prepend`]>
      <tr v-intersect.quiet="loadLess">
        <td :colspan="headers.length" class="text-center">
          <v-skeleton-loader type="table-row" /><v-skeleton-loader type="table-row" />
        </td>
      </tr>
    </template>
    <!-- Display loading skeleton when scrolling downwards -->
    <!-- Condition in v-if is to display this ui only when user scrolls beyond displayed items -->
    <template v-if="inventoriesToDisplay.length > inventoryEndIndex" v-slot:[`body.append`]>
      <tr v-intersect.quiet="loadMore">
        <!-- Add skeleton loader while load more is executed -->
        <td :colspan="headers.length" class="text-center">
          <v-skeleton-loader type="table-row" />
        </td>
      </tr>
    </template>
 </v-data-table>
</template>

4. Handling Visibility of body.append and body.prepend

We utilized the v-intersect directive to trigger the loadMore and loadLess functions on body.append and body.prepend elements when they intersect the viewport while scrolling down or up, respectively. However, once these elements become visible, they need to be hidden again to ensure that v-intersect can trigger the respective functions when they intersect the viewport during subsequent scrolling.

• For example, when body.append becomes visible after executing loadMore, we scroll the table to a row above using scrollToRow. This action hides the body.append element from the viewport. As a result, when the user scrolls down again, body.append will intersect the viewport again, triggering the loadMore function. The same principle applies to body.prepend.

<template>
 //...
</template>
<script>
export default {
//...
methods:{
    // scrolls the table to the row at specified index
    scrollToRow(index) {
     const table = this.$refs.dataTable.$el.querySelector("table");
     const row = table.rows[index];
     if (row) {
     row.scrollIntoView(true);
     } 
    }
}
//...
}
</script>

5. Implementing Infinite Scroll

To address the performance issues related to rendering a large dataset, we implement infinite scroll. By updating the itemStartIndex and itemEndIndex variables, we can control which subset of items should be displayed in the data table. This approach significantly improves performance by rendering only the visible items.

<!-- Vue template -->
<template>
  <v-data-table
    ref="dataTable"
    :headers="headers"
    :items="itemsToDisplay.slice(itemStartIndex, itemEndIndex)"
    class="elevation-1"
    disable-pagination
    hide-default-footer
  >
    <!-- Display loading skeleton when scrolling upwards -->
    <template v-if="itemStartIndex > 0" v-slot:[`body.prepend`]>
      <tr v-intersect.quiet="loadLess">
        <td :colspan="headers.length" class="text-center">
          <v-skeleton-loader type="table-row" /><v-skeleton-loader type="table-row" />
        </td>
      </tr>
    </template>

    <!-- Display loading skeleton when scrolling downwards -->
    <template v-if="itemsToDisplay.length > itemEndIndex" v-slot:[`body.append`]>
      <tr v-intersect.quiet="loadMore">
        <td :colspan="headers.length" class="text-center">
          <v-skeleton-loader type="table-row" />
        </td>
      </tr>
    </template>
  </v-data-table>
</template>

<script>
export default {
  // ...
  methods: {
    // scrolls the table to the row at specified index
    scrollToRow(index) {
      const table = this.$refs.dataTable.$el.querySelector("table");
      const row = table.rows[index];
      if (row) {
        row.scrollIntoView(true);
      }
    },
    loadMore(entries, observer, isIntersecting) {
      //only change the indexes when isIntersecting is true i.e the component is visible in viewport
      if (isIntersecting) {
        const indexesLeft = this.itemsToDisplay.length - this.itemEndIndex;
        if (indexesLeft < this.itemsPerPage) {
          this.itemStartIndex = this.itemEndIndex + indexesLeft - this.itemsPerPage;
          this.itemEndIndex = this.itemsToDisplay.length;
        } else {
          this.itemStartIndex += this.itemsPerPage;
          this.itemEndIndex += this.itemsPerPage;
        }
        // these values need to be updated according to your use case and desired value for itemsPerPage
        this.scrollToRow(23);
      }
    },
    loadLess(entries, observer, isIntersecting) {
      //only change the indexes when isIntersecting is true i.e the component is visible in viewport
      if (isIntersecting) {
        if (this.itemStartIndex < this.itemsPerPage) {
          this.itemStartIndex = 0;
          this.itemEndIndex = this.itemsPerPage;
        } else {
          this.itemStartIndex -= this.itemsPerPage;
          this.itemEndIndex -= this.itemsPerPage;
        }
        // these values need to be updated according to your use case and desired value for itemsPerPage
        this.scrollToRow(5);
      }
    },
  },
};
</script>

Conclusion

In this article, we explored how to enhance the performance of Vuetify data tables when dealing with large datasets. By implementing infinite scroll and leveraging the v-intersect directive, we significantly improved rendering speed by dynamically loading and displaying data as the user scrolls.

Note that the abovementioned implementation assumes the scenario where all the items are loaded beforehand and displayed in the v-data-table. However, the same approach can be modified to accommodate other use cases like the asynchronous fetching of items. By making a few adjustments, we can seamlessly integrate the infinite scroll behavior with the dynamic loading of data.

To explore the implementation and experiment with the code yourself, feel free to visit the following CodePen link: CLICK HERE

This article was written by Takasi Venkata Sandeep, Senior Software Engineer - I, for the GeekyAnts blog.