Fijación de columnas en cuadrícula Angular

    Se puede anclar una o varias columnas a la izquierda o a la derecha de la cuadrícula de la interfaz de usuario de Angular. El anclaje de columnas en Ignite UI for Angular permite a los usuarios finales bloquear la columna en un orden de columna en particular, esto les permitirá verla mientras se desplazan horizontalmente por la cuadrícula. La cuadrícula de la interfaz de usuario de material tiene una interfaz de usuario de anclaje de columna integrada, que se puede usar a través de la barra de herramientas de la cuadrícula para cambiar el estado de la fijación de las columnas. Además, puede definir una interfaz de usuario personalizada y cambiar el estado de anclaje de las columnas a través de la API de fijación de columnas.

    Angular Grid Column Pinning Example

    Column Pinning API

    Column pinning is controlled through the pinned input of the igx-column. Pinned columns are rendered on the left side of the Grid by default and stay fixed through horizontal scrolling of the unpinned columns in the Grid body.

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

    You may also use the Grid's pinColumn or unpinColumn methods of the IgxGridComponent to pin or unpin columns by their field name:

    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.

    A column is pinned to the right of the rightmost pinned column. Changing the order of the pinned columns can be done by subscribing to the columnPin event and changing the insertAtIndex property of the event arguments to the desired position index.

    <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

    Puedes cambiar la posición de fijación de columnas mediante lapinning opción de configuración. Te permite poner la posición de las columnas en Inicio o Fin. Cuando se configura como Fin, las columnas se renderizan al final de la cuadrícula, después de las columnas sin fijación. Las columnas sin clavar pueden desplazarse horizontalmente, mientras que las columnas clavadas permanecen fijas a la derecha.

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

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

    Demo

    Además, puede especificar cada ubicación de anclaje de columna por separado, lo que le permite anclar columnas a ambos lados de la cuadrícula para mayor comodidad y optimización más fácil de los conjuntos de datos. Consulte la demostración a continuación para obtener más referencia. Para anclar una columna, seleccione una columna haciendo clic en un encabezado y use los botones de anclaje agregados en la barra de herramientas, o simplemente arrastre una columna a otra anclada.

    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 aplicar estilos a través de la biblioteca de temas de Ignite UI for Angular. El tema de la cuadrícula expone una amplia variedad de propiedades, que permiten la personalización de todas las características de la cuadrícula.

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

    Importing global theme

    To begin the customization of the Pinning feature, you need to import the index file, where all styling functions and mixins are located.

    @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

    Next, create a new theme, that extends the grid-theme and accepts the parameters, required to customize the Pinning feature as desired.

    $custom-theme: grid-theme(
  $pinned-border-width: 5px,
  $pinned-border-style: double,
  $pinned-border-color: #ffcd0f,
  $cell-active-border-color: #ffcd0f
);
    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.

    Applying the custom theme

    The easiest way to apply your theme is with a sass @include statement in the global styles file:

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

    Demo

    Note

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

    API References

    Additional Resources

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