Filtering Data The Vue Way

Introduction

If you’ve built a web application, however complex or simple, at one point or the other you must have come across data management in your application. The size of your data in your application can grow depending on the functionality, users, and complexity of your application. There are various ways of managing huge amounts of data, one of which is using tables. Tables are a common way of managing huge amounts of data in a user-friendly way.

In this tutorial, we’ll walk through how to properly manage large data with tables in Vue as well as filtering them.

Setup

To begin you’ll need to have Vue CLI setup properly on your machine. To check if you already have this working fine, you can open up your terminal / Command Prompt, and type in:

vue --version

You should get the current vue cli version in the terminal. At the time of this tutorial version, 3.11.0 is the latest. Now we’ll need to globally install the cli-service module, via yarn or npm:

yarn global add @vue/cli-service-global 

npm install --global @vue/cli-service-global

We’ll also assume you have a basic understanding of Javascript and VueJS.

VueJS Rapid Prototyping

For simplicity, we won’t need all of the beautiful features the Vue CLI scaffolds for us, when we run a vue create command, the Vue CLI also provides an option to quickly serve just a single Vuejs file with the most basic of functionality as we would a .html file, awesome? Yeah I know. So basically, our project directory is going to be really basic. We’ll have a single .vue file and a local .js file acting as our data store/source.

Datastore

First, we’ll structure our data because how the data is structured determines how the table would render and filter this data. We’ll have a dummy data of user objects with their basic details.

const dataStore = [
    { name: 'martins', email: 'mars@gmail.com', age: 20 },
    { name: 'grace', email: '2mail@gmail.com', age: 21 },
    { name: 'person1', email: '2mail@gmail.com', age: 40 },
    { name: 'martins', email: 'mars@gmail.com', age: 20 },
    { name: 'grace', email: '2mail@gmail.com', age: 21 },
    { name: 'person1', email: '2mail@gmail.com', age: 40 },
    { name: 'grace', email: '2mail@gmail.com', age: 21 },
    { name: 'person1', email: '2mail@gmail.com', age: 40 },
    { name: 'grace', email: '2mail@gmail.com', age: 21 },
    { name: 'person1', email: '2mail@gmail.com', age: 40 },
  ]

 export default dataStore

We’ve created an array of users and exported the array, this would allow us import it in our component.

Component

We’ll create a basic scaffold for now of our component, import the datastore file and console it out just to be sure everything works as expected.

<template>
    <div>
        {{ msg }}
    </div>
</template>

<script>
    import dataStore from './datastore';

    export default {
        name: 'vue-table',
        data() {
            return {
                msg: ''
            };
        },
        mounted() {
            this.msg = 'component mounted'
            console.log(dataStore);
        },
    }
</script>

You can save the file, open up your terminal, be sure you are in the same directory as your project files, then serve the component with:

vue serve Table.vue

You should be able to access the file on localhost:8080 from the browser, and if everything works fine, you should see our users list in the browser console.

Table Structure

<template>
    <div class="container">
        <div>
            <h2 class="header">Vue JS Table</h2>
            <div class="search-bar">
                <input v-model="search" type="text" class="search" />
            </div>
        </div>
        <table>
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Job Title</th>
                    <th>Age</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(user, i) in users" :key=i>
                    <td data-column="First Name">{{ user.name }}</td>
                    <td data-column="Last Name">{{ user.email }}</td>
                    <td data-column="Job Title">Chief Sandwich Eater</td>
                    <td data-column="Twitter">{{ user.age }}</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

We’ll have a basic table structure, and use a v-for to display the users on the table. Let’s add a bit of styling:

Styling

<style lang="css">
    .container {
        margin: 5rem;
        text-align: center;
    }
    table {
        width: 750px;
        border-collapse: collapse;
        margin: 50px auto;
    }
    
    /* Zebra striping */
    tr:nth-of-type(odd) {
        background: #eee;
    }
    
    th {
        background: #3498db;
        color: white;
        font-weight: bold;
    }
    
    td, th {
        padding: 10px;
        border: 1px solid #ccc;
        text-align: left;
    font-size: 18px;
    }
    
    .search {
        border-radius: 10px;
        border: 1px solid #ccc;
        padding: 0.4rem;
        width: 30%;
        height: 20px;
    }
    .search:focus { 
        outline: none 
    }
</style>

We’ve styled our table to make it look better, we also added a search bar at the top, this is how we would filter our table.

Next, we’ll need to set the imported datastore to a user field in our data property.

<script>
    import dataStore from './datastore';
 
    export default {
        name: 'vue-table',
        
        data() {
            return {
            msg: ''
            };
        },
  
        mounted() {
            this.msg = 'component mounted'
            console.log(dataStore);
        },
    }
</script>

If you’ve been following through so far and everything works you should be able to see the users from the store in your browser.

Filtering Table

The idea behind filtering is, When you have a bunch of data, you’d need to show only a couple of them that corresponds to the user’s search query and when there are no search queries from the user? You’d need to revert the table to its original state.

First we’ll update our search input field to include a v-model directive to allow a two-way data binding on form input.

<input v-model="search" type="text" class="search" />

Next, we’ll use a watch property to watch the changes on the search model, and for every change (query input) we’ll filter the array list by name or email.

<script>
    import dataStore from "./datastore";
 
    export default {
        name: "vue-table",
        data() {
            return {
                users: dataStore,
                search: ''
            };
        },
        watch: {
            search (query) {
                this.users = dataStore
                this.users = this.users.filter(x => x.name.includes(query) || x.email.includes(query))
            },
        },
    };
</script>

Our filter should work properly now.

You should now have a basic understanding of how to use VueJS Instant Prototyping to build simple applications and also how filtering can be done in vue using watchers. This is just one of many ways to do this, be sure to explore and make it better.

Would love to hear your feedback and thoughts below in the comments

I hope you’ll find this useful!

• Share the post this post with 3 friends
• Follow me on twitter
• Follow me on github and star the project