Mat-Table, HTML Table, AND/OR Logic Filter, Angular Table Filter

 AND/OR Logic Table Filter

This blog will give the complete details on using AoL filter which is created for filtering data based on multiple conditions.

AND/OR Logic Table Filter is a modernised version of the HTML Table Filter generator javascript plugin. This library adds to any HTML table a "filter by column", "filter by value", "filter by date" feature that enables users to filter and limit the data displayed within the long table. 

This filter doesn't display table, it will only gives a button or icon based on your requirement and it is user friendly. The add on feature in this package is you can filter value by date range and the complete filter is designed in such a way that it adopts CSS styles provided in configuration.

Filter For

You can use aot-filter to filter complete table data by column value, Filter will display each column header followed by value, by date range.

Getting started

Using the aol-filter with Bootstrap Table

You can create a new project by following below instructions or download the Github project from test-filter.

Create an Angular project using

ng new test-filter

Install npm packages
npm install
Add Bootstrap to your project
npm i bootstrap

After installing the package add "./node_modules/bootstrap/dist/css/bootstrap.min.css" inside "styles" in angular.json file.

"styles": ["./node_modules/bootstrap/dist/css/bootstrap.min.css",...]
Add angular material to the project
ng add @angular/material

Start the application
ng serve

The application will start in the default port 4200. Open your favourite browser then type 

http://localhost:4200/

Install aot-filter to your project

aol-filter

Navigate to above link and follow the instructions to know how to install aol-filter package in your application and install.

Module file configuration

Now it's time to configure HTML table in your project. Open app.module.ts file and add import BrowserAnimationsModule, FormsModule, ReactiveFormsModule, MatMenuModule, MatButtonModule, AotFilterModule. 

Component file configuration

Open app.component.ts file and add ELEMENT_DATA.

export const ELEMENT_DATA = [
{
id: 1,
name: 'John',
email_address: 'john@gmail.com',
mobile_number: '8888888888',
date: new Date('2022-03-31')
},
{
id: 2,
name: 'Liam',
email_address: 'liam@gmail.com',
mobile_number: '7777777777',
date: new Date('2022-03-05')
},
{
id: 3,
name: 'James',
email_address: 'james@gmail.com',
mobile_number: '6666666666',
date: new Date('2022-03-28')
},
{
id: 4,
name: 'Rober',
email_address: 'robert@gmail.com',
mobile_number: '5555555555',
date: new Date('2022-03-29')
},
{
id: 5,
name: 'Henry',
email_address: 'henry@gmail.com',
mobile_number: '4444444444',
date: new Date('2022-03-02')
}
];

Add a variable displayColumns that holds the header names of table



displayColumns: string[] = ['name', 'mobile_number', 'email_address', 'date']


Now configure the filterInput variable which actually gives the information to aol-filter on the data to be displayed and custom styles.

AotFilter is a namespace provided from AotFilterModel which provide type details for the variables. Add it to you component as shown below.

import { AotFilterModel } from 'aot-filter';
filterInput: AotfilterModel.AotFilter = {
aotMenu: {
aotMenuType: AotfilterModel.AotMenuType.button,
aotMenuText: 'Filter',
iconWithText: 'filter_list',
textClass: 'btn btn-primary',
iconCss: {
color: 'white'
}
},
clearText: 'Clear All',
filterCategory: {
category: [
{
columnName: 'name',
header: 'Name',
headerCss: 'header-font',
filteredChips: []
},
{
columnName: 'mobile_number',
header: 'Mobile Number',
headerCss: 'header-font',
filteredChips: []
},
{
columnName: 'email_address',
headerCss: 'header-font',
header: 'Email',
filteredChips: []
}
]
},
dataSource: ELEMENT_DATA,
dateFilter: {
header: 'Date',
headerCss: 'header-font',
dateRange: [
{
date: null,
text: 'Start Date',
minStartDate: new Date('2022-03-01'),
maxEndDate: new Date('2022-03-31')
},
{
date: null,
text: 'End Date',
minStartDate: new Date('2022-03-01'),
maxEndDate: new Date('2022-03-31')
}
]
},
matMenuFilterCss: 'mat-menu-filter-new',
clearTextCss: 'clear-text-row',
chipCss: 'mat-chip-custom',
chipCssSelected: 'mat-chip-custom-selected'
}

If you want to use default filter without any custom styles then remove keys that hold the css class i.e 

textClass, iconCss, headerCss, matMenuFilterCss, clearTextCss, chipCss, chipCssSelected.

Create a method that will return filtered data on aol-filter event change.

  
  onFilterApply($event: AotfilterModel.AotResponse) {
this.filterInput.dataSource = $event.dataSource;
}

HTML file configuration

Open app.component.html and add the table that display the dataSource in app.component.ts. 


<table class="table table-striped">
<thead>
<tr>
<th scope="col">ID</th>
<th scope="col" *ngFor="let column of displayColumns">{{column}}</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of filterInput.dataSource">
<td>{{data.id}}</td>
<td>{{data.name}}</td>
<td>{{data.mobile_number}}</td>
<td>{{data.email_address}}</td>
<td>{{data.date | date: 'shortDate'}}</td>
</tr>
</tbody>
</table>
<div *ngIf="!filterInput.dataSource.length">
No data found
</div>

Now import the selector <lob-aot-filter> provided from aol-filter.


<lib-aot-filter [filterInput]="filterInput" (aotFilterResponse)="onFilterApply($event)"></lib-aot-filter>

filterInput is the input accepted from aol-filter that will display the filter based on the configuration.

aotFilterResponse is an event generated on clicking any value on filter. Filtered data can be accessed in onFilterApply method in app.component.ts.

CSS file configuration

Add all the required styles in app.component.css file which can be passed in filterInput configuration as shown above.


::ng-deep .mat-menu-filter-new {
max-width: 550px !important;
width: 550px;
max-height: 250px;
height: 400px;
overflow: auto;
}

::ng-deep .clear-text-row {
color: #000;
}

::ng-deep .header-font {
font-weight: bold;
}

::ng-deep .mat-chip-custom-selected {
background-color: #873600 !important;
color: #FDF2E9 !important;
height: 20px;
}

::ng-deep .mat-chip-custom {
background-color: #FDF2E9 !important;
color: #873600 !important;
height: 20px;
cursor: pointer !important;
}


Now you can check the browser for http://localhost:4200/ and which displays Table and Filter.

KeyWords

Mat-Filter, Table Filter, HTML Filter, Filter, AND OR Logic Filter.

AOL Filter ScreenShot



aol-filter with column values

aol-filter with date range



Demo Video



Contact Details

For more details please write us on aish.anu16@gmail.com

Comments

Post a Comment

Popular posts from this blog

Angular Material Drag/Drop Table

Image
 Angular Material Drag/Drop Table In this post, we are going to go through the complete example of how to implement Drag/Drop rows in Angular Material Table. This is a step-by-step tutorial where you are going to learn how to add the Drag/Drop feature in the Angular Material Table. At the end of the document, you can find the YouTube video that contains the live working session on implementing drag-drop functionality on the angular material table. Prerequisites To begin with, you need to have a basic knowledge of Angular Framework, Angular Material with NodeJs, Angular CLI, and Visual Studio Code(VSC) installed in your system. Creating New Project In order to start with, create a new Angular project in the VSC editor by typing in the below command in the terminal. ng new angular-drag-drop-table After successfully creating the project open the project in VSC by clicking on File => Open Folder => angular-drag-drop-table   (find the path wherever you have created the proje...
Read more