Dev Grill
  • Home
  • Remote Jobs
  • Coding Interview
  • Privacy Policy
Dev Grill
  • Home
  • Remote Jobs
  • Coding Interview
  • Privacy Policy
  • Javascript
  • Vuejs

Filtering Data The Vue Way

  • October 5, 2019
  • 2 comments
  • 5 minute read
  • 580 views
  • Osuagwu Emeka
Total
1
Shares
1
0
0
0
0
0

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
Total
1
Shares
Share 1
Tweet 0
Share 0
Share 0
Share 0
Share 0
Related Topics
  • vue
  • vuejs
Previous Article
Laravel Vuejs Realtime Chat
  • Laravel
  • Redis
  • Socket.io
  • Vuejs

Real-time (one to one) Chat App with Vuejs and Laravel – Part 3

  • September 2, 2019
  • Osuagwu Emeka
View Post
Next Article
  • Javascript
  • Vuejs

Vuejs show and hiding password input for users

  • October 17, 2019
  • Osuagwu Emeka
View Post
You May Also Like
View Post
  • Javascript
  • React Native

How to use device Camara with React Native apps

  • July 30, 2020
  • Osuagwu Emeka
View Post
  • Javascript
  • Vuejs

Vuejs show and hiding password input for users

  • October 17, 2019
  • Osuagwu Emeka
Laravel Vuejs Realtime Chat
View Post
  • Laravel
  • Redis
  • Socket.io
  • Vuejs

Real-time (one to one) Chat App with Vuejs and Laravel – Part 3

  • September 2, 2019
  • Osuagwu Emeka
Laravel Vuejs Realtime Chat
View Post
  • Laravel
  • PHP
  • Redis
  • Socket.io
  • Vuejs

Real-time (one to one) Chat App with Vuejs and Laravel – Part 2

  • September 2, 2019
  • Osuagwu Emeka
Laravel Vuejs Realtime Chat
View Post
  • Javascript
  • Laravel
  • PHP
  • Redis
  • Vuejs

Real time (one to one) Chat App with Vuejs and Laravel – Part 1

  • September 2, 2019
  • Osuagwu Emeka
How to generate test data using JSON Server and Mockeroo for Graphql application
View Post
  • Javascript
  • JWT

How to generate test data using JSON Server and Mockeroo for Graphql application

  • August 16, 2019
  • Osuagwu Emeka
2 comments
  1. Avatar AutoLike says:
    February 12, 2020 at 8:03 am

    Increase Likes, Auto Like, Autoliker, ZFN Liker, Status Auto Liker, Autolike International, autoliker, Photo Liker, auto like, Working Auto Liker, Photo Auto Liker, autolike, Autoliker, auto liker, Status Liker, Autolike, Auto Liker

    Reply
  2. Avatar Brenton says:
    May 11, 2020 at 6:50 pm

    Hurrah, that’s what I was looking for, what a data! existing here at this webpage, thanks admin of this website.|

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Recent Posts
  • Remote Information Technology Jobs October 14, 2020
  • Remote Technical Recruiter Job October 14, 2020
  • Remote Web Design Jobs October 14, 2020
  • What Does Remote Job mean? October 14, 2020
  • How to Find Remote Jobs October 14, 2020
Looking for something
Dev Grill
  • Home
  • Remote Jobs
  • Coding Interview
  • Privacy Policy
Learn and solve practical coding challenges

Input your search keywords and press Enter.