Angular Ocultação de coluna de grade

The Ignite UI for Angular Grid provides an IgxColumnActionsComponent with an IgxColumnHidingDirective which allows users to perform column hiding directly through the user interface or by using the Angular component. The Material UI Grid has a built-in column hiding UI, which can be used through the Grid's toolbar to change the visible state of the columns. In addition, developers can always define the column hiding UI as a separate component and place it anywhere they want on the page.

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

The built-in Column Hiding UI is placed inside an IgxDropDownComponent in the Grid's toolbar. We can show/hide the Column Hiding UI by using this exact dropdown. For this purpose all we have to do is set both the IgxGridToolbarActionsComponent and the IgxGridToolbarHidingComponent inside of the Grid. We will also add a title to our toolbar by using the IgxGridToolbarTitleComponent and a custom style for our Grid's wrapper.

<!--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;
}

The Grid provides us with some useful properties when it comes to using the toolbar's column hiding UI. By using the igx-grid-toolbar-hiding title property, we will set the title that is displayed inside the dropdown button in the toolbar.

<!--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 {}

Now let's create our IgxColumnActionsComponent. In our application, we will place it next to the grid (which is not the case with the toolbar's column hiding UI, where the component is inside a dropdown by design). We will also set the columns property of the component to the columns of our Grid and include some custom styles to make our application look even better!

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