Unlock the Power of Tables in Vue 3 with Bootstrap

Getting Started with Vue 3 and Bootstrap

When it comes to building single-page applications, tables are an essential component for displaying data in a clear and concise manner. With Vue 3 and Bootstrap, you can create responsive, accessible, and customizable tables that enhance the user experience.

Prerequisites

Before we dive in, make sure you have basic knowledge of Vue and Node.js installed on your local development machine. Verify your Node.js installation by running the command:

node -v

Create a New Vue Project and Set Up Bootstrap

First, install the latest Vue CLI by running:

npm install -g @vue/cli

Then, create a new Vue 3 project using the Vue CLI. To set up Bootstrap, install it by running:

npm install bootstrap

and import the CSS file into your project.

Building the Table Component with the Composition API

Vue 3 introduces the Composition API, which allows us to build efficient and robust applications using imported functions instead of declaring options. We’ll use the Composition API to build a reactive table component from scratch.

Displaying Data on the Table

Create a new component named Table.vue and define it using HTML table elements. Style the component using Bootstrap’s CSS classes. We’ll create props that the component will receive as data from the parent component.

<template>
  <table class="table">
    <thead>
      <tr>
        <th>Column 1</th>
        <th>Column 2</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, index) in data" :key="index">
        <td>{{ item.column1 }}</td>
        <td>{{ item.column2 }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  props: {
    data: {
      type: Array,
      required: true
    }
  }
}
</script>

Adding Extra Features to the Table Component

To take your table component to the next level, we’ll add multiple column sorting and filtering features.

Multiple Column Sorting

Implement multiple column sorting using the default JavaScript function or external plugins like Lodash. Install Lodash by running:

npm install lodash

and import the sort function directly. Create a sortTable() function to handle clicking events and update the data in real-time.

import { sortBy } from 'lodash';

export default {
  methods: {
    sortTable(column) {
      this.data = sortBy(this.data, column);
    }
  }
}

Filtering

Implement filtering using the JavaScript filter function. Create a search bar layout and use the computed property to update the list based on the return value of the filter function.

<template>
  <div>
    <input type="search" v-model="searchQuery" />
    <table>...</table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: ''
    }
  },
  computed: {
    filteredData() {
      return this.data.filter(item => {
        return item.column1.includes(this.searchQuery) || item.column2.includes(this.searchQuery);
      });
    }
  }
}
</script>

The Final Implementation

With these features in place, you now have a fully functional table component that’s responsive, accessible, and customizable. You can build on this foundation to include more features that improve your overall UX.