Angular Ocultação de coluna de grade

A Ignite UI for Angular Grid oferece umIgxColumnActionsComponentIgxColumnHidingDirective dispositivo que permite aos usuários realizar ocultação de colunas diretamente pela interface do usuário ou usando o componente Angular. A Grade da Interface Material possui uma interface interna para ocultar colunas, que pode ser usada através da barra de ferramentas da Grade para alterar o estado visível das colunas. Além disso, os desenvolvedores sempre podem definir a coluna que esconde a interface como um componente separado e colocá-la onde quiserem na página.

Angular Grid Column Hiding Example

Grid Setup

Vamos começar criando nosso Grid e vinculando-o aos nossos dados. Também habilitaremos a filtragem e a classificação das colunas.

<!--columnHiding.component.html-->

<igx-grid #grid id="grid" [data]="data" [autoGenerate]="false" width="100%" height="560px" columnWidth="200px" [allowFiltering]="true">
    <igx-column [field]="'ID'" dataType="string" [sortable]="true" [hidden]="true"></igx-column>
    <igx-column [field]="'ContactName'" dataType="string" [sortable]="true" [hidden]="true"></igx-column>
    <igx-column [field]="'ContactTitle'" dataType="string" [sortable]="true"></igx-column>
    <igx-column [field]="'City'" dataType="string" [sortable]="true"></igx-column>
    <igx-column [field]="'CompanyName'" dataType="string" [sortable]="true"></igx-column>
    <igx-column [field]="'Fax'" dataType="string" [sortable]="true"></igx-column>
    <igx-column [field]="'Address'" dataType="string" [sortable]="true"></igx-column>
    <igx-column [field]="'PostalCode'" dataType="string" [sortable]="true"></igx-column>
    <igx-column [field]="'Country'" dataType="string" [sortable]="true"></igx-column>
    <igx-column [field]="'Phone'" dataType="string" [sortable]="true"></igx-column>
</igx-grid>

Toolbar's Column Hiding UI

A interface embutida de ocultação de colunas está posicionada dentro eIgxDropDownComponent na barra de ferramentas da Grade. Podemos mostrar/ocultar a interface de ocultação de colunas usando exatamente esse menu suspenso. Para isso, tudo o que precisamos fazer é definir tanto oIgxGridToolbarActionsComponent quanto oIgxGridToolbarHidingComponent interior da Grade. Também adicionaremos um título à nossa barra de ferramentas usando oIgxGridToolbarTitleComponent e um estilo personalizado para o wrapper da nossa Grade.

<!--columnHiding.component.html-->

<div class="grid__wrapper">
    <igx-grid ...>
        <igx-grid-toolbar>
            <igx-grid-toolbar-title>Employees</igx-grid-toolbar-title>
            <igx-grid-toolbar-actions>
                <igx-grid-toolbar-hiding></igx-grid-toolbar-hiding>
            </igx-grid-toolbar-actions>
        </igx-grid-toolbar>
        ...
    </igx-grid>
</div>

/* columnHiding.component.css */

.grid__wrapper {
    margin: 10px;
}

A Grade nos oferece algumas propriedades úteis para usar a interface de ocultação de colunas da barra de ferramentas. Usando aigx-grid-toolbar-hiding title propriedade, definiremos o título que será exibido dentro do botão suspenso da barra de ferramentas.

<!--columnHiding.component.html-->

<div class="grid__wrapper">
    <igx-grid>
        <igx-grid-toolbar>
            <igx-grid-toolbar-title>Employees</igx-grid-toolbar-title>
            <igx-grid-toolbar-actions>
                <igx-grid-toolbar-hiding #hidingActionRef title="Column Hiding"></igx-grid-toolbar-hiding>
            </igx-grid-toolbar-actions>
        </igx-grid-toolbar>
    </igx-grid>
</div>

Usando acolumnsAreaMaxHeight propriedade do IgxGridToolbarHidingComponent, podemos definir a altura máxima da área que contém as ações da coluna. Assim, se tivermos muitas ações e nem todas caberem no container, uma barra de rolagem vai aparecer, permitindo que possamos deslizar para qualquer ação que quisermos.

// columnHiding.component.ts

public ngAfterViewInit() {        
    this.hidingActionRef.columnsAreaMaxHeight = "200px";
}

Para usar o conjunto expandido de funcionalidades da interface de ocultação de colunas, podemos usar a propriedade IgxColumnActionsComponentcolumnsAreaMaxHeight. Dessa forma, podemos usá-lo conforme os requisitos da nossa aplicação.

Você pode ver o resultado do código acima no início deste artigo na seção Exemplo de ocultação de coluna Angular.

Custom Column Hiding UI

Digamos que queiramos definir manualmente o nossoIgxColumnActionsComponent, adicionar oIgxColumnHidingDirective para que ele saiba qual seria seu propósito e colocá-lo em qualquer lugar da página. Primeiro, porém, precisamos importar oIgxColumnActionsModule.

// app.module.ts

...
import {
    ...
    IgxColumnActionsModule 
} from 'igniteui-angular/grids/core';
// import { ..., IgxColumnActionsModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., IgxColumnActionsModule],
})
export class AppModule {}

Agora vamos criar o nossoIgxColumnActionsComponent. Na nossa aplicação, vamos colocá-la ao lado da grade (o que não acontece com a coluna da barra de ferramentas que esconde a interface, onde o componente está dentro de um menu suspenso por design). Também vamos definir acolumns propriedade do componente para as colunas da nossa Grade e incluir alguns estilos personalizados para deixar nossa aplicação ainda melhor!

<!--columnHiding.component.html-->

<div class="columnHidingContainer">
    <igx-column-actions igxColumnHiding #columnHidingUI [columns]="grid.columns">
    </igx-column-actions>
</div>
<div class="gridContainer">
    <igx-grid #grid [data]="data" [autoGenerate]="false" width="100%" height="500px" columnWidth="200px">
        ...
    </igx-grid>
</div>

/* columnHiding.component.css */

.grid__wrapper {
    margin: 15px;
    display: flex;
    flex-direction: row;
}

.columnHidingContainer {
    min-width: 250px;
    height: 560px;
    display: flex;
    flex-direction: column;
    padding-left: 20px;
    padding-right: 20px;
    border: 1px gray;
    border-radius: 10px;
    box-shadow: 1px 1px 2px 2px rgba(50, 50, 50, 0.25);
    igx-column-actions {
        height: 460px;
    }
}

.columnsOrderOptionsContainer {
    margin-top: 20px;
    margin-bottom: 20px;
}

.gridContainer {
    width: 100%;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    margin-left: 30px;    
}

Add title and filter prompt

Mais algumas coisas que podemos fazer para enriquecer a experiência do usuário do nosso componente de ocultação de colunas é definir astitle propriedades efilterColumnsPrompt. Otitle é exibido no topo e ofilterColumnsPrompt texto do prompt que aparece na entrada do filtro da nossa interface de ocultação da coluna.

<!--columnHiding.component.html-->

<div class="columnHidingContainer">
    <igx-column-actions igxColumnHiding #columnHidingUI [columns]="grid.columns"
                       title="Column Hiding" filterColumnsPrompt="Type here to search">
    </igx-column-actions>
</div>

Add column display order options

Também podemos permitir que o usuário escolha a ordem de exibição das colunas na interface de ocultação das colunas. Para esse fim, usaremos acolumnDisplayOrder propriedade , que é uma propriedade do tipo enumeração e possui as seguintes opções:

Alfabético (ordene as colunas em ordem alfabética)
DisplayOrder (ordene as colunas de acordo com a forma como são exibidas na Grid)

Vamos criar alguns botões de opção bem projetados para nossas opções! Só temos que ir em frente e obter o módulo IgxRadio.

// app.module.ts

...
import {
    ...
    IgxRadioModule    
} from 'igniteui-angular/radio';
// import { ..., IgxRadioModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., IgxRadioModule],    
})
export class AppModule {}

Agora tudo o que precisamos fazer é vincular achecked propriedade dos dois botões de opção com condições diferentes e lidar com seus eventos de clique.

<!--columnHiding.component.html-->

<div class="columnHidingContainer">
    ...
    <div class="columnsOrderOptionsContainer">
        <igx-radio [checked]="columnHidingUI.columnDisplayOrder === 'Alphabetical'"
                   (click)="columnHidingUI.columnDisplayOrder = 'Alphabetical'">
            Alphabetical order
        </igx-radio>
        <igx-radio [checked]="columnHidingUI.columnDisplayOrder === 'DisplayOrder'"
                   (click)="columnHidingUI.columnDisplayOrder = 'DisplayOrder'">
            Display order
        </igx-radio>
    </div>
</div>

Disable hiding of a column

Podemos facilmente impedir que o usuário oculte colunas através da interface de ocultação de colunas simplesmente definindo a propriedade delesdisableHiding como true.

<!--columnHiding.component.html-->

<div class="gridContainer">
    <igx-grid ... >
        ...
        <igx-column [field]="'ContactName'" dataType="string" [sortable]="true" [disableHiding]="true"></igx-column>
        <igx-column [field]="'ContactTitle'" dataType="string" [sortable]="true" [disableHiding]="true"></igx-column>
        ...
    </igx-grid>
</div>

Se tudo correr bem, é assim que nosso componente de interface do usuário de ocultação de coluna deve ficar:

Estilização

Para começar a estilizar o componente de ações da coluna, precisamos importar o arquivo de índice, onde todas as funções do tema e mixins 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';

Usando a abordagem mais simples, criamos um novo tema que estende oscolumn-actions-theme e aceita os$title-color parâmetros e$background-color.

$custom-column-actions-theme: column-actions-theme(
  $background-color: #292826,
  $title-color: #ffcd0f
);

Como visto, ocolumn-actions-theme controle apenas as cores do contêiner de ações da coluna, mas não afeta os botões, caixas de seleção e o grupo de entrada dentro dele. Digamos que quisermos estilizar os botões também, então vamos criar um novo tema de botão:

$custom-button: button-theme(
  $foreground: #292826, 
  $disabled-foreground: rgba(255, 255, 255, .54)
);

Note

Em vez de codificar os valores de cor como acabamos de fazer, podemos alcançar maior flexibilidade em termos de cores usando aspalette funções e.color Por favor, consulte oPalettes tópico para orientações detalhadas sobre como usá-los.

Neste exemplo, só mudamos a cor do texto dos botões planos e o botão desativou a cor, mas issobutton-theme fornece muito mais parâmetros para controlar o estilo dos botões.

O último passo é incluir os mixins de componentes, cada um com seu respectivo tema:

@include css-vars($custom-column-actions-theme);

.igx-column-actions {
  @include css-vars($custom-button);
}

Note

Incluímos o tema de botão criado dentro dele.igx-column-actions, para que apenas os botões que escondem a coluna sejam estilizados. Caso contrário, outros botões na grade também seriam afetados.

Note

Se o componente estiver usando umEmulated ViewEncapsulation, é necessário parapenetrate esse encapsulamento usando::ng-deep para os componentes dentro do componente de ação da coluna (botões, caixas de seleção... etc):

@include css-vars($custom-column-actions-theme);

:host {
  ::ng-deep {
    .igx-column-actions {
      @include css-vars($custom-button);
    }
  }
}

Demo

API References

Neste artigo, aprendemos como usar a interface do usuário de ocultação de coluna interna na barra de ferramentas do Grid e também a definimos como um componente separado. Introduzimos uma interface do usuário que permite ao usuário escolher entre diferentes ordens de coluna e definimos nosso próprio título personalizado e filtramos textos de prompt. Também usamos um componente de Ignite UI for Angular adicional - o botão IgxRadio.

A coluna que oculta a interface do usuário tem mais algumas APIs para explorar, listadas abaixo.

Componentes e/ou diretivas adicionais com APIs relativas que foram usadas:

IgxGridComponent properties: