Fijación de columnas de rejilla Angular

    Se pueden fijar una columna o varias columnas en el lado izquierdo o derecho de la cuadrícula de interfaz de usuario Angular. La fijación de columnas en Ignite UI for Angular permite a los usuarios finales bloquear columnas en un orden particular, esto les permitirá verlas mientras se desplazan horizontalmente por la cuadrícula. Material UI Grid tiene una interfaz de usuario de fijación de columnas incorporada, que se puede usar a través de la barra de herramientas de Grid para cambiar el estado de fijación de las columnas. Además, puede definir una interfaz de usuario personalizada y cambiar el estado de fijación de las columnas a través de la API de fijación de columnas.

    Angular Grid Column Pinning Example

    Column Pinning API

    La fijación de columnas se controla a través de la entrada pinned de igx-column. Las columnas fijadas se representan en el lado izquierdo de la cuadrícula de forma predeterminada y permanecen fijas mediante el desplazamiento horizontal de las columnas no fijadas en el cuerpo de la cuadrícula.

    <igx-grid #grid1 [data]="data | async" [width]="700px" [autoGenerate]="false" (columnInit)="initColumns($event)"
    (selected)="selectCell($event)">
    <igx-column [field]="Name" [pinned]="true"></igx-column>
    <igx-column [field]="AthleteNumber"></igx-column>
    <igx-column [field]="TrackProgress"></igx-column>
    <igx-paginator [perPage]="10">
    </igx-paginator>
</igx-grid>

    También puede utilizar los métodos pinColumn o unpinColumn del Grid del IgxGridComponent para fijar o desanclar columnas por su nombre de campo:

    this.grid.pinColumn('AthleteNumber');
this.grid.unpinColumn('Name');

    Ambos métodos devuelven un valor booleano que indica si su operación respectiva fue exitosa o no. Generalmente la razón por la que fallan es que la columna ya se encuentra en el estado deseado.

    Una columna está fijada a la derecha de la columna fijada más a la derecha. Se puede cambiar el orden de las columnas fijadas suscribiéndose al evento columnPin y cambiando la propiedad insertAtIndex de los argumentos del evento al índice de posición deseado.

    <igx-grid #grid1 [data]="data | async" [autoGenerate]="true" (columnPin)="columnPinning($event)"></igx-grid>

    public columnPinning(event) {
    if (event.column.field === 'Name') {
        event.insertAtIndex = 0;
    }
}

    Pinning Position

    Puede cambiar la posición de fijación de la columna mediante la opción de configuración pinning. Le permite establecer la posición de las columnas en Inicio o Fin. Cuando se establece en Fin, las columnas se representan al final de la cuadrícula, después de las columnas sin fijar. Las columnas no fijadas se pueden desplazar horizontalmente, mientras que las columnas fijadas permanecen fijas a la derecha.

    <igx-grid [data]="data" [autoGenerate]="true" [pinning]="pinningConfig"></igx-grid>

    public pinningConfig: IPinningConfig = { columns: ColumnPinningPosition.End };

    Demo

    Custom Column Pinning UI

    Puede definir su interfaz de usuario personalizada y cambiar el estado del pin de las columnas a través de la API relacionada.

    Digamos que en lugar de una barra de herramientas le gustaría definir íconos de pin en los encabezados de las columnas en los que el usuario final puede hacer clic para cambiar el estado del pin de la columna en particular. Esto se puede hacer creando una plantilla de encabezado para la columna con un ícono personalizado.

    <igx-grid #grid1 [data]="data" [width]="'100%'" [height]="'500px'">
    <igx-column #col *ngFor="let c of columns" [field]="c.field" [header]="c.header" [width]="c.width" [pinned]='c.pinned'
        [hidden]='c.hidden' [headerClasses]="'customHeaderSyle'">
        <ng-template igxHeader>
            <div class="title-inner">
                <span style="float:left">{{col.header}}</span>
                <igx-icon class="pin-icon" fontSet="fas" name="fa-thumbtack" (click)="toggleColumn(col)"></igx-icon>
            </div>
        </ng-template>
    </igx-column>
</igx-grid>

    Al hacer clic en el icono personalizado, el estado del pin de la columna relacionada se puede cambiar utilizando los métodos API de la columna.

    public toggleColumn(col: ColumnType) {
    col.pinned ? col.unpin() : col.pin();
}

    Demo

    Pinning Limitations

    • Establecer el ancho de las columnas en porcentaje (%) explícitamente hace que el cuerpo de la cuadrícula y el contenido del encabezado estén desalineados cuando hay columnas fijadas. Para que la fijación de columnas funcione correctamente, los anchos de las columnas deben estar en píxeles (px) o ser asignados automáticamente por la cuadrícula.

    Estilismo

    igxGrid permite diseñar a través de la Ignite UI for Angular. El tema de la grilla expone una amplia variedad de propiedades, que permiten la personalización de todas las características de la grilla.

    En los pasos siguientes, veremos los pasos para personalizar el estilo de fijación de la cuadrícula.

    Importing global theme

    Para comenzar la personalización de la función Fijar, debe importar el archivo index, donde se encuentran todas las funciones de estilo y mixins.

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

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

    Defining custom theme

    A continuación, cree un nuevo tema, que extienda el grid-theme y acepte los parámetros necesarios para personalizar la función Fijar como desee.

    $custom-theme: grid-theme(
    /* Pinning properties that affect styling */
    $pinned-border-width: 5px,
    $pinned-border-style: double,
    $pinned-border-color: #FFCD0F,
    $cell-active-border-color: #FFCD0F
    /* add other features properties here... */
);

    Defining a custom color palette

    En el enfoque descrito anteriormente, los valores de color estaban codificados. Alternativamente, puede lograr una mayor flexibilidad utilizando las funciones igx-palette e igx-color.
    igx-palette genera una paleta de colores basada en los colores primarios y secundarios proporcionados.

    $primary-color: #292826;
$secondary-color: #ffcd0f;

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

    Una vez generada una paleta personalizada, la función igx-color se puede utilizar para obtener diferentes variedades de colores primarios y secundarios.

    $custom-theme: grid-theme(
    $pinned-border-width: 5px,
    $pinned-border-style: double,
    $pinned-border-color: color($custom-palette, "secondary", 500),
    $cell-active-border-color: color($custom-palette, "secondary", 500)
);

    El $custom-theme contiene las mismas propiedades que el de la sección anterior, pero esta vez los colores no están codificados. En su lugar, se utilizó la igx-palette personalizada y los colores se obtuvieron a través de sus colores primarios y secundarios, con una variante de color determinada.

    Defining custom schemas

    Puede ir aún más lejos y crear una estructura flexible que tenga todos los beneficios de un esquema. El esquema es la receta de un tema.
    Amplíe uno de los dos esquemas predefinidos que se proporcionan para cada componente. En nuestro caso, usaríamos $_light_grid.

    $custom-grid-schema: extend($_light-grid,(
    pinned-border-width: 5px,
    pinned-border-style: double,
    pinned-border-color: color:("secondary", 500),
    cell-active-border-color: color:("secondary", 500)
));

    Para que se aplique el esquema personalizado, se deben extender los globales light u dark. En realidad, todo el proceso consiste en proporcionar un componente con un esquema personalizado y luego agregarlo al tema del componente respectivo.

    $my-custom-schema: extend($light-schema, ( 
    igx-grid: $custom-grid-schema
));
$custom-theme: grid-theme(
    $palette: $custom-palette,
    $schema: $my-custom-schema
);

    Applying the custom theme

    La forma más sencilla de aplicar su tema es con una declaración @include sass en el archivo de estilos global:

    @include grid($custom-theme);

    Scoped component theme

    Para que el tema personalizado afecte solo a un componente específico, puede mover todos los estilos que acaba de definir desde el archivo de estilos globales al archivo de estilo del componente personalizado (incluida la importación del archivo index).

    De esta manera, debido a ViewEncapsulation de Angular, sus estilos se aplicarán solo a su componente personalizado.

    Note

    Si el componente utiliza una ViewEncapsulation Emulated, es necesario penetrar esta encapsulación usando::ng-deep para poder diseñar la cuadrícula.

    Note

    Envuelva la declaración dentro de un selector:host para evitar que sus estilos afecten a elementos fuera de nuestro componente:

    :host {
    ::ng-deep {
        @include grid($custom-theme);
    }
}

    Demo

    Note

    La muestra no se verá afectada por el tema global seleccionado en Change Theme.

    API References

    Additional Resources

    Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.