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

    El pinning de columna se controla mediante lapinned entrada de laigx-column. Las columnas fijadas se renderizan por defecto en el lado izquierdo de la cuadrícula y permanecen fijas mediante desplazamiento horizontal de las columnas sin fijar 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 puedes usar las cuadrículaspinColumn ounpinColumn métodos paraIgxGridComponent 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á clavada a la derecha de la columna más a la derecha. Cambiar el orden de las columnas fijadas puede hacerse suscribiéndose alcolumnPin evento y cambiando lainsertAtIndex propiedad 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

    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

    Para comenzar la personalización de la función de fijación, necesitas importar elindex archivo, donde se encuentran todas las funciones de estilo y mixin.

    @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, crea un nuevo tema que extienda ygrid-theme acepte los parámetros necesarios para personalizar la función de Fijar según se desee.

    $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

    La forma más sencilla de aplicar tu tema es con unasass @include instrucción en el archivo de estilos globales:

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