Angular material table multiple filterpredicate

Question

Folks.

I need help. I'm creating a pivot table that must contain a global filter and column filters. But the way I'm coding I'm not getting it.

Follow the code and the link of stackblitz

<p>data-table-dynamic works!</p>

<mat-form-field *ngIf="filter">
  <input
    matInput
    (keyup)="applyFilter($event)"
    placeholder="{{ filterPlaceholder }}"
  />
</mat-form-field>

<div class="mat-elevation-z8">
  <table
    mat-table
    [dataSource]="dataSource"
    matSort
    [ngStyle]="{ 'min-width': +tableMinWidth + 'px' }"
  >
    <ng-container *ngFor="let column of columns">
      <ng-container matColumnDef="{{ column.columnDef }}">
        <th class="header" mat-header-cell *matHeaderCellDef mat-sort-header>
          <div fxFlexFill>
            {{ column.header }}
          </div>
        </th>
        <td mat-cell *matCellDef="let row">{{ column.cell(row) }}</td>
      </ng-container>
    </ng-container>

    <ng-container *ngIf="buttons.length >= 0">
      <ng-container matColumnDef="actions">
        <th mat-header-cell *matHeaderCellDef>
          <button
            *ngIf="columnsFilter"
            mat-icon-button
            matTooltip="Toggle Filters"
            (click)="toggleFilters = !toggleFilters"
          >
            <mat-icon>search</mat-icon>
          </button>
        </th>
        <td
          mat-cell
          *matCellDef="let row"
          [ngStyle]="{ 'min-width': 'calc(55px * ' + buttons.length + ')' }"
        >
          <div class="btn-group" *ngFor="let button of buttons">
            <button
              mat-icon-button
              [matMenuTriggerFor]="menu"
              [matMenuTriggerData]="{ data: row }"
            >
              <mat-icon>more_vert</mat-icon>
            </button>
          </div>
        </td>
      </ng-container>
    </ng-container>

    <ng-container *ngFor="let column of columns; let i = index">
      <ng-container matColumnDef="{{ column.columnSearch }}">
        <th class="header" mat-header-cell *matHeaderCellDef>
          <div
            fxFlexFill
            class="filters-container"
            [class.animate]="toggleFilters"
          >
            <mat-form-field *ngIf="i >= 0" appearance="outline">
              <input
                matInput
                placeholder="Press 'Enter' to search"
                [(ngModel)]="filtersModel[i]"
                (keyup)="searchColumns()"
              />
              <mat-icon matSuffix>search</mat-icon>
            </mat-form-field>
          </div>
        </th>
        <td mat-cell *matCellDef="let row">{{ column.cell(row) }}</td>
      </ng-container>
    </ng-container>

    <ng-container matColumnDef="filter" *ngIf="columnsFilter">
      <th mat-header-cell *matHeaderCellDef class="filterHeaderCell">
        <div class="filters-container" [class.animate]="toggleFilters">
          <button
            mat-icon-button
            matTooltip="Clear Filters"
            (click)="clearFilters()"
          >
            <mat-icon>search_off</mat-icon>
          </button>
        </div>
      </th>
    </ng-container>

    <!-- Disclaimer column - with nullable approach -->
    <ng-container matColumnDef="disclaimer" *ngIf="footer">
      <td mat-footer-cell *matFooterCellDef colspan="100%">
        <strong>{{ footer }}</strong>
      </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <ng-container *ngIf="columnsFilter">
      <tr
        mat-header-row
        *matHeaderRowDef="displayedColumnsSearch"
        class="mat-header-filter"
      ></tr>
      <!-- class="no-default-height" -->
    </ng-container>
    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>

    <!-- <tr mat-header-row *matHeaderRowDef="searchColumn"></tr> -->

    <ng-container *ngIf="footer">
      <!-- Make footer nullable -->
      <tr
        mat-footer-row
        *matFooterRowDef="['disclaimer']"
        class="second-footer-row"
      ></tr>
    </ng-container>
  </table>

  <mat-paginator
    [pageSizeOptions]="pagination"
    [pageSize]="pageSize"
    [ngStyle]="{ 'min-width': +tableMinWidth + 'px' }"
  ></mat-paginator>

  <mat-menu #menu="matMenu">
    <ng-template matMenuContent let-data="data">
      <div *ngFor="let button of menuButtons">
        <button
          mat-menu-item
          (click)="this.buttonClick.emit([button.action, button.payload(data)])"
        >
          <mat-icon>{{ button.icon }}</mat-icon>
          {{ button.description }}
        </button>
      </div>
    </ng-template>
  </mat-menu>
</div>

import {
  Component,
  EventEmitter,
  Input,
  OnChanges,
  OnInit,
  Output,
  SimpleChanges,
  ViewChild,
} from '@angular/core';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';
import { TableBtn, TableColumn } from '../../core/interfaces';
import { TableMenu } from '../../core/interfaces/table-menu';

@Component({
  selector: 'app-data-table-dynamic',
  templateUrl: './data-table-dynamic.component.html',
  styleUrls: ['./data-table-dynamic.component.scss'],
})
export class DataTableDynamicComponent implements OnChanges, OnInit {
  @Input() columns: TableColumn[] = [];
  @Input() buttons: TableBtn[] = [];
  @Input() menuButtons: TableMenu[] = [];
  @Input() data: any[] = [];
  @Input() filter: boolean = false;
  @Input() filterPlaceholder: string = 'Filter';
  @Input() columnsFilter: boolean = false;
  @Input() footer: string = null;
  @Input() pagination: number[] = [];
  @Input() pageSize: number;
  @Input() tableMinWidth: number = 500;
  @Output() filteredData = new EventEmitter<any[]>();
  @Output() buttonClick = new EventEmitter<string[]>();

  dataSource: MatTableDataSource<any>;
  displayedColumns: string[];
  displayedColumnsSearch: string[];

  headers: string[] = this.columns.map((x) => x.columnDef);
  headersFilters = this.headers.map((x, i) => x + '_' + i);
  filtersModel = [];
  filterKeys = {};

  toggleFilters = true;

  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
  @ViewChild(MatSort, { static: true }) sort: MatSort;

  constructor() {}

  ngOnInit(): void {}

  ngOnChanges(changes: SimpleChanges): void {
    console.log(changes);
    if (this.data) {
      if (changes.data) {
        this.dataSource = new MatTableDataSource(this.data);
        this.dataSource.filterPredicate = (item, filter: string) => {
          const colMatch = !Object.keys(this.filterKeys).reduce(
            (remove, field) => {
              return (
                remove ||
                !item[field]
                  .toString()
                  .toLocaleLowerCase()
                  .includes(this.filterKeys[field])
              );
            },
            false
          );
          return colMatch;
        };
        this.dataSource.sort = this.sort;
        this.dataSource.paginator = this.paginator;
        this.displayedColumns = [...this.columns.map((c) => c.columnDef)];
        this.displayedColumnsSearch = [
          ...this.columns.map((c) => c.columnSearch),
          'filter',
        ];

        this.columns.forEach((value, index) => {
          this.filterKeys[this.columns[index].columnDef] = '';
        });
        if (this.buttons.length > 0)
          this.displayedColumns = [...this.displayedColumns, 'actions'];
      }
    }
  }

  applyFilter(filterValue) {
    this.dataSource.filter = filterValue.target.value.trim().toLowerCase();
    this.filteredData.emit(this.dataSource.filteredData);

    if (this.dataSource.paginator) {
      this.dataSource.paginator.firstPage();
    }

    this.dataSource.sort = this.sort;
  }

  searchColumns() {
    this.filtersModel.forEach((each, ind) => {
      this.filterKeys[this.columns[ind].columnDef] = each || '';
    });
    //Call API with filters
    this.dataSource.filter = JSON.stringify(this.filterKeys);
    this.filteredData.emit(this.dataSource.filteredData);

    if (this.dataSource.paginator) {
      this.dataSource.paginator.firstPage();
    }

    this.dataSource.sort = this.sort;
  }

  clearFilters() {
    this.filtersModel = [];
    this.columns.forEach((value, index) => {
      this.filterKeys[this.columns[index].columnDef] = '';
    });
    //Call API without filters
    this.searchColumns();
  }
}

StackBlitz

I know it's not like this, but I did some tests and I couldn't. I put the working code so you can help me. If you have any article or example, it will help a lot.

I took this code as an example and adjusted it to what I need.

Answer 1

Well, we can create a FormGroup using the values of the columns, for this columns' is a property and we use the way @Input('columns') set _(value)`

  form: FormGroup = new FormGroup({});
  columns: TableColumn[] = [];
  @Input('columns') set _columns(value) {
    this.columns = value;
    value.forEach((x) => {
      this.form.addControl(x.columnDef, new FormControl());
    });
    this.form.addControl('_general', new FormControl());
    this.form.valueChanges.subscribe((res) => {
      this.dataSource.filter = JSON.stringify(res);
    });
  }

Our "customFilter" can be like

customFilter = (data: any, filter: string) => {
    const filterData = JSON.parse(filter);
    let ok = true;
    if (filterData._general)
    {
      const search = filterData._general.toLowerCase();
      ok=false;
      for (const prop in data) {
        ok = ok || (''+data[prop]).toLowerCase().indexOf(search) >= 0;
      }

    }
    Object.keys(filterData).forEach((x) => {
      if (x!='_general' && filterData[x]) {
          if (ok) ok = (''+data[x]).toLowerCase().indexOf(filterData[x].toLowerCase())>=0;
      }
    });
    return ok;
  };

At last, enclosed the table in a formGroup.

<form *ngIf="form" [formGroup]="form">
  <mat-form-field *ngIf="filter">
    <input
      matInput formControlName="_general"
      placeholder="{{ filterPlaceholder }}"
    />
  </mat-form-field>

  <div class="mat-elevation-z8">
    <table ...>
      ...
      <!-- our "inputs" filter becomes like-->
       <mat-form-field *ngIf="i >= 0" appearance="outline">
           <input matInput
                placeholder="Press 'Enter' to search"
                [formControlName]="column.columnDef"
              />
              <mat-icon matSuffix>search</mat-icon>
       </mat-form-field>
    ...
    </table>
</form>

Update my bad!!

As we are putting the table under a *ngIf="form", the "paginator" (and the sort) is not accesible until the form is created. For this we need make some changes

1. We remove the {static:true} in ViewChild(MatPaginator) and ViewChild(MatSort)

     @ViewChild(MatPaginator) paginator: MatPaginator;
     @ViewChild(MatSort) sort: MatSort;
   

   Remember that we only can use {static:true} if the element is always in the component -if it is not under a *ngIf-

2. Implements in the component AfterViewInit

   export class DataTableDynamicComponent implements OnChanges,AfterViewInit{..}
   

3. Is in this function we need assing the paginator and sort

     ngAfterViewInit()
     {
       this.dataSource.paginator=this.paginator
       this.dataSource.sort=this.sort
   
     }