¿Filtrar una columna específica en la tabla de material angular con filtrado en angular?

Contamos con tu apoyo para extender nuestros posts acerca de las ciencias de la computación.

Solución:

Tienes que anular el filterPredicate de su fuente de datos.

Aquí hay un ejemplo de cómo hacerlo: Demostración de trabajo

---

Básicamente, desea especificar a qué propiedades de sus datos se aplica el filtro:

this.dataSource.filterPredicate = function(data, filter: string): boolean  data.symbol.toLowerCase().includes(filter) ;

Agregando a la respuesta de los errores. Aquí hay una implementación más elaborada,

export class FilterTable implements AfterViewInit 
  //some datasource
  datasource //=
  displayedColumns //=insert column names on which you want to filter whether they are displayed or not, but present in the datasource

  // Apply filter to the datasource
  applyFilter(filterValue: string) 
    this.datasource.filter = filterValue;
  


  ngAfterViewInit() 
    // Overwriting filterPredicate here, as it needs to be done after the datasource is loaded.
    this.datasource.filterPredicate = (data, filter) => 
      var tot = false;
      for (let column of this.displayedColumns) 
        //incase if there is a date type and is displayed differently using a pipe, then convert it intorequired format before filtering
        //check if all the columnson which you are filtering are actually present
        if ((column in data) && (new Date(data[column].toString()).toString() == "Invalid Date"))  data[column].toString().trim().toLowerCase().indexOf(filter.trim().toLowerCase()) !== -1);
         else 
          //change this to the format in which date is displayed
          var date = new Date(data[column].toString());
          var m = date.toDateString().slice(4, 7) + " " + date.getDate() + " " + date.getFullYear();
          tot = (tot 
      
      return tot;
    
  

Siéntase libre de sugerir ediciones, si esto se puede mejorar

Si te mola el tema, puedes dejar una crónica acerca de qué te ha impresionado de este escrito.

---

---

Utiliza Nuestro Buscador