Web Components Fijación de columnas de cuadrícula de árbol

La función de fijar Ignite UI for Web Components columnas en Web Components Tree Grid permite a los desarrolladores bloquear columnas específicas en el orden deseado, asegurando la visibilidad en todo momento incluso cuando los usuarios se desplazan horizontalmente por elIgcTreeGridComponent. Hay una interfaz integrada para fijar columnas, accesible a través de la barra de herramientas Web Components Tree Grid. Además, los desarrolladores tienen la flexibilidad de crear una interfaz de usuario personalizada que cambia el estado del pin de las columnas.

Web Components Tree Grid Column Pinning Example

Este ejemplo demuestra cómo puedes fijar una columna o varias columnas a la izquierda o derecha de laIgcTreeGridComponent.

Column Pinning API

El fijador de columnas se controla mediante lapinned propiedad de laIgcColumnComponent. Las columnas clavadas se renderizan por defecto en el lado izquierdo delIgcTreeGridComponent y permanecen fijas mediante el desplazamiento horizontal de las columnas sin fijación en elIgcTreeGridComponent cuerpo.

<igc-tree-grid id="treeGrid" primary-key="ID" foreign-key="ParentID" auto-generate="false">
    <igc-column field="Name" pinned="true"></igc-column>
    <igc-column field="Title"></igc-column>
    <igc-column field="ID"></igc-column>
</igc-tree-grid>

También puedes usar losIgcTreeGridComponent​PinColumn métodosUnpinColumn paraIgcTreeGridComponent fijar o desanclar columnas por su nombre de campo:

this.treeGrid.pinColumn('Title');
this.treeGrid.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.

<igc-tree-grid id="dataGrid" auto-generate="true"></igc-tree-grid>

constructor() {
    var dataGrid = document.getElementById('dataGrid') as IgcTreeGridComponent;
    dataGrid.data = this.data;
    dataGrid.addEventListener("columnPin", this.columnPinning);
}

public columnPinning(event) {
    if (event.detail.column.field === 'Name') {
        event.detail.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.

<igc-tree-grid id="dataGrid" auto-generate="true"></igc-tree-grid>

var grid = document.getElementById('dataGrid') as IgcTreeGridComponent;
grid.pinning = { columns: ColumnPinningPosition.End };

Demo

Column Pinning on Both Sides

Además, puedes especificar cada ubicación de fijación de columna por separado, lo que te permite fijar columnas a ambos lados de la cuadrícula para mayor comodidad y optimización más sencilla de los conjuntos de datos. Por favor, consulta la demo a continuación para más referencias. Para fijar una columna, por favor selecciona una columna haciendo clic en un encabezado y utiliza los botones de fijar añadidos a la barra de herramientas, o simplemente arrastra una columna a otra fijada.

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 las columnas con un ícono personalizado.

<igc-tree-grid id="treeGrid" primary-key="ID" foreign-key="ParentID" auto-generate="false" width="100%" height="620px">
    <igc-column id="Name" field="Name" data-type="String" width="250px"></igc-column>
    <igc-column id="Title" field="Title" data-type="String" width="300px"></igc-column>
    <igc-column id="ID" field="ID" data-type="Number" width="200px"></igc-column>
    <igc-column id="HireDate" field="HireDate" header="Hire Date" data-type="Date" width="200px"></igc-column>
    <igc-column id="Age" field="Age" data-type="Number" width="200px"></igc-column>
    <igc-column id="Address" field="Address" data-type="String" width="200px"></igc-column>
    <igc-column id="City" field="City" data-type="String" width="200px"></igc-column>
    <igc-column id="Country" field="Country" data-type="String" width="200px"></igc-column>
    <igc-column id="Fax" field="Fax" data-type="string" width="200px"></igc-column>
    <igc-column id="PostalCode" field="PostalCode" header="Postal Code" data-type="String" width="200px"></igc-column>
    <igc-column id="Phone" field="Phone" data-type="String" width="200px"></igc-column>
</igc-tree-grid>

constructor() {
    var treeGrid = document.getElementById('treeGrid') as IgcTreeGridComponent;
    var Name = document.getElementById('Name') as IgcColumnComponent;
    var Title = document.getElementById('Title') as IgcColumnComponent;
    var ID = document.getElementById('ID') as IgcColumnComponent;
    var HireDate = document.getElementById('HireDate') as IgcColumnComponent;
    var Age = document.getElementById('Age') as IgcColumnComponent;
    var Address = document.getElementById('Address') as IgcColumnComponent;
    var City = document.getElementById('City') as IgcColumnComponent;
    var Country = document.getElementById('Country') as IgcColumnComponent;
    var Fax = document.getElementById('Fax') as IgcColumnComponent;
    var PostalCode = document.getElementById('PostalCode') as IgcColumnComponent;
    var Phone = document.getElementById('Phone') as IgcColumnComponent;

    treeGrid.data = this.data;
    Name.headerTemplate = this.pinHeaderTemplate;
    Title.headerTemplate = this.pinHeaderTemplate;
    ID.headerTemplate = this.pinHeaderTemplate;
    HireDate.headerTemplate = this.pinHeaderTemplate;
    Age.headerTemplate = this.pinHeaderTemplate;
    Address.headerTemplate = this.pinHeaderTemplate;
    City.headerTemplate = this.pinHeaderTemplate;
    Country.headerTemplate = this.pinHeaderTemplate;
    Fax.headerTemplate = this.pinHeaderTemplate;
    PostalCode.headerTemplate = this.pinHeaderTemplate;
    Phone.headerTemplate = this.pinHeaderTemplate;
}

public pinHeaderTemplate = (ctx: IgcCellTemplateContext) => {
    return html`
        <div class="title-inner">
            <span style="float:left">${ctx.cell.column.header}</span>
            <igc-icon class="pin-icon" fontSet="fas" name="fa-thumbtack" @click="${() => toggleColumn(ctx.cell.column)}"></igx-icon>
        </div>
    `;
}

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: IgcColumnComponent) {
    col.pinned ? col.unpin() : col.pin();
}

Demo

Pinning Limitations

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

Styling

Además de los temas predefinidos, la cuadrícula podía personalizarse aún más estableciendo algunas de las propiedades CSS disponibles. En caso de que quieras cambiar algunos de los colores, primero tienes que establecer unID para la cuadrícula:

<igc-tree-grid id="grid"></igc-tree-grid>

Luego establezca las propiedades CSS relacionadas con esta clase:

#grid {
    --ig-grid-pinned-border-width: 5px;
    --ig-grid-pinned-border-color: #FFCD0F;
    --ig-grid-pinned-border-style: double;
    --ig-grid-cell-active-border-color: #FFCD0F;
}

Demo

API References

• IgcTreeGridComponent
• IgcColumnComponent

Additional Resources

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

• Ignite UI for Web Components Foros
• Ignite UI for Web Components GitHub