Filtragem do Excel em Angular Grid

A filtragem do Excel em grade fornece uma interface do usuário de filtragem semelhante ao Excel para qualquer tabela Angular, como a Grid.

Angular Grid Excel Style Filtering Example

Usage

Para ativar a filtragem do Excel da grade, duas entradas devem ser definidas. O allowFiltering deve ser definido como true e o filterMode deve ser definido como excelStyleFilter.

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

Interações

Para abrir o menu de filtro de uma coluna específica, o ícone de filtro Angular no cabeçalho deve ser clicado. Além disso, você pode usar a Ctrl + Shift + L combinação em um cabeçalho selecionado. Se a coluna puder ser classificada, fixada, movida, selecionada ou ocultada junto com a funcionalidade de filtragem, haverá botões disponíveis para os recursos que estão ativados.

Se nenhum filtro for aplicado, todos os itens da lista serão selecionados. Eles podem ser filtrados da entrada acima da lista. Para filtrar os dados, você pode marcar/desmarcar os itens na lista e clicar no botão Aplicar ou pressionar Enter. A filtragem aplicada por meio dos itens de lista cria expressões de filtro com equals operator e o operador lógico entre as expressões é OR.

Se você digitar algo na caixa de pesquisa e aplicar o filtro, somente os itens que corresponderem aos critérios de pesquisa serão selecionados. Se você deseja adicionar itens aos atualmente filtrados, no entanto, você deve selecionar a opção Add current selection to filter.

Se você deseja limpar o filtro, pode marcar a Select All opção e clicar no botão Aplicar.

Para aplicar um filtro com diferentes expressões, você pode clicar no filtro Text, que abrirá um submenu com todos os operadores de filtro disponíveis para a coluna específica. Selecionar um deles abrirá a caixa de diálogo de filtro personalizado, onde você pode adicionar quantas expressões quiser com diferentes filtros e operadores lógicos. Há também um botão clear, que pode limpar o filtro.

Configure Menu Features

Os recursos de classificação, fixação e ocultação podem ser removidos do menu de filtro usando as entradas correspondentes: 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>

No exemplo abaixo, as colunas Nome do Produto e Descontinuado têm todos os quatro recursos ativados, Quantidade por unidade tem todos os três desativados, Preço unitário tem apenas classificação e Data do pedido tem apenas fixação e ocultação e todos são selectable.

Modelos

Se você quiser personalizar ainda mais o menu de filtro de estilo do Excel sem desabilitar os recursos de coluna, poderá usar modelos personalizados. O menu de filtro Estilo do Excel fornece duas diretivas para modelagem:

• IgxExcelStyleColumnOperationsTemplateDirective- Remodela a área com todas as operações de coluna, como classificação, fixação, etc.
• IgxExcelStyleFilterOperationsTemplateDirective- Remodela a área com todas as operações específicas do filtro.

Você pode re-template apenas uma dessas áreas ou ambas. Você pode colocar qualquer conteúdo personalizado dentro dessas diretivas ou pode usar qualquer um de nossos componentes internos de filtragem de estilo do Excel.

O código a seguir demonstra como definir um menu de filtro de estilo personalizado do Excel usando os igx-excel-style-header componentes , igx-excel-style-sorting and 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>

Você também pode reformular o ícone de filtragem de estilo do Excel no cabeçalho da coluna usando a igxExcelStyleHeaderIcon diretiva:

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

Aqui está a lista completa de componentes de filtragem de estilo do Excel que você pode usar:

• 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

Os itens de lista dentro da caixa de diálogo Filtragem de Estilo do Excel representam os valores exclusivos para a respectiva coluna. Esses valores podem ser fornecidos manualmente e carregados sob demanda, o que é demonstrado no Grid Remote Data Operations tópico.

Formatted Values Filtering Strategy

Por padrão, o componente Grade filtra os dados com base nos valores da célula original, no entanto, em alguns casos, você pode filtrar os dados com base nos valores formatados. Para fazer isso, você pode usar o FormattedValuesFilteringStrategy. O exemplo a seguir demonstra como formatar os valores numéricos de uma coluna como cadeias de caracteres e filtrar o Grid com base nos valores de cadeia de caracteres:

Note

A estratégia de filtragem de valores formatados não funcionará corretamente se você tiver mais de uma coluna associada ao mesmo campo de seus dados e uma das colunas tiver um formatador.

External Excel Style filtering

Como você pode ver nas demonstrações acima, a aparência padrão da caixa de diálogo de filtragem de estilo do Excel está dentro da grade. Portanto, essa caixa de diálogo só é visível ao configurar os filtros. Existe uma maneira de fazer com que essa caixa de diálogo permaneça sempre visível - ela pode ser usada fora da grade como um componente independente. Na demonstração abaixo, a filtragem de estilo do Excel é declarada separadamente da Grade.

Demo

Usage

Para configurar o componente de filtragem de estilo do Excel, você deve definir sua column propriedade como uma das colunas da Grade. No exemplo acima, associamos a column propriedade ao valor de um IgxSelectComponent que exibe as colunas do 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

O Grid z-index cria um contexto de empilhamento separado para cada grade no DOM. Isso garante que todos os elementos descendentes da grade sejam renderizados conforme o esperado, sem se sobreporem uns aos outros. No entanto, os elementos que saem da grade (por exemplo, filtro de estilo do Excel) entrarão em conflito com elementos externos com o mesmo z-index (por exemplo, ter duas grades uma sob a outra), resultando em renderização falsa. A solução para esse problema é definir a outlet propriedade como uma diretiva de saída externa que permite que os elementos de sobreposição sempre apareçam na parte superior.

Demo

Estilização

Para começar a estilizar a caixa de diálogo Filtragem de estilo do Excel, precisamos importar o index arquivo, onde todas as funções do tema e combinações de componentes residem:

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

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

A caixa de diálogo de filtragem de estilo do Excel obtém sua cor de fundo do tema da grade, usando o filtering-row-background parâmetro. Para alterar o plano de fundo, precisamos criar um tema personalizado:

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

Obviamente, temos muito mais componentes dentro do Excel, como caixa de diálogo de filtragem, como botões, caixas de seleção, uma lista e até mesmo um menu suspenso. Para estilizá-los, precisamos criar um tema separado para cada um:

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

Note

Em vez de codificar os valores de cor como acabamos de fazer, podemos obter maior flexibilidade em termos de cores usando as palette funções e color. Consulte o Palettes tópico para obter orientações detalhadas sobre como usá-los.

Neste exemplo, alteramos apenas alguns dos parâmetros para os componentes listados, mas os button-theme temas checkbox-theme​ ​drop-down-theme​ ​input-group-theme​ ​list-theme fornecem muito mais parâmetros para controlar seus respectivos estilos.

O último passo é incluir os mixins de componentes, cada um com seu respectivo tema. Também definiremos a propriedade color para o espaço reservado da entrada.

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

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

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

Note

Analisamos a maioria dos mixins dos componentes dentro.igx-excel-filter e.igx-excel-filter__secondary, para que esses temas personalizados afetem apenas os componentes aninhados na caixa de diálogo de filtragem de estilo do Excel e em todas as suas subcaixas de diálogo. Caso contrário, outros botões, caixas de seleção, grupos de entrada e listas também seriam afetados.

Note

Se o componente estiver usando um Emulated ViewEncapsulation, é necessário penetrate neste encapsulamento usando::ng-deep:

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

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

Demo

Note

A amostra não será afetada Change Theme pelo tema global selecionado.

API References

• IgxColumnComponent
• IgxGridComponent API
• Estilos IgxGridComponent

Additional Resources

• Visão geral da grade
• Virtualização e desempenho
• Paginação
• Classificação
• Resumos
• Movimentação de Colunas
• Fixação de coluna
• Redimensionamento de colunas
• Escolha

Nossa comunidade é ativa e sempre acolhedora para novas ideias.

• Ignite UI for Angular Fóruns
• Ignite UI for Angular GitHub