Ocultación de columnas en cuadrícula Angular

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

Comencemos creando nuestra Grid y vinculándola a nuestros datos. También habilitaremos el filtrado y la clasificación de las columnas.

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

Utilizando lacolumnsAreaMaxHeight propiedad de IgxGridToolbarHidingComponent, podemos establecer la altura máxima del área que contiene las acciones de la columna. Así, si tenemos muchas acciones y no todas caben en el contenedor, aparecerá una barra de desplazamiento que nos permitirá desplazarnos a cualquier acción que queramos.

// columnHiding.component.ts

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

Para usar el conjunto ampliado de funcionalidades de la interfaz de ocultación de columnas, podemos usar la propiedad IgxColumnActionsComponentcolumnsAreaMaxHeight. De esta manera podemos usarla según los requisitos de nuestra aplicación.

Puedes ver el resultado del código anterior al comienzo de este artículo en la sección Ejemplo de ocultación de columnas Angular.

Custom Column Hiding UI

Supongamos que queremos definir manualmente nuestroIgxColumnActionsComponent no, añadir elIgxColumnHidingDirective para que sepa cuál sería su propósito y ponerlo en cualquier parte de la página. Sin embargo, primero necesitamos importar elIgxColumnActionsModule.

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

Un par de cosas más que podemos hacer para enriquecer la experiencia de usuario de nuestro componente de ocultamiento de columnas es establecer lastitle propiedades yfilterColumnsPrompt. Setitle muestra en la parte superior y elfilterColumnsPrompt es el texto de la indicación que aparece en la entrada del filtro de nuestra interfaz de columna oculta.

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

También podemos permitir que el usuario elija el orden de visualización de las columnas en la interfaz de ocultación de columnas. Para este propósito utilizaremos lacolumnDisplayOrder propiedad, que es una propiedad de tipo enumeración y tiene las siguientes opciones:

Alfabético (ordenar las columnas alfabéticamente)
DisplayOrder (ordena las columnas según la forma en que se muestran en el Grid)

¡Creemos un par de botones de opción bien diseñados para nuestras opciones! Sólo tenemos que seguir adelante y conseguir el 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 {}

Ahora solo tenemos que asignar lachecked propiedad de ambos botones de opción con condiciones diferentes y gestionar sus eventos de clic.

<!--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 evitar fácilmente que el usuario pueda ocultar columnas a través de la interfaz de ocultación de columnas simplemente configurando sudisableHiding propiedad 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>

Si todo salió bien, así es como debería verse nuestro componente de interfaz de usuario para ocultar columnas:

Estilismo

Para comenzar a diseñar el componente de acciones de columna, necesitamos importar el archivo de índice, donde se encuentran todas las funciones del tema y los mixins de componentes:

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

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

Utilizando el enfoque más sencillo, creamos un nuevo tema que extiende loscolumn-actions-theme y acepta los$title-color parámetros y$background-color.

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

Como se ha visto, solocolumn-actions-theme controla los colores del contenedor de acciones de columna, pero no afecta a los botones, casillas de verificación ni al grupo de entrada que contiene. Supongamos que queremos estilizar también los botones, así que crearemos un nuevo tema de botones:

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

Note

En lugar de codificar los valores de color como acabamos de hacer, podemos lograr mayor flexibilidad en cuanto a colores usando laspalette funciones ycolor. Por favor, consulta elPalettes tema para obtener una guía detallada sobre cómo utilizarlos.

En este ejemplo solo cambiamos el color de texto de los botones planos y el botón desactivó el color, pero proporcionabutton-theme muchos más parámetros para controlar el estilo del botón.

El último paso es incluir los mixins de componentes, cada uno con su respectiva temática:

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

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

Note

Incluimos el tema de botón creado en su.igx-column-actions interior, de modo que solo los botones que ocultan la columna se estilizen. De lo contrario, otros botones en la cuadrícula también se verían afectados.

Note

Si el componente utiliza unaEmulated ViewEncapsulation, es necesario quepenetrate esta encapsulación utilice::ng-deep para los componentes dentro del componente de acción de columna (botones, casillas de verificación ... etcétera):

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

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

Demo

API References

En este artículo, aprendimos a usar la interfaz de usuario de ocultación de columnas incorporada en la barra de herramientas de la cuadrícula y también la definimos como un componente separado. Introdujimos una interfaz de usuario que permite al usuario elegir entre diferentes órdenes de columnas, y establecemos nuestro propio título personalizado y textos de solicitud de filtro. También utilizamos un componente Ignite UI for Angular adicional: el botón IgxRadio.

La interfaz de usuario que oculta columnas tiene algunas API más para explorar, que se enumeran a continuación.

Componentes adicionales y/o directivas con API relativas que se utilizaron:

IgxGridComponent properties: