Angular Material 8|9 Table Select Box Filters for Multiple Columns

Angular Material Table provides a great default filter component to filter data shown to the user, but this takes into account all columns and their cells. In this tutorial, we will create custom selection filters for the table’s values with multiple selections.

Why do this?

Sometimes we have data in the datatable with similar data values for example STATUS column may have Active, InActive, Blocked values. So we can create a filter for Status to show only Active rows.

Here we will also create a function to fetch Unique values from Table rows itself and generate Filte drop down to the filter.

This is how it will work

Check the working demo here.

The filters above table are created by using data objects in the table itself, but it will only show unique values and remove the duplicates. We will discuss this special function to create these filters out of table data.

Let’s get started and implement it by creating a new Angular application and installing Angular Material in it. Here we are using Angular version 9.0.6

Create an Angular Project

To quickly create an Angular project, we use the Ng CLI tool which makes it very easy to create an Angular project with all boilerplates required. Install it by running

 

Run the following command to create a project:

Install Material Package

After creating the project and moving to its root, run following NPM command and answer some configuration questions to install the Material package in your project.

Update App Module

In our tutorial, we will add Material Table and other elements like SelectBox for filters, Button to reset. Also to fetch server JSON data we will make an HTTP call using HttpClientModule.

For using all these modules, we will update the app.module.ts file as shown below:

 

Adding Material Table

To keep this tutorial simple, we will add the material table in the App component which is created by default when we create a project using the Ng CLI tool.

For creating a Material table update the app.component.html template with below code:

To feed this table with remote data, update the app.component.ts file with the following code:

Above we have getRemoteData function to fetch data using the HTTP get method.

Up to here, we have a basic Material Table ready with data. Next, we will learn how to add filters for that we will update the above template and class code in coming sections.

Adding Filters on Table

In the template, add Material select boxes which will be created dynamically using *ngFor loop over the filterSelectObj object. The Reset button will clear the filters and show all table data.

Next, update the app.component.ts class file with following the code:

Let’s have a look at the important functions we used above.

getFilterObject(): This method is accepting the data and property name of the column from which we want unique values to return. It will return the column values which are unique and updates the filterSelectObj‘s options property for each filter specified.

this.dataSource.filterPredicate: The filterPredicate method can be overridden to use custom logic for table filtration. Here we used the createFilter() method to filter out rows on the filter selected.
filterChange(): This method is called on each filter selected.

That’s it you can run the app by executing $ ng serve --open to see it in action.

Leave a Reply

avatar
  Subscribe  
Notify of