Filtrado de Excel en Angular cuadrícula

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

Angular Grid Excel Style Filtering Example

Usage

To turn on the grid excel filtering, two inputs should be set. The allowFiltering should be set to true and the filterMode should be set to excelStyleFilter.

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

Interacciones

In order to open the filter menu for a particular column, the Angular filter icon in the header should be clicked. Additionally, you can use the Ctrl + Shift + L combination on a selected header. If the column can be sorted, pinned, moved, selected or hidden along with the filtering functionality, there will be buttons available for the features that are turned on.

If no filter is applied, all the items in the list will be selected. They can be filtered from the input above the list. In order to filter the data, you can select/deselect the items in the list and either click the Apply button, or press Enter. The filtering applied through the list items creates filter expressions with equals operator and the logic operator between the expressions is OR.

If you type something in the search box and apply the filter, only the items that match the search criteria will be selected. If you want to add items to the currently filtered ones, however, you should select the option Add current selection to filter.

If you want to clear the filter, you can check the Select All option and then click the Apply button.

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 ordenación, fijación y ocultación pueden eliminarse del menú de filtros usando 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 ejemplo de abajo, las columnas Nombre del producto y Descontinuado tienen activadas las cuatro funciones, Cantidad por unidad tiene las tres deshabilitadas, el precio unitario solo tiene ordenación y la fecha de pedido solo tiene fijación y ocultación, y todas lo sonselectable.

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 - re-templates the area with all column operations like sorting, pinning, etc.
• IgxExcelStyleFilterOperationsTemplateDirective - re-templates the area with all filter specific operations.

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.

The following code demonstrates how to define a custom Excel style filter menu using the igx-excel-style-header, igx-excel-style-sorting and igx-excel-style-search components.

<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>

You could also re-template the Excel style filtering icon in the column header using the igxExcelStyleHeaderIcon directive:

<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

The list items inside the Excel Style Filtering dialog represent the unique values for the respective column. These values can be provided manually and loaded on demand, which is demonstrated in the Grid Remote Data Operations topic.

Formatted Values Filtering Strategy

By default, the Grid component filters the data based on the original cell values, however in some cases you may want to filter the data based on the formatted values. In order to do that you can use the FormattedValuesFilteringStrategy. The following sample demonstrates how to format the numeric values of a column as strings and filter the Grid based on the string values:

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

In order to configure the Excel style filtering component, you should set its column property to one of the Grid's columns. In the sample above, we have bound the column property to the value of an IgxSelectComponent that displays the Grid's columns.

<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

The Grid's z-index creates separate stacking context for each grid in the DOM. This ensures that all descendant elements of the grid will render as intended, without overlapping one another. However, elements that go outside of the grid (e.g. Excel Style filter) will conflict with outside elements with the same z-index (e.g. having two grids one under another) resulting in false rendering. The solution for this issue is to set the outlet property to an external outlet directive which allows the overlay elements to always appear on top.

Demo

Estilismo

To get started with styling the Excel Style Filtering dialog, we need to import the index file, where all the theme functions and component mixins live:

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

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

The Excel Style Filtering dialog takes its background color from the grid's theme, using the filtering-row-background parameter. Additionally, there are specific Excel Style Filtering parameters available for customizing the text color of elements within the dialog. To change the overall style of the dialog, you need to create a custom theme.

$custom-grid: grid-theme(
  $filtering-row-background: #ffcd0f,
  $excel-filtering-header-foreground: #292826,
  $excel-filtering-subheader-foreground: #292826,
  $excel-filtering-actions-foreground: #006400,
  $excel-filtering-actions-hover-foreground: #ffcd0f,
  $excel-filtering-actions-disabled-foreground: #9e9e9e
);

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:

$custom-button: button-theme(
  $background: #ffcd0f,
  $foreground: #292826,
  $hover-background: #292826,
  $hover-foreground: #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
);

$custom-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
);

Note

En lugar de codificar los valores de color como acabamos de hacer, podemos lograr mayor flexibilidad en cuanto a colores usando laspalette funciones ycolor. Por favor, consulta elPalettes tema para obtener una guía detallada sobre cómo utilizarlos.

In this example we only changed some of the parameters for the listed components, but the button-theme, checkbox-theme, drop-down-theme, input-group-theme, list-theme themes provide way more parameters to control their respective styling.

El último paso es incluir el tema personalizado de cada componente. También estableceremos la propiedad de color para el marcador de posición de la entrada.

@include css-vars($custom-grid);
@include css-vars($custom-drop-down);

.igx-excel-filter, 
.igx-excel-filter__secondary {
  @include css-vars($custom-button);
  @include css-vars($custom-checkbox);
  @include css-vars($custom-input-group);
  @include css-vars($custom-list);

  .igx-input-group__input::placeholder {
    color: #ffcd0f;
  }
}

Note

We scope most of the components' mixins within .igx-excel-filter and .igx-excel-filter__secondary, so that these custom themes will affect only components nested in the excel style filtering dialog and all of its sub-dialogs. Otherwise other buttons, checkboxes, input-groups and lists would be affected too.

Note

If the component is using an Emulated ViewEncapsulation, it is necessary to penetrate this encapsulation using ::ng-deep:

:host {
  ::ng-deep {
    @include css-vars($custom-grid);
    @include css-vars($custom-drop-down);


    .igx-excel-filter,
    .igx-excel-filter__secondary {
      @include css-vars($custom-button);
      @include css-vars($custom-checkbox);
      @include css-vars($custom-input-group);
      @include css-vars($custom-list);
      
      .igx-input-group__input::placeholder {
        color: #ffcd0f;
      }
    }
  }
}

Demo

Note

La muestra no se verá afectada por el tema global seleccionado deChange 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
• Ignite UI for Angular GitHub