Table filtering in Vue.js

So in this tutorial we are going to create a table and have our table be filtered automatically.

The first thing we do is include our vue.js script. We are using it as a script and not compiling it.

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>

This tutorial is more of a continuation from some vue.js with php tutorials I created previously. I’m using the same template and you can find the full file right here.

Lets look at the script section. The first thing we did was create some variables to use in our application.

Lets review what each does.

• query – this holds the text we are searching the table for.
• originalRows – this stores a clean copy of our table data. We can always refresh the results from this.
• rows – this holds the active row data we work with.

Next we use the beforeMount() function. This allows us to copy our rows to the originalRows variable.

  beforeMount(){
      this.originalrows = this.rows;
   },

Now in our methods section we create a search function to do the searching of our table.

Lets review our search function.

The first thing we do is get our own copy of the data set.

   var searchData = this.originalrows;

Next we check to see if the query is empty. If it is empty we show the originalrows in our datatable.

 if(this.query == ""){
    this.rows = this.originalrows;
  }

If the query is not empty we loop through our data using a for loop

for (var i=0 ; i < searchData.length ; i++){

}

We then make our query lower case using the toLowerCase function.

var sparam = this.query.toLowerCase();

For every row object we need to check the keys against our query. If it has a property we do the compare. If we get positive results we add the object to the results array.

 for (var key in searchData[i]) {
  if (searchData[i].hasOwnProperty(key)) {
     var value = searchData[i][key];
     if(typeof value =="string" && value.toLowerCase().indexOf(sparam) >=0){
      results.push(searchData[i]);
      }
  }
}

At the end we update our rows data.

this.rows = results;

Finally we set a watch on the query attribute. Every time this attribute changes we call the search function.

   watch : {
            query () {
                this.search();
            }
        }

Lets check out the html side. We need to do two main things. Render our table and search the table.

In our table body we render our rows using the v-for directive.

   <tr v-for="row in rows">
       <td>{{ row.name }} </td>
       <td>{{ row.email }}</td>
       <td><span class="badge badge-default">{{ row.type }}</span></td>
       <td>{{ row.status }}</td>
</tr>

We loop through the rows and output the relevant data. You know the drill.

The next section we add the search box. A preview is shown below.

<div class="jumbotron">
    <h1 class="display-3">Filter a Table</h1>
    <p class="lead">Filtering a table with vue.js</p>
    <input type="text" v-model="query" placeholder="Search"/>
    <button @click="search()" >Search</button>
</div>

Its import to note the button with the @click directive calling the search function. However we don’t use this. We instead set a watch on the query parameter.

So how does the search happen.

  <input type="text" v-model="query" placeholder="Search"/>

We have a v-model binding on the search input. Once this value changes the table is automatically searched.

So you can do it either way. If you don’t want automatic searching just remove the watch on the query variable.

That’s it we just created a searchable table with vue.js.