Dominar el filtrado avanzado en interfaces de cuadrícula Angular con Ignite UI

El filtrado es una característica central de cualquier cuadrícula de datos, ya que desempeña un papel fundamental para ayudar a los usuarios a encontrar y trabajar con datos relevantes de manera rápida y eficiente. A medida que los conjuntos de datos crecen en tamaño y complejidad, los usuarios necesitan algo más que simples búsquedas de texto. Aquí es donde entran en juego Ignite UI for Angular y el componente Grid. Proporciona una API de filtrado robusta que admite todo, desde operaciones básicas hasta lógica avanzada y personalizable, manejando varios escenarios de filtrado (como filtrado avanzado, filtrado programático y otros) con facilidad.

Esto es lo que cubrirá esta publicación para ayudarlo a comprender cómo funciona todo y explorar técnicas de filtrado avanzadas clave para interfaces de cuadrícula complejas:

• Filtrado al estilo de Excel

• Operandos de filtrado personalizados

• Estrategias de filtrado personalizadas

• Filtrado avanzado

• Filtrado programático

• Filtrado remoto

Trabajar con filtrado de estilo Excel

El filtrado de estilo Excel introduce paradigmas de interfaz de usuario familiares para Angular aplicaciones, lo que permite a los usuarios aplicar filtros rápidos basados en columnas con facilidad.

¿Cuáles son algunos de los casos de uso más comunes?

• Filtrado rápido en una sola columna.

• Múltiples condiciones de filtro por columna.

• Interfaz de usuario clara para usuarios no técnicos.

Este modo de filtrado es fácil de implementar y es útil en aplicaciones que requieren interfaces de filtrado simples pero interactivas.

¿Cómo habilitar el filtrado al estilo de Excel?

Set [allowFiltering] to true and [filterMode] to 'excelStyleFilter': 
<igx-grid [data]="data" 
          [allowFiltering]="true" 
          [filterMode]="'excelStyleFilter'"> 
  <igx-column field="id" header="ID"></igx-column> 
  <!-- Additional columns --> 
</igx-grid>

Operandos de filtrado personalizados

Los operandos integrados, como Contains o Equals, cubren escenarios comunes, pero cuando la aplicación requiere lógica específica del dominio, los operandos personalizados proporcionan la flexibilidad para ampliar el marco de filtrado.

¿Cuáles son algunos de los casos de uso más comunes?

• Aplique reglas de filtrado específicas del dominio.

• Implemente una lógica de coincidencia flexible.

• Admite formatos de datos estructurados o no estándar.

Ejemplo: Operando de coincidencia de expresiones regulares 

Este operando de filtrado personalizado permite a los usuarios aplicar expresiones regulares para el filtrado. Por ejemplo, la expresión regular ^\s*\S+\s+\S+\s+\S+\S+\s+\S+\s*$ filtra los nombres de productos que contienen exactamente cuatro palabras.

export class ExtendedStringFilteringOperand extends IgxStringFilteringOperand { 
  constructor() { 
    super(); 
    this.operations = [ 
      ...this.operations, // Keep default string operations 
      { 
        name: 'Regex Match', 
        iconName: 'search', 
        isUnary: false, 
        logic: (target: string, searchVal: string) => { 
          try { 
            const regex = new RegExp(searchVal); 
            return regex.test(target); 
          } catch (e) { 
            console.error('Invalid regex pattern:', e); 
            return false; 
          } 
        } 
      } 
    ]; 
  } 
}

Uso en Ignite UI for Angular cuadrícula

public extendedStringFilteringOperand = ExtendedStringFilteringOperand.instance(); 
<igx-column field="productName" 
            header="Product Name" 
            dataType="string" 
            [filters]="extendedStringFilteringOperand"> 
</igx-column>

Estrategias de filtrado personalizadas útiles para probar

El filtrado básico funciona bien para escenarios sencillos. Sin embargo, cuando la aplicación necesita limpiar la entrada, admitir lógica difusa o aplicar reglas diferentes por columna, una estrategia de filtrado personalizada ofrece la flexibilidad que necesita.

Con una estrategia implementada, usted controla exactamente cómo la cuadrícula evalúa cada valor con respecto a las condiciones del filtro.

¿Cuáles son algunos de los casos de uso más comunes?

• La entrada o los datos deben transformarse primero, como eliminar acentos, extraer números o simplificar texto.

• La coincidencia implica tokens, frases parciales o lógica difusa que van más allá de los simples operandos.

• Las diferentes columnas requieren comportamientos de filtrado únicos basados en el tipo de datos o la lógica empresarial.

Ejemplo: Estrategia de coincidencia de iniciales 

Esta estrategia filtra los datos transformando cada valor en sus iniciales (por ejemplo, "John Doe" → "jd") y comparándolos con la condición del filtro.

export class InitialsFilteringStrategy extends FilteringStrategy { 
  public override filter(data: [], expressionsTree: IFilteringExpressionsTree): any[] { 
    const result: any[] = []; 
    if (!expressionsTree || !expressionsTree.filteringOperands || 
        expressionsTree.filteringOperands.length === 0 || !data.length) { 
      return data; 
    } 
    data.forEach((rec: any) => { 
      if (this.matchRecord(rec, expressionsTree)) { 
        result.push(rec); 
      } 
    }); 
    return result; 
  } 
  public override findMatchByExpression(rec: any, expr: IFilteringExpression, isDate?: boolean, isTime?: boolean, grid?: GridType): boolean { 
    const initials = this.getFieldValue(rec, expr.fieldName, isDate, isTime, grid) 
          .split(/\s+/) 
          .map(word => word[0]?.toLowerCase()) 
          .join(''); 
    return expr.condition?.logic?.(initials, expr.searchVal, expr.ignoreCase) ?? false; 
  } 
}

Nota: Para crear una estrategia de filtrado personalizada, puede implementar la interfaz IFilteringStrategy o ampliar la clase base FilteringStrategy proporcionada por la biblioteca.

Filtrado avanzado

Para necesidades complejas de exploración de datos, IgxGrid ofrece una interfaz de usuario de filtrado avanzado. Esta característica permite a los usuarios crear consultas de varias condiciones en varias columnas mediante una interfaz de diálogo que admite expresiones lógicas anidadas (AND, OR).

¿Cuáles son algunos de los casos de uso más comunes?  

• Aplique condiciones de filtrado en varias columnas para aislar conjuntos de datos precisos.

• Ideal para aplicaciones en las que los usuarios no técnicos necesitan construir consultas complejas sin código.

• Maneje escenarios avanzados que requieren lógica AND / OR anidada para definir relaciones entre filtros.

• Admite sin problemas cadenas, números, fechas y tipos personalizados, lo que lo hace adecuado para diversos conjuntos de datos.

• Perfecto para interfaces de usuario con muchos datos donde el filtrado profundo y las interfaces fáciles de usar son esenciales.

Esta función admite cuadros de diálogo de filtrado internos y externos y se integra perfectamente con las API de cuadrícula, lo que la hace ideal para aplicaciones Angular avanzadas donde el filtrado no es solo una preocupación de la interfaz de usuario, sino una parte central de la estrategia de acceso a datos

¿Cómo habilitar el filtrado avanzado?

Hay dos opciones para comenzar con el filtrado avanzado.

Opción 1: Filtrado avanzado interno 

Habilite el filtrado avanzado directamente en la cuadrícula:

<igx-grid [data]="data" [allowAdvancedFiltering]="true"> 
  <igx-column field="id" header="ID"></igx-column> 
  <!-- Other columns --> 
</igx-grid>

Esto agrega una opción de "Filtrado avanzado" al menú de la interfaz de usuario de la cuadrícula.

Opción 2: Cuadro de diálogo de filtrado avanzado externo 

También puede controlar el cuadro de diálogo externamente mediante el componente igx-advanced-filtering-dialog:

<igx-advanced-filtering-dialog [grid]="grid1"></igx-advanced-filtering-dialog> 
<igx-grid #grid1 [data]="data"> 
  <igx-column field="id" header="ID"></igx-column> 
  <!-- Other columns --> 
</igx-grid>

Esta configuración le brinda más control sobre cuándo y cómo se muestra el cuadro de diálogo.

Creación mediante programación de expresiones de filtrado avanzadas

En muchas aplicaciones, el filtrado no siempre se desencadena por la entrada directa del usuario. Es posible que tenga que aplicar filtros dinámicamente en función de las vistas guardadas, los roles de usuario, la lógica empresarial o las entradas externas.

IgxGrid admite esto con una API flexible que le permite crear y aplicar reglas de filtrado mediante programación.

Core Concepts 

• FilteringExpression: Representa una sola condición (por ejemplo, status = 'Active')

• FilteringExpressionsTree: agrupa expresiones mediante operadores lógicos (AND, OR) para formar consultas complejas

Ejemplo: Creación de un árbol de filtros 

public applyFiltering(department: string): void { 
  const today = new Date(); 
  const threeYearsAgo = new Date(today.getFullYear() - 3, today.getMonth(), today.getDate()); 
  const departmentAvgSalary = this.calculateAverageSalaryPerDepartment(department); 
  // Department filter: Department === specified value 
  const deptExpr: IFilteringExpression = { 
    fieldName: 'Department', 
    searchVal: department, 
    condition: IgxStringFilteringOperand.instance().condition('equals'), 
  }; 
  // Tenure filter: HireDate before 3 years ago 
  const tenureExpr: IFilteringExpression = { 
    fieldName: 'HireDate', 
    searchVal: threeYearsAgo, 
    condition: IgxDateFilteringOperand.instance().condition('before'), 
  }; 
  // Salary filter: GrossSalary within ±5% of department average 
  const salaryMinExpr: IFilteringExpression = { 
    fieldName: 'GrossSalary', 
    searchVal: departmentAvgSalary * 0.95, 
    condition: IgxNumberFilteringOperand.instance().condition('greaterThanOrEqualTo'), 
  }; 
  const salaryMaxExpr: IFilteringExpression = { 
    fieldName: 'GrossSalary', 
    searchVal: departmentAvgSalary * 1.05, 
    condition: IgxNumberFilteringOperand.instance().condition('lessThanOrEqualTo'), 
  }; 
  // Combine salary range conditions with OR 
  const salaryExprTree = new FilteringExpressionsTree(FilteringLogic.Or); 
  salaryExprTree.filteringOperands.push(salaryMinExpr, salaryMaxExpr); 
  // Build main AND tree with all filters 
  const mainExprTree = new FilteringExpressionsTree(FilteringLogic.And); 
  mainExprTree.filteringOperands.push(deptExpr, tenureExpr, salaryExprTree); 
  // Apply filters to the grid 
  this.treeGrid.advancedFilteringExpressionsTree = mainExprTree; 
}

Este ejemplo demuestra cómo crear filtros programáticamente para mostrar a los empleados del departamento de 'Tecnología', contratados hace al menos 3 años, cuyos salarios brutos están dentro del ±5% del promedio de su departamento.

¿Cuáles son algunos de los beneficios?

• Control total sobre el comportamiento de filtrado.

• Integre fácilmente con la configuración del usuario o los filtros guardados.

• Compatible con la interfaz de usuario de filtrado avanzado (los filtros aplicados mediante programación se pueden editar a través de la interfaz de usuario).

Este enfoque es ideal cuando los filtros deben aplicarse automáticamente en función del contexto, o mostrar datos específicos del departamento a ciertos usuarios, o filtrar previamente en función de una selección de panel.

Filtrado remoto

Cuando se trabaja con grandes conjuntos de datos, es posible que el filtrado del lado cliente no sea eficiente o escalable. En tales casos, IgxGrid admite el filtrado remoto, donde las expresiones de filtro se construyen en el cliente y se envían al servidor para su procesamiento.

Este enfoque es ideal para cuadrículas virtualizadas, API paginadas o escenarios en los que los sistemas back-end realizan el trabajo pesado.

¿Cuáles son algunos de los casos de uso más comunes?

• Cuadrículas virtualizadas con paginación del lado del servidor.

• Paneles que requieren consultar grandes conjuntos de datos.

• Garantizar que los filtros se apliquen en el lado del servidor para la seguridad o la privacidad de los datos.

¿Cómo funciona?

1. Los usuarios interactúan con la interfaz de usuario de filtrado de IgxGrid.

2. La cuadrícula crea un FilteringExpressionsTree que representa los filtros activos.

3. Este árbol de filtros se serializa y se incluye en las solicitudes de API.

4. El servidor procesa los filtros y devuelve los datos coincidentes.

Ejemplo: Generar consulta de filtro para la API 

private buildFilterQuery(): string { 
  const expressionsTree = this.grid.filteringExpressionsTree; 
  if (!expressionsTree || expressionsTree.filteringOperands.length === 0) { 
    return ''; 
  } 
  const filterParts: string[] = []; 
  expressionsTree.filteringOperands.forEach((expr: IFilteringExpression) => { 
    const field = expr.fieldName; 
    const condition = expr.condition.name; 
    const value = encodeURIComponent(expr.searchVal); 
    filterParts.push(`${field} ${condition} ${value}`); 
  }); 
  return filterParts.join(' or '); 
} 
private buildDataUrl(): string { 
  const filterQuery = this.buildFilterQuery(); 
  const baseUrl = 'https://myapi.example.com/employees'; 
  return filterQuery ? `${baseUrl}?$filter=${filterQuery}` : baseUrl; 
}

Uso

const apiUrl = this.buildDataUrl(); 
this.http.get(apiUrl).subscribe((data) => { 
  this.grid.data = data; 
}); 

//Generated URL example 
https://services.odata.org/V4/Northwind/Northwind.svc/Products?$filter=UnitPrice gt 50 and UnitsInStock gt 10

Consejo útil para la integración de backend

Asegúrese de que el servidor pueda interpretar y aplicar la lógica de filtro. Dependiendo de su tecnología de back-end, podría:

• Asigne operadores (por ejemplo, contains, equals) a equivalentes de SQL o NoSQL.

• Analice los grupos AND/OR anidados desde el árbol FilteringExpressionsTree.

• Aplicar filtrado con reconocimiento de tipos (por ejemplo, cadenas, números, fechas).

Envolver

Para aprovechar al máximo las capacidades de filtrado de IgxGrid, explore la documentación de Ignite UI for Angular, consulte nuestros ejemplos de cuadrícula para ver las características de filtrado en acción y no dude en experimentar con la combinación de filtrado formateado y operandos personalizados para una experiencia de usuario altamente personalizada.

Con estas herramientas, puede crear experiencias de datos de nivel empresarial que permitan a los usuarios explorar, analizar y actuar sobre sus datos de manera más eficiente y con mayor conocimiento.