Creating a Filter Table Component in Vue

Creating a filter table component in Vue can be a helpful tool for displaying and organizing data in your web applications. In this tutorial, I will guide you through the steps of creating a filter table component in Vue that allows users to filter and search through data displayed in a table.

Step 1: Setting up your project
Before we start creating our filter table component, make sure you have Vue.js installed in your project. You can either create a new Vue project using the Vue CLI or add Vue to an existing project.

Step 2: Create a new Vue component
To create a new Vue component for our filter table, open your project files and create a new file called FilterTable.vue or any other name you prefer. This file will house our filter table component code.

Step 3: Define the template
In the FilterTable.vue file, start by defining the template for our filter table component. We will create a simple table that displays some sample data along with a search input field for filtering the data.

<template>
  <div>
    <input type="text" v-model="searchQuery" placeholder="Search">
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Email</th>
          <th>Age</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="user in filteredUsers" :key="user.id">
          <td>{{ user.name }}</td>
          <td>{{ user.email }}</td>
          <td>{{ user.age }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

In this template, we have included an input field bound to a searchQuery data property using v-model. We will use this property to filter the data displayed in the table. We also iterate over the filteredUsers array to display the data in the table rows.

Step 4: Add script section
Next, we need to add a script section to define the data properties and methods for our filter table component.

<script>
export default {
  data() {
    return {
      users: [
        { id: 1, name: 'John Doe', email: 'john@example.com', age: 30 },
        { id: 2, name: 'Jane Smith', email: 'jane@example.com', age: 25 },
        { id: 3, name: 'Mike Johnson', email: 'mike@example.com', age: 35 },
      ],
      searchQuery: ''
    }
  },
  computed: {
    filteredUsers() {
      return this.users.filter(user =>
        user.name.toLowerCase().includes(this.searchQuery.toLowerCase()) ||
        user.email.toLowerCase().includes(this.searchQuery.toLowerCase()) ||
        user.age.toString().includes(this.searchQuery)
      );
    }
  }
}
</script>

In the script section, we define a users array that contains sample data for our table. We also define a searchQuery data property to store the user input in the search input field. We use a computed property filteredUsers to filter the users array based on the searchQuery value. The filter condition checks if the user’s name, email, or age contains the search query string.

Step 5: Style your component
To add some styling to our filter table component, you can create a separate CSS file or add inline styles to the component.

<style>
table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
}

th {
  background-color: #f2f2f2;
}

tr:hover {
  background-color: #f2f2f2;
}
</style>

Step 6: Using the filter table component
To use the filter table component in your Vue application, import the FilterTable.vue component in your main Vue file (e.g., App.vue) and include it in the template section.

<template>
  <div>
    <h1>Filter Table Component</h1>
    <filter-table></filter-table>
  </div>
</template>

<script>
import FilterTable from './FilterTable.vue';

export default {
  components: {
    FilterTable
  }
}
</script>

Now you can run your Vue application and see the filter table component in action. Users can type in the search input field to filter the data displayed in the table based on the name, email, or age fields.

Congratulations! You have successfully created a filter table component in Vue. Feel free to customize and enhance the functionality of the component to suit your specific requirements. Happy coding!