Angular Tree Grid Column Hiding

A Grade de Árvore Ignite UI for Angular fornece um IgxColumnActionsComponent com IgxColumnHidingDirective um que permite aos usuários executar a ocultação de colunas diretamente por meio da interface do usuário ou usando o componente Angular. A Grade de Interface do Usuário de Material tem uma interface de usuário de ocultação de coluna integrada, que pode ser usada por meio da barra de ferramentas da Grade de Árvore para alterar o estado visível das colunas. Além disso, os desenvolvedores sempre podem definir a interface do usuário de ocultação de coluna como um componente separado e colocá-la em qualquer lugar que desejarem na página.

Angular Tree Grid Column Hiding Example

Tree Grid Setup

Vamos começar criando nossa Grade de Árvore e vinculando-a aos nossos dados. Também habilitaremos a filtragem e a classificação das colunas.

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

<igx-tree-grid #treeGrid [data]="data" primaryKey="ID" foreignKey="ParentID" [autoGenerate]="false" width="100%"
    height="560px" columnWidth="200px" [allowFiltering]="true">
    <igx-column [field]="'Name'" dataType="string" [sortable]="true" [disableHiding]="true"></igx-column>
    <igx-column [field]="'ID'" dataType="number" [sortable]="true"></igx-column>
    <igx-column [field]="'Title'" dataType="string" [sortable]="true" [disableHiding]="true"></igx-column>
    <igx-column [field]="'HireDate'" dataType="date" [sortable]="true" [hidden]="true"></igx-column>
    <igx-column [field]="'Age'" dataType="number" [sortable]="true" [hidden]="true"></igx-column>
    <igx-column [field]="'Address'" dataType="string" [sortable]="true"></igx-column>
    <igx-column [field]="'City'" dataType="string" [sortable]="true"></igx-column>
    <igx-column [field]="'Country'" dataType="string" [sortable]="true"></igx-column>
    <igx-column [field]="'Fax'" dataType="string" [sortable]="true"></igx-column>
    <igx-column [field]="'PostalCode'" dataType="string" [sortable]="true"></igx-column>
    <igx-column [field]="'Phone'" dataType="string" [sortable]="true"></igx-column>
</igx-tree-grid>

Toolbar's Column Hiding UI

A interface do usuário de ocultação de coluna interna é colocada dentro de uma IgxDropDownComponent barra de ferramentas da grade de árvore. Podemos mostrar/ocultar a interface do usuário de ocultação de coluna usando esse menu suspenso exato. Para isso, tudo o que precisamos fazer é definir o e o IgxGridToolbarActionsComponent IgxGridToolbarHidingComponent interior da Grade da Árvore. Também adicionaremos um título à nossa barra de ferramentas usando o e um estilo personalizado para o IgxGridToolbarTitleComponent wrapper do nosso Tree Grid.

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

<div class="grid__wrapper">
    <igx-tree-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-tree-grid>
</div>

/* columnHiding.component.css */

.grid__wrapper {
    margin: 10px;
}

A Grade de Árvore nos fornece algumas propriedades úteis quando se trata de usar a interface do usuário de ocultação de coluna da barra de ferramentas. Ao usar a igx-grid-toolbar-hiding title propriedade, definiremos o título que é exibido dentro do botão suspenso na barra de ferramentas.

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

<div class="grid__wrapper">
    <igx-tree-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-tree-grid>
</div>

Usando a columnsAreaMaxHeight propriedade do IgxGridToolbarHidingComponent, podemos definir a altura máxima da área que contém as ações da coluna. Dessa forma, se tivermos muitas ações e nem todas caberem no contêiner, aparecerá uma barra de rolagem, que nos permitirá rolar para qualquer ação que desejarmos.

// columnHiding.component.ts

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

Para usar o conjunto expandido de funcionalidades para a interface do usuário de ocultação de coluna, podemos usar a propriedade IgxColumnActionsComponent columnsAreaMaxHeight. Desta forma, podemos usá-lo de acordo com os requisitos de 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 queremos definir manualmente o nosso IgxColumnActionsComponent, adicionar o IgxColumnHidingDirective para que ele saiba qual seria seu propósito e colocá-lo em qualquer lugar da página. Primeiro, porém, precisamos importar o IgxColumnActionsModule.

// app.module.ts

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

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

Agora vamos criar o nosso IgxColumnActionsComponent. Em nosso aplicativo, vamos colocá-lo ao lado da grade (o que não é o caso da interface do usuário oculta a coluna da barra de ferramentas, onde o componente está dentro de um menu suspenso por design). Também definiremos a columns propriedade do componente para as colunas de nossa Grade de Árvore e incluiremos alguns estilos personalizados para tornar nosso aplicativo ainda melhor!

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

<div class="columnHidingContainer">
    <igx-column-actions igxColumnHiding #columnHidingUI [columns]="treeGrid.columns">
    </igx-column-actions>
</div>
<div class="gridContainer">
    <igx-tree-grid #treeGrid [data]="data" primaryKey="ID" foreignKey="ParentID" [autoGenerate]="false" width="100%" height="500px" columnWidth="200px">
        ...
    </igx-tree-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 coluna é definir as title propriedades e . filterColumnsPrompt O title é exibido na parte superior e o filterColumnsPrompt é o texto do prompt exibido na entrada de filtro da nossa coluna que oculta a interface do usuário.

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

<div class="columnHidingContainer">
    <igx-column-actions igxColumnHiding #columnHidingUI [columns]="treeGrid.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 do usuário de ocultação de colunas. Para isso, usaremos a columnDisplayOrder 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 Grade de Árvore)

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';
// import { ..., IgxRadioModule } from '@infragistics/igniteui-angular'; for licensed package

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

Agora, tudo o que precisamos fazer é vincular a checked propriedade de ambos os botões de opção, respectivamente, a condições diferentes e manipular 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 possa ocultar colunas por meio da interface do usuário de ocultação de coluna simplesmente definindo sua disableHiding propriedade como true.

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

<div class="gridContainer">
    <igx-tree-grid ... >
        ...
        <igx-column [field]="'Name'" dataType="string" [sortable]="true" [disableHiding]="true"></igx-column>
        <igx-column [field]="'Title'" dataType="string" [sortable]="true" [disableHiding]="true"></igx-column>
        ...
    </igx-tree-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 os column-actions-theme parâmetros e aceita os $title-color e . $background-color

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

Como visto, o controla column-actions-theme 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 também queremos estilizar os botões, então criaremos um novo tema de botões:

$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 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 a cor do texto dos botões planos e a cor desativada do botão, mas fornece button-theme muito mais parâmetros para controlar o estilo do botão.

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 criado tema de botão dentro de.igx-column-actions, para que apenas os botões de ocultação da coluna sejam estilizados. Caso contrário, outros botões na grade também seriam afetados.

Note

Se o componente estiver usando um Emulated ViewEncapsulation, é necessário penetrate que esse encapsulamento use::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 da Grade de Árvore 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:

IgxTreeGridComponent properties: