Angular Tree Grid Column Hiding

La Ignite UI for Angular Tree Grid proporciona un IgxColumnActionsComponent con un IgxColumnHidingDirective que permite a los usuarios ocultar columnas directamente a través de la interfaz de usuario o mediante el componente Angular. Material UI Grid tiene una interfaz de usuario integrada para ocultar columnas, que se puede usar a través de la barra de herramientas de Tree Grid para cambiar el estado visible de las columnas. Además, los desarrolladores siempre pueden definir la interfaz de usuario que oculta columnas como un componente independiente y colocarla en cualquier lugar de la página que deseen.

Angular Tree Grid Column Hiding Example

Tree Grid Setup

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

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

La interfaz de usuario integrada para ocultar columnas se coloca dentro de un IgxDropDownComponent en la barra de herramientas de Tree Grid. Podemos mostrar/ocultar la interfaz de usuario de ocultación de columnas usando este menú desplegable exacto. Para ello, todo lo que tenemos que hacer es configurar tanto IgxGridToolbarActionsComponent como IgxGridToolbarHidingComponent dentro de Tree Grid. También agregaremos un título a nuestra barra de herramientas usando IgxGridToolbarTitleComponent y un estilo personalizado para el contenedor de nuestra 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;
}

Tree Grid nos proporciona algunas propiedades útiles cuando se trata de usar la interfaz de usuario para ocultar columnas de la barra de herramientas. Al utilizar el igx-grid-toolbar-hiding title propiedad, estableceremos el título que se muestra dentro del botón desplegable en la barra de herramientas.

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

Al utilizar la propiedad columnsAreaMaxHeight de IgxGridToolbarHidingComponent, podemos establecer la altura máxima del área que contiene las acciones de la columna. De esta forma si tenemos muchas acciones y no caben todas 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 utilizar el conjunto ampliado de funcionalidades para la interfaz de usuario que oculta columnas, podemos utilizar la propiedad columnsAreaMaxHeight de IgxColumnActionsComponent. De esta manera podremos utilizarlo según los requisitos de nuestra aplicación.

Puede 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

Digamos que queremos definir manualmente nuestro IgxColumnActionsComponent, agregar IgxColumnHidingDirective para que sepa cuál sería su propósito y colocarlo en cualquier lugar de la página. Sin embargo, primero debemos importar IgxColumnActionsModule.

// app.module.ts

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

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

Ahora creemos nuestro IgxColumnActionsComponent. En nuestra aplicación, lo colocaremos al lado de la cuadrícula (lo cual no es el caso con la columna de la barra de herramientas que oculta la interfaz de usuario, donde el componente está dentro de un menú desplegable por diseño). ¡También estableceremos la propiedad de columns del componente en las columnas de nuestro Tree Grid e incluiremos algunos estilos personalizados para que nuestra aplicación se vea aún mejor!

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

Un par de cosas más que podemos hacer para enriquecer la experiencia del usuario de nuestro componente de ocultación de columnas es establecer el title y las propiedades filterColumnsPrompt. El title se muestra en la parte superior y filterColumnsPrompt es el texto del mensaje que se muestra en la entrada de filtro de nuestra interfaz de usuario que oculta columnas.

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

También podemos permitir que el usuario elija el orden de visualización de las columnas en la interfaz de usuario que oculta columnas. Para ello usaremos la propiedad columnDisplayOrder, 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 la cuadrícula de árbol)

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

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

Ahora todo lo que tenemos que hacer es vincular la propiedad checked de ambos botones de opción respectivamente con diferentes condiciones y manejar 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 usuario que oculta columnas simplemente configurando su propiedad disableHiding en verdadero.

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

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';

Al utilizar el enfoque más simple, creamos un nuevo tema que extiende el column-actions-theme y acepta los parámetros $title-color y $background-color.

$custom-column-actions-theme: column-actions-theme(
    $background-color: steelblue,
    $title-color: gold
);

Como se ve, el column-actions-theme solo controla los colores del contenedor de acciones de columna, pero no afecta los botones, las casillas de verificación ni el grupo de entrada dentro de él. Digamos que también queremos darle estilo a los botones, así que crearemos un nuevo tema de botón:

$custom-button: button-theme($flat-text-color: gold, $disabled-color: black);

En este ejemplo solo cambiamos el color del texto de los botones planos y el color deshabilitado del botón, pero el button-theme proporciona 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 column-actions($custom-column-actions-theme);
.igx-column-actions {
    @include button($custom-button);
}

Note

Ajustamos el alcance del mixin igx-button dentro de.igx-column-actions, de modo que solo se apliquen estilos a los botones que ocultan las columnas. De lo contrario, otros botones de la cuadrícula también se verían afectados.

Note

Si el componente utiliza una ViewEncapsulation Emulated, es necesario penetrate esta encapsulación usando::ng-deep:

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

Defining a color palette

En lugar de codificar los valores de color como acabamos de hacer, podemos lograr una mayor flexibilidad en términos de colores utilizando las funciones igx-palette e igx-color.

igx-palette genera una paleta de colores basada en los colores primarios y secundarios que se pasan:

$yellow-color: gold;
$blue-color: steelblue;

$custom-palette: palette($primary: $blue-color, $secondary: $yellow-color);

Y luego con igx-color podemos recuperar fácilmente el color de la paleta.

$custom-column-actions-theme: column-actions-theme(
    $palette: $custom-palette,
    $title-color: color($custom-palette, "secondary", 400),
    $background-color: color($custom-palette, "primary", 200)
);

$custom-button: button-theme(
    $palette: $custom-palette,
    $flat-text-color: color($custom-palette, "secondary", 400),
    $disabled-color: black
);

Note

igx-color e igx-palette son funciones potentes para generar y recuperar colores. Consulte el tema Palettes para obtener orientación detallada sobre cómo utilizarlas.

Using Schemas

Yendo más allá con el motor de temas, puede crear una estructura sólida y flexible que se beneficie de los esquemas. Un esquema es una receta de un tema.

// Extending the dark column actions schema
$custom-column-actions-schema: extend($_dark-column-actions,
    (
        title-color:(
           color: ("secondary", 400)
        ),
        background-color:(
           color: ("primary", 200)
        )
    )
);
// Extending the dark button schema
$custom-button-schema: extend($_dark-button,
    (           
        flat-text-color:(
           color:("secondary", 500)
        ),
        disabled-color:(
           color:("primary", 700)
        )
    )
);

Para aplicar nuestros esquemas personalizados, tenemos que extender uno de los globales (light u dark), que básicamente señala los componentes con un esquema personalizado, y luego agregarlo a los respectivos temas de los componentes:

// Extending the global dark-schema
$custom-dark-schema: extend($dark-schema,(
    igx-column-actions: $custom-column-actions-schema,
    igx-button: $custom-button-schema
));

// Defining column-actions-theme with the global dark schema
$custom-column-actions-theme: column-actions-theme(
  $palette: $custom-palette,
  $schema: $custom-dark-schema
);

// Defining button-theme with the global dark schema
$custom-button: button-theme(
  $palette: $custom-palette,
  $schema: $custom-dark-schema
);

No olvide incluir los temas de la misma manera que se demostró anteriormente.

Demo

API References

En este artículo, aprendimos cómo usar la interfaz de usuario integrada para ocultar columnas en la barra de herramientas de Tree Grid 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 configuramos nuestro propio título personalizado y filtramos textos de solicitud. También utilizamos una Ignite UI for Angular: 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:

IgxTreeGridComponent properties: