Filtrado de Excel en cuadrícula Angular

El filtrado de cuadrícula de Excel proporciona una interfaz de usuario de filtrado similar a Excel para cualquier tabla Angular como Grid.

Angular Grid Excel Style Filtering Example

Usage

Para activar el filtrado de cuadrícula de Excel, se deben configurar dos entradas. allowFiltering debe establecerse en true y filterMode debe establecerse en excelStyleFilter.

<igx-grid [data]="data" [autoGenerate]="true" [allowFiltering]="true" [filterMode]="'excelStyleFilter'">
</igx-grid>

Interacciones

Para abrir el menú de filtro para una columna en particular, se debe hacer clic en el icono de filtro Angular 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 Add current selection to filter.

Si desea borrar el filtro, puede marcar la opción Select All 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.

Configure Menu Features

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.

<igx-grid #grid1 [data]="data" [autoGenerate]="false" height="650px" width="100%" [moving]="true" [allowFiltering]="true" [filterMode]="'excelStyleFilter'">
    <igx-column field="ProductName" header="Product Name" [sortable]="true" [dataType]="'string'">
    </igx-column>
    <igx-column field="QuantityPerUnit" header="Quantity Per Unit" [sortable]="false" [disablePinning]="true" [disableHiding]="true" [dataType]="'string'">
    </igx-column>
    <igx-column field="UnitPrice" header="Unit Price" [disablePinning]="true" [disableHiding]="true" [sortable]="true" [dataType]="'number'">
    </igx-column>
    <igx-column field="OrderDate" header="Order Date" [sortable]="false"  [dataType]="'date'" [formatter]="formatDate">
    </igx-column>
    <igx-column field="Discontinued" header="Discontinued" [sortable]="true" [dataType]="'boolean'">
    </igx-column>
</igx-grid>

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 sin deshabilitar las funciones de las columnas, puede utilizar plantillas personalizadas. El menú de filtro Estilo de Excel proporciona dos directivas para crear plantillas:

• IgxExcelStyleColumnOperationsTemplateDirective: vuelve a crear la plantilla del área con todas las operaciones de columna como ordenar, fijar, etc.
• IgxExcelStyleFilterOperationsTemplateDirective: vuelve a crear la plantilla del área con todas las operaciones específicas del filtro.

Podrías volver a crear la plantilla solo en una de esas áreas o en ambas. Puede incluir cualquier contenido personalizado dentro de esas directivas o puede utilizar cualquiera de nuestros componentes de filtrado integrados al estilo de Excel.

El siguiente código demuestra cómo definir un menú de filtro de estilo de Excel personalizado utilizando los componentes igx-excel-style-header, igx-excel-style-sorting y igx-excel-style-search.

<igx-grid #grid1 [data]="data" [autoGenerate]="false" height="650px" width="100%" [allowFiltering]="true" [filterMode]="'excelStyleFilter'">

    <igx-grid-excel-style-filtering [minHeight]="'380px'" [maxHeight]="'500px'">
        <igx-excel-style-column-operations>
            <igx-excel-style-header
                [showPinning]="true"
                [showHiding]="true"
            >
            </igx-excel-style-header>

            <igx-excel-style-sorting></igx-excel-style-sorting>
        </igx-excel-style-column-operations>

        <igx-excel-style-filter-operations>
            <igx-excel-style-search></igx-excel-style-search>
        </igx-excel-style-filter-operations>
    </igx-grid-excel-style-filtering>
    
    ...
</igx-grid>

También puede volver a crear la plantilla del ícono de filtrado de estilo de Excel en el encabezado de la columna usando la directiva igxExcelStyleHeaderIcon:

<igx-grid ...>
    <ng-template igxExcelStyleHeaderIcon>
        <igx-icon>filter_alt</igx-icon>
    </ng-template>
</igx-grid>

Aquí está la lista completa de componentes de filtrado de estilo Excel que puede utilizar:

• igx-excel-style-header
• igx-excel-style-sorting
• igx-excel-style-moving
• igx-excel-style-pinning
• igx-excel-style-hiding
• igx-excel-style-selecting
• igx-excel-style-clear-filters
• igx-excel-style-conditional-filter
• igx-excel-style-search

Unique Column Values Strategy

Los elementos de la lista dentro del cuadro de diálogo Filtrado de estilos de Excel representan los valores únicos para la columna respectiva. Estos valores se pueden proporcionar manualmente y cargar según demanda, como se demuestra en el tema Grid Remote Data Operations.

Formatted Values Filtering Strategy

De forma predeterminada, el componente Cuadrícula filtra los datos según los valores de celda originales; sin embargo, en algunos casos es posible que desee filtrar los datos según los valores formateados. Para hacer eso, puede usar FormattedValuesFilteringStrategy. El siguiente ejemplo demuestra cómo formatear los valores numéricos de una columna como cadenas y filtrar la cuadrícula según los valores de las cadenas:

Note

La estrategia de filtrado de valores formateados no funcionará correctamente si tiene más de una columna vinculada al mismo campo de sus datos y una de las columnas tiene un formateador.

External Excel Style filtering

Como puede ver en las demostraciones anteriores, la apariencia predeterminada del cuadro de diálogo de filtrado de Estilo de Excel está dentro de la Cuadrícula. Por lo tanto, este cuadro de diálogo solo es visible al configurar los filtros. Hay una manera de hacer que ese cuadro de diálogo permanezca siempre visible: puede usarse fuera de la cuadrícula como un componente independiente. En la demostración siguiente, el filtrado de estilo de Excel se declara por separado de la cuadrícula.

Demo

Usage

Para configurar el componente de filtrado de estilo de Excel, debe establecer su propiedad column en una de las columnas de la cuadrícula. En el ejemplo anterior, hemos vinculado la propiedad column al valor de un IgxSelectComponent que muestra las columnas de Grid.

<igx-select #gridColums value="ProductID">
   <label igxLabel>Columns:</label>
   <igx-select-item *ngFor="let c of grid1.columns" [value]="c.field">
       {{ c.field }}
   </igx-select-item>
</igx-select>

<igx-grid-excel-style-filtering [column]="grid1.getColumnByName(gridColums.value)">
</igx-grid-excel-style-filtering>

External Outlet

El z-index de Grid crea un contexto de apilamiento separado para cada cuadrícula en el DOM. Esto garantiza que todos los elementos descendientes de la cuadrícula se representen según lo previsto, sin superponerse entre sí. Sin embargo, los elementos que salen de la cuadrícula (por ejemplo, el filtro de estilo de Excel) entrarán en conflicto con elementos externos con el mismo z-index (por ejemplo, tener dos cuadrículas una debajo de la otra), lo que dará como resultado una representación falsa. La solución para este problema es establecer la propiedad outlet en una directiva de salida externa que permita que los elementos superpuestos aparezcan siempre en la parte superior.

Demo

Estilismo

Para comenzar a diseñar el cuadro de diálogo Filtrado de estilos de Excel, necesitamos importar el archivo index, donde se encuentran todas las funciones del tema y los mixins de componentes:

@use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

El cuadro de diálogo de filtrado de estilo de Excel toma su color de fondo del tema de la cuadrícula, utilizando el parámetro filtering-row-background. Para cambiar el fondo necesitamos crear un tema personalizado:

$custom-grid: grid-theme(
    $filtering-row-background: #FFCD0F
);

Obviamente tenemos muchos más componentes dentro del cuadro de diálogo de filtrado de Excel, como botones, casillas de verificación, una lista e incluso un menú desplegable. Para poder diseñarlos, necesitamos crear un tema separado para cada uno:

$dark-button: button-theme(
    $background: #FFCD0F,
    $foreground: #292826,
    $hover-background: #292826,
    $hover-foreground: #FFCD0F
);

$dark-input-group: input-group-theme(
    $box-background: #FFCD0F,
    $idle-text-color: #292826,
    $focused-text-color: #292826,
    $filled-text-color: #292826
);

$custom-list: list-theme(
    $background: #FFCD0F
);

$custom-checkbox: checkbox-theme(
    $empty-color: #292826,
    $fill-color: #292826,
    $tick-color: #FFCD0F,
    $label-color: #292826
);

$custom-drop-down: drop-down-theme(
    $background-color: #FFCD0F,
    $item-text-color: #292826,
    $hover-item-background: #292826,
    $hover-item-text-color: #FFCD0F
);

En este ejemplo solo cambiamos algunos de los parámetros para los componentes enumerados, pero los button-theme, checkbox-theme, drop-down-theme, input-group-theme y list-theme proporcionan muchos más parámetros para controlar su estilo respectivo. .

El último paso es incluir los mixins de componentes, cada uno con su respectiva temática. También estableceremos la propiedad de color para el marcador de posición de la entrada.

@include drop-down($custom-drop-down);
@include grid($custom-grid);
.igx-excel-filter, .igx-excel-filter__secondary {
    @include button($dark-button);
    @include input-group($dark-input-group);
    @include list($custom-list);
    @include checkbox($custom-checkbox);
    .igx-input-group__input::placeholder {
        color: #FFCD0F;
    }
}

Note

Analizamos la mayoría de los mixins de componentes dentro de.igx-excel-filter y.igx-excel-filter__secondary, de modo que estos temas personalizados afectarán solo a los componentes anidados en el cuadro de diálogo de filtrado de estilo de Excel y todos sus subdiálogos. De lo contrario, otros botones, casillas de verificación, grupos de entrada y listas también se verían afectados.

Note

Si el componente utiliza una ViewEncapsulation Emulated, es necesario penetrate esta encapsulación usando::ng-deep:

:host {
    ::ng-deep {
        @include drop-down($custom-drop-down);
        @include grid($custom-grid);
        .igx-excel-filter, .igx-excel-filter__secondary {
            @include button($dark-button);
            @include input-group($dark-input-group);
            @include list($custom-list);
            @include checkbox($custom-checkbox);
            .igx-input-group__input::placeholder {
                color: #FFCD0F;
            }
        }
    }
}

Defining a color palette

En lugar de codificar los valores de color como acabamos de hacer, podemos lograr una mayor flexibilidad en términos de colores utilizando las funciones igx-palette e igx-color.

igx-palette genera una paleta de colores basada en los colores primarios y secundarios que se pasan:

$yellow-color: #FFCD0F;
$black-color: #292826;

$dark-palette: palette($primary: $black-color, $secondary: $yellow-color);

Y luego con igx-color podemos recuperar fácilmente el color de la paleta.

$custom-grid: grid-theme(
    $filtering-row-background: #FFCD0F
);

$dark-button: button-theme(
    $background: color($dark-palette, "secondary", 400),
    $foreground: color($dark-palette, "primary", 400),
    $hover-background: color($dark-palette, "primary", 400),
    $hover-foreground: color($dark-palette, "secondary", 400)
);

$dark-input-group: input-group-theme(
    $box-background: color($dark-palette, "secondary", 400),
    $idle-text-color: color($dark-palette, "primary", 400),
    $focused-text-color: color($dark-palette, "primary", 400),
    $filled-text-color: color($dark-palette, "primary", 400)
);

$custom-list: list-theme(
    $background: color($dark-palette, "secondary", 400)
);

$custom-checkbox: checkbox-theme(
    $empty-color: color($dark-palette, "primary", 400),
    $fill-color: color($dark-palette, "primary", 400),
    $tick-color: color($dark-palette, "secondary", 400),
    $label-color: color($dark-palette, "primary", 400)
);

$custom-drop-down:drop-down-theme(
    $background-color: color($dark-palette, "secondary", 400),
    $item-text-color: color($dark-palette, "primary", 400),
    $hover-item-background: color($dark-palette, "primary", 400),
    $hover-item-text-color: color($dark-palette, "secondary", 400)
);

Note

​igx-color e igx-palette son funciones potentes para generar y recuperar colores. Consulte el tema Palettes para obtener orientación detallada sobre cómo utilizarlas.

Using Schemas

Yendo más allá con el motor de temas, puede crear una estructura sólida y flexible que se beneficie de los esquemas. Un esquema es una receta de un tema.

Amplíe uno de los dos esquemas predefinidos, que se proporcionan para cada componente, en este caso: light-grid, light-input-group, light-button, light-list, light-checkbox y light-drop-down:

$custom-grid-schema: extend($_light-grid,
    (
        filtering-row-background:(
           color: ("secondary", 400)
        )
    )
);

$custom-button-schema: extend($_light-button,
    (
        flat-background:(
           color: ("secondary", 400)
        ),
        flat-text-color:(
           color: ("primary", 400)
        ),
        flat-hover-background:(
           color: ("primary", 400)
        ),
        flat-hover-text-color:(
           color: ("secondary", 400)
        ),

        contained-background:(
           color: ("secondary", 400)
        ),
        contained-text-color:(
           color: ("primary", 400)
        ),
        contained-hover-background:(
           color: ("primary", 400)
        ),
        contained-hover-text-color:(
           color: ("secondary", 400)
        )
    )
);

$custom-input-group-schema: extend($_light-input-group,
    (
        box-background:(
           color: ("secondary", 400)
        ),
        idle-text-color:(
           color: ("primary", 400)
        ),
        focused-text-color:(
           color: ("primary", 400)
        ),
        filled-text-color:(
           color: ("primary", 400)
        )
    )
);

$custom-list-schema: extend($_light-list,
    (
        background:(
           color: ("secondary", 400)
        )
    )
);

$custom-checkbox-schema: extend($_light-checkbox,
    (
        empty-color:(
           color: ("primary", 400)
        ),
        fill-color:(
           color: ("primary", 400)
        ),
        tick-color:(
           color: ("secondary", 400)
        ),
        label-color:(
           color: ("primary", 400)
        )
    )
);

$custom-drop-down-schema: extend($_light-drop-down,
    (
        background-color:(
           color: ("secondary", 400)
        ),
        item-text-color:(
           color: ("primary", 400)
        ),
        hover-item-background:(
           color: ("primary", 400)
        ),
        hover-item-text-color:(
           color: ("secondary", 400)
        )
    )
);

Para aplicar nuestros esquemas personalizados, tenemos que extender uno de los globales (light u dark), que básicamente señala los componentes con un esquema personalizado, y luego agregarlo a los respectivos temas de los componentes:

$custom-light-schema: extend($light-schema,(
   grid: $custom-grid-schema,
   button: $custom-button-schema,
   input-group: $custom-input-group-schema,
   list: $custom-list-schema,
   checkbox: $custom-checkbox-schema,
   drop-down: $custom-drop-down-schema
));

$custom-grid: grid-theme(
    $palette: $dark-palette,
    $schema: $custom-light-schema
);

$custom-button: button-theme(
    $palette: $dark-palette,
    $schema: $custom-light-schema
);

$custom-input-group: input-group-theme(
    $palette: $dark-palette,
    $schema: $custom-light-schema
);

$custom-list: list-theme(
    $palette: $dark-palette,
    $schema: $custom-light-schema
);

$custom-checkbox: checkbox-theme(
    $palette: $dark-palette,
    $schema: $custom-light-schema
);

$custom-drop-down: drop-down-theme(
    $palette: $dark-palette,
    $schema: $custom-light-schema
);

No olvide incluir los temas de la misma manera que se demostró anteriormente.

Demo

Note

La muestra no se verá afectada por el tema global seleccionado en Change Theme.

API References

• ComponenteColumnaIgx
• API de componentes IgxGrid
• Estilos de componentes IgxGrid

Additional Resources

• Descripción general de la cuadrícula
• Virtualización y rendimiento
• Paginación
• Clasificación
• resúmenes
• Columna en movimiento
• Fijación de columnas
• Cambio de tamaño de columna
• Selección

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

• Ignite UI for Angular foros angulares
• Ignite UI for Angular GitHub