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>

By using the columnsAreaMaxHeight property of the IgxGridToolbarHidingComponent, we can set the maximum height of the area that contains the column actions. This way if we have a lot of actions and not all of them can fit in the container, a scrollbar will appear, which will allow us to scroll to any action we want.

// columnHiding.component.ts

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

In order to use the expanded set of functionalities for the column hiding UI, we can use the IgxColumnActionsComponent's columnsAreaMaxHeight property. This way we can use it according to our application's requirements.

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

Let's say we want to manually define our IgxColumnActionsComponent, add the IgxColumnHidingDirective so that it knows what its purpose would be and put it anywhere on the page. First, however, we need to import the IgxColumnActionsModule.

// app.module.ts

...
import {
    ...
    IgxColumnActionsModule 
} from 'igniteui-angular';
// 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

A couple more things we can do in order to enrich the user experience of our column hiding component is to set the title and the filterColumnsPrompt properties. The title is displayed on the top and the filterColumnsPrompt is the prompt text that is displayed in the filter input of our column hiding UI.

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

We can also allow the user to choose the display order of the columns in the column hiding UI. For this purpose we will use the columnDisplayOrder property, which is an enumeration type property and has the following options:

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

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

Now all we have to do is bind the checked property of both radio buttons respectively with different conditions and handle their click events.

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

We can easily prevent the user from being able to hide columns through the column hiding UI by simply setting their disableHiding property to 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';

By using the simplest approach, we create a new theme that extends the column-actions-theme and accepts the $title-color and the $background-color parameters.

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

As seen, the column-actions-theme only controls colors for the column actions container, but does not affect the buttons, checkboxes and the input-group inside of it. Let's say we want to style the buttons as well, so we will create a new button theme:

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

In this example we only changed the text-color of the flat buttons and the button disabled color, but the button-theme provides way more parameters to control the button style.

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

We include the created button-theme within .igx-column-actions, so that only the column hiding buttons would be styled. Otherwise other buttons in the grid would be affected too.

Note

If the component is using an Emulated ViewEncapsulation, it is necessary to penetrate this encapsulation using ::ng-deep for the components inside the column action component (buttons, checkboxes ...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: