Excel Filtering in React Grid

React Grid expone una función de filtrado estilo Excel que proporciona una interfaz de usuario de filtrado similar a Excel. Simplifica el proceso de trabajar con grandes conjuntos de datos. La idea principal es ayudarlos a filtrar los datos más relevantes y eliminar las entradas irrelevantes.

React Grid Excel Style Filtering Example

Usage

Para activar el filtrado estilo Excel del componente IgrGrid, se deben configurar dos entradas. allowFiltering debe establecerse en verdadero y filterMode debe establecerse en el valor ExcelStyleFilter.

<IgrGrid data={nwindData} autoGenerate="true" allowFiltering="true" filterMode={FilterMode.ExcelStyleFilter}>
</IgrGrid>

Interacciones

Para abrir el menú de filtro para una columna en particular, se debe hacer clic en el icono de filtro React en el encabezado. Además, puede utilizar la combinación Ctrl + Shift + L en un encabezado seleccionado. Si la columna se puede ordenar, fijar, mover, seleccionar u ocultar junto con la función de filtrado, habrá botones disponibles para las funciones que estén activadas.

Si no se aplica ningún filtro, se seleccionarán todos los elementos de la lista. Se pueden filtrar desde la entrada que se encuentra encima de la lista. Para filtrar los datos, puede seleccionar/deseleccionar los elementos de la lista y hacer clic en el botón Aplicar o presionar Enter. El filtrado aplicado a través de los elementos de la lista crea expresiones de filtro con operador equals y el operador lógico entre las expresiones es OR.

Si escribe algo en el cuadro de búsqueda y aplica el filtro, solo se seleccionarán los elementos que coincidan con los criterios de búsqueda. Sin embargo, si desea agregar elementos a los actualmente filtrados, debe seleccionar la opción Agregar selección actual para filtrar.

Si desea borrar el filtro, puede marcar la opción Seleccionar todo y luego hacer clic en el botón Aplicar.

Para aplicar un filtro con diferentes expresiones, puede hacer clic en el filtro Texto, que abrirá un submenú con todos los operadores de filtro disponibles para la columna en particular. Al seleccionar uno de ellos, se abrirá el cuadro de diálogo de filtro personalizado, donde puede agregar tantas expresiones como desee con diferentes operadores lógicos y de filtro. También hay un botón de borrar, que puede borrar el filtro.

Las funciones de clasificación, fijación y ocultación se pueden eliminar del menú de filtro utilizando las entradas correspondientes: sortable, selected, disablePinning, disableHiding.

<IgrGrid data={nwindData} autoGenerate="false" allowFiltering="true" filterMode={FilterMode.ExcelStyleFilter}>
    <IgrColumn field="ProductName" header="Product Name" sortable="true" dataType="String">
    </IgrColumn>
    <IgrColumn field="QuantityPerUnit" header="Quantity Per Unit" sortable="false" disable-pinning="true" disable-hiding="true" data-type="String">
    </IgrColumn>
    <IgrColumn field="UnitPrice" header="Unit Price" disable-pinning="true" disable-hiding="true" sortable="true" data-type="Number">
    </IgrColumn>
    <IgrColumn field="OrderDate" header="Order Date" sortable="false"  data-type="Date">
    </IgrColumn>
    <IgrColumn field="Discontinued" header="Discontinued" sortable="true" data-type="Boolean">
    </IgrColumn>      
</IgrGrid>

En el siguiente ejemplo, las columnas Nombre del producto y Discontinuado tienen las cuatro funciones habilitadas, Cantidad por unidad tiene las tres deshabilitadas, Precio unitario solo tiene clasificación y Fecha del pedido solo tiene fijación y ocultación y todas son selectable.

Plantillas

Si desea personalizar aún más el menú de filtro de estilo de Excel, puede usar la propiedad excelStyleHeaderIconTemplate para definir una plantilla personalizada para el icono de encabezado del menú.

El siguiente código demuestra cómo personalizar el menú de filtro de estilo de Excel utilizando excelStyleHeaderIconTemplate:

const webGridFilterAltIconTemplate = ({dataContext: IgrCellTemplateContext}) => {
  return (
    <img 
      height="15px" 
      width="15px" 
      src="http://static.infragistics.com/xplatform/images/grid/propeller-logo.svg" 
      title="Continued" 
      alt="Continued" 
    />
  );
}

<IgrGrid autoGenerate="true" allowFiltering="true" filterMode="excelStyleFilter" 
    excelStyleHeaderIconTemplate={webGridFilterAltIconTemplate}>
</IgrGrid>

Styling

Además de los temas predefinidos, la cuadrícula se puede personalizar aún más configurando algunas de las propiedades CSS disponibles. En caso de que desee cambiar algunos de los colores, primero debe establecer una clase para la cuadrícula:

<IgrGrid className="grid"></IgrGrid>

Luego establezca las propiedades CSS relacionadas con esta clase:

.grid {
    --ig-grid-filtering-row-background: #ffcd0f;
    --ig-list-item-background: #ffcd0f;
}

Demo

API References

Additional Resources

Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.