OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Custom multiple filter with with inputs and date ranges

  • Thread starter Thread starter adam nikk
  • Start date Start date
A

adam nikk

Guest
Is it possible in some way to create advanced custom filtering for mat-table? I wanna combine all values from inputs and take all values and filter all rows.

I need to filter dates if it between selected ranges, so i need 2 dates and then compare it with row value.

filterBy​


Code:
{
 titleSearch: "title",
 dateFrom: "2024-04-01",
 dateTo: "2024-05-01"
}

data​


Code:
[
 {
  id: 1,
  title: "title 1",
  departureDate: "2024-04-30",
  ...
 },
 {
  id: 2,
  title: "title 2",
  departureDate: "2024-06-11",
  ...
 },
 ...someOtherData
]

expected response​


Code:
[
 {
  id: 1,
  title: "title 1",
  departureDate: "2024-04-30",
  ...
 }
 ...someOtherDataThatMeetsPassedConditions (title.includes(titleSearch) && isDateBetweenDates(dateFrom, dateTo, departureDate))
]

search-column.component.ts​


Code:
trackValueChanges(controlsToTrack: string[]): void {
    controlsToTrack.forEach(control => {
      this.subscription.add(
        this.formGroup.get(control).valueChanges.subscribe({
          next: (data) => {
            this.tableService.filterDataSourceByColumnValue(this.dataSource, this.column, data, control);
          }
        })
      )
    })
  }

base-table.component.ts​


Code:
filterDataSourceByColumnValue(dataSource: MatTableDataSource<any>, column: ITableColumn, filterValue: any, control?: any): void {
    this.initFilterValue(column.index, filterValue);

    dataSource.filterPredicate = (record, filter: string) => {
      let filterObj = JSON.parse(filter);

      switch(column.searchableType) {
        case SearchableTypeEnum.DATEPICKER: {
          //some condition
          return true;
        }
        case SearchableTypeEnum.NUMBER: {
          if(filterValue !== record[column.index]){
            return false;
          }
          return true;
        }
        case SearchableTypeEnum.DDL: {
          //some condition
          return true;
        }
        default: {
          let val = filterValue.toString().toLowerCase().trim();
          let recordValue = record[column.index].toLowerCase().trim();

          if(!recordValue.includes(val)){
            return false
          }
          return true;
        }
      }
    }

    dataSource.filter = JSON.stringify(this.filterCriteria);
  }

 initFilterValue(column: string, filterValue: any): void {
    if (filterValue) {
      this.filterCriteria[column] = filterValue;
    } else {
      delete this.filterCriteria[column];
    }
  }

<p>Is it possible in some way to create advanced custom filtering for mat-table? I wanna combine all values from inputs and take all values and filter all rows.</p>
<p>I need to filter dates if it between selected ranges, so i need 2 dates and then compare it with row value.</p>
<h3>filterBy</h3>
<pre><code>{
titleSearch: "title",
dateFrom: "2024-04-01",
dateTo: "2024-05-01"
}
</code></pre>
<h3>data</h3>
<pre><code>[
{
id: 1,
title: "title 1",
departureDate: "2024-04-30",
...
},
{
id: 2,
title: "title 2",
departureDate: "2024-06-11",
...
},
...someOtherData
]
</code></pre>
<h3>expected response</h3>
<pre><code>[
{
id: 1,
title: "title 1",
departureDate: "2024-04-30",
...
}
...someOtherDataThatMeetsPassedConditions (title.includes(titleSearch) && isDateBetweenDates(dateFrom, dateTo, departureDate))
]
</code></pre>
<h3>search-column.component.ts</h3>
<pre><code>trackValueChanges(controlsToTrack: string[]): void {
controlsToTrack.forEach(control => {
this.subscription.add(
this.formGroup.get(control).valueChanges.subscribe({
next: (data) => {
this.tableService.filterDataSourceByColumnValue(this.dataSource, this.column, data, control);
}
})
)
})
}
</code></pre>
<h3>base-table.component.ts</h3>
<pre><code>filterDataSourceByColumnValue(dataSource: MatTableDataSource<any>, column: ITableColumn, filterValue: any, control?: any): void {
this.initFilterValue(column.index, filterValue);

dataSource.filterPredicate = (record, filter: string) => {
let filterObj = JSON.parse(filter);

switch(column.searchableType) {
case SearchableTypeEnum.DATEPICKER: {
//some condition
return true;
}
case SearchableTypeEnum.NUMBER: {
if(filterValue !== record[column.index]){
return false;
}
return true;
}
case SearchableTypeEnum.DDL: {
//some condition
return true;
}
default: {
let val = filterValue.toString().toLowerCase().trim();
let recordValue = record[column.index].toLowerCase().trim();

if(!recordValue.includes(val)){
return false
}
return true;
}
}
}

dataSource.filter = JSON.stringify(this.filterCriteria);
}

initFilterValue(column: string, filterValue: any): void {
if (filterValue) {
this.filterCriteria[column] = filterValue;
} else {
delete this.filterCriteria[column];
}
}
</code></pre>
 
Top