Dynamic Multi Filter Data Table using VueJS and Vuetify

I was asked to create a web client which should have a Data Table which has a lot of columns and also asked to create checkboxes with column names as label to toggle between add and remove any column from the table as per user’s convenience and needs (not in scope of this tutorial). Most importantly, it should also have Multi Filter capabilities as the most primary feature.

Multi filter of a data table means filtering the whole data table based on filtering a column or multiple columns.

Soon I started looking for a library or dynamic solution in the internet for this multi filter functionality challenge which should serve my purpose easily.

However, instead I found something where for each column, it has separate filter functions and HTML template.

Soon after, you realize that you have more than 50 columns in your data table and you need to write a filter function and template for each column, then your reaction seem like …….

So looking for a dynamic solution no matter how your data table looks like was no way going forward. I tried every corner in the internet but no chance. Having this situation, I thought to take matters into my own hand.

After a good brainstorming, I finally solved my challenge. Then I thought to write an article about it, what if anyone might need or looking for or just be interested.

In this article we will go through each of the step from creation of a vue project, adding vuetify to the project, implement a data table component, adding the multi filter function and as a bonus we will also implement smart filters to the multi filter function. Kindly note, the solution is not limited to only Vuetify Data Table, you can make your own data table in any Framework and apply the same solution.

Table of contents

1. A brief introduction to Vue and Vuetify.
2. Creation of a Vue Project and add Vuetify to it.
3. Implement the Data Table component
4. Implement Multi Filter function
5. BONUS: Adding Smart Filters to the multi filter function

1. A brief introduction to Vue and Vuetify

Vue is a JavaScript framework for building user interfaces. It builds on top of standard HTML, CSS and JavaScript, and provides a declarative and component-based programming model that helps you efficiently develop user interfaces, be it simple or complex. It’s a component-based framework, which means that we build apps with Vue by nesting components and passing data in between them.

Vuetify is a complete UI component library made in VueJs like any other components that you can find or build by yourself. Vuetify allows to create web apps with stunning visuals without much effort. You can easily add common UI features such as toolbars, text-fields, buttons, dialog, checkboxes, data-table and many more. It is based on the well-known Material Design system developed by Google and used by the company in practically all its apps and websites. For tutorials and examples for all the components, visit the website, https://vuetifyjs.com/en/

In this project we are going to use the vuetify-data-table component to achieve our goal. However, remember, we are using Vuetify for our simplicity and make things easy. The same goal or functionality, you can also achieve by using your own component or HTML as well instead of using any third party libraries or similar.

Kindly note, installation of node, npm and VueJS is out of scope of this tutorial.

2. Creation of a Vue Project and add Vuetify to it

To create a new vue CLI project, please run in the terminal:

vue create multi_filter_data_table

For simplicity purposes please select default and your project will be created which may take up to few minutes.

As you will see in your project tree, there will be bunch of folders and files in it. I will not go through all these files to explain. If you are new to vue kindly follow the tutorials in Tutorial | Vue.js (vuejs.org).

At first, we must clean our project tree which are not of our purpose, but before doing that we must add vuetify to the project since this will bring in more changes into the files. In order to do so, type the following in the terminal:

vue add vuetify

Now as I discussed, at first we need to clean our project tree, means get rid of files and content which are not useful for us.

1. Delete the HelloWorld.vue file from the components folder.
2. Remove the component HelloWorld added in App.vue file along with several stuff from the template. Finally, your App.vue should look like in the below image:

Now lets run the project or start the client server.

In your terminal, navigate to project folder and type,

npm run serve

This will compile the whole vue project and start our development server.

If you log into http://localhost:8080, you will see an empty white page since we have not added anything yet. Now to add something we will directly work with adding a data table component without wasting any time.

3. Implement the Data Table component

To add a data table, we create a file called, ‘DataTable.vue’ inside the components folder and add the following into the file:

Before that we will add our required data in our data function for the data table. Most importantly we need twodata models namely the headers and the items. The headers are an array of objects which describes the table columns. Items are array of objects which contains the rows of the table. For this we will use dummy data. Kindly add the following in the data function of the DataTable.vue file.

In header we have two keys viz. text, value. Text is the display name for the column in the data table and value is for correspondence between headers and row items.

Now we will add a vuetify data table. Data Table has several useful props you can add as per your requirements and convenience, for example: multi-sort, pagination, single and multi-select etc. Navigate to Data table component — Vuetify (vuetifyjs.com) for more details. In this project we will not add much props. So add the data table component in the tempate of DataTable.vue file.

Now register the component in App.vue file

Start the app again using, npm run serve and log into http://localhost:8080

You will see the data table rendered but right now it is only a plain data table where you only see the rows and columns. In the next section we will implement the multi filter functionalities.

4. Implement Multi Filter function

In order to implement the multi filter function, we will do the following step-by-step:

1. Use v-slots to add text input field for each of the columns.
2. Then write a computed method to handle the filtering.

Add search input field

If any one is not familiar with v-slots, v-slots are named slots introduced in Vue 2.6. Slots give you the ability to put new contents in new places within a component. Here we will use named slot coming within the vuetify data table called header. Slots are template component which should be inside v-data-table component. First add a variable which is an object called multiSearch: {} in the data function. See code below for add the input fields using v-slots.

Refresh the page in your browser, you will see an input field with the column name as the placeholder. We have totally replaced the default header display by slot. What we did is, for each header in headers array of objects we added a slot which contains the column header name followed by a div tag which contains a v-text-field.

The v-model inside the v-text-field is the object multiSearch which we have already added in the data function. When any user enters a text on any of the column, it adds the column name as a key (header.value) in this object and the entered text as it’s value. So we will look forward to write the computed method which will use the multiSearch object against the rowItems to filter the table as per entered text either one or in more than one column. For that we will add a computed method:

Our computed method name is filteredData. The method will first check if multiSearch object is not empty or let’s say if user has entered a text and tried to filter data in at least one column. Then the function will loop through the rowItems using the javascript in-built filter function and within that we will loop through the multiSearch object using Object.Entries function from JavaScript and consider key and value both of the multiSearch object and return all objects of rowItems matching the key, value from multiSearch with key, value of rowItems by using include javascript function. Try to filter something by yourself and see the magic.

Now that we have solved the multi filter issue, we would like to go forward with the BONUS chapter, which is adding smart filters.

5. BONUS: Adding Smart Filters to the multi filter function

Well, when I say smart filters, it means entering certain text in the search field in which the filter function will tend to filter by giving more flexibility to the user to filter rows, examples:

1. A filter text with an | operator, lets imagine, filter all rowItems where Dessert Name starts with letter ‘F|D’
2. A filter text with a ! operator at the beginning which should ignore or filter out, for example, ‘!F|D’ in the search text field should bring you all the rowItems whose Dessert Name is not starting with F and D
3. If number, then > or < or = (strictly equal).

So lets go ahead and start to implement one by one in our filteredData function.

Filter with OR operator

First the function must always check if there is an OR operator in the text string or not and then split the string through the ‘|’ operator. Then we have an array and then use inbuilt javaScript function called some method. The some() method tests whether at least one or more elements in the array passes the logic or test implemented inside the function. Below is updated code for the filteredData computed method.

In the red box in the above picture is the logic. It also check if it not contains the ! operator in the text because we are also going to have a logic to filter out items by using the ! operator in the filter text.

Filter with NOT operator

Same as in filter with OR operator, we check if the start of the string has a ! operator or not.

we have two if blocks for ! operator filters.

1. If the user wants to filter out only one text, e.g. ‘!F’
2. If the user wants to filter out with two texts, e.g. ‘!F|D’

Try it out in your browser.

Filter with less than, greater than and equal to

Now, for greater than and less than function, it should be very useful when we have numbers in our data table except for strictly equal, since it should work for all data types. Since the code for these functionalities is quite straight-forward, I will not go further to explain the blocks in detail.

Try it out by yourself once and see the changes.

Finally below is the full code.

Below is some screen shots from the browser:

Conclusion

In real life examples, you just need to manipulate with the data rows and header columns. It may come from an api in the backend or maybe a file, anything it could be. Furthermore, you can add more logics to your smart filters. For example, greater than or equal to and vice versa or filter with date and time or with AND operator.

Finally, as mentioned earlier, you can apply the same solution in any other javaScript frameworks, other programming languages etc. Next I will try to produce the same example in ReactJs. I hope you enjoyed the tutorial.