Estilo condicional de cuadrícula Angular

    Si necesita proporcionar algún estilo personalizado en el componente IgxGrid, puede hacerlo a nivel de fila o de celda.

    Grid Conditional Row Styling

    El componente IgxGrid en Ignite UI for Angular proporciona dos formas de aplicar estilos condicionales a filas según reglas personalizadas.

    • Al configurar la entrada rowClasses en el componente IgxGrid;
    • Al configurar la entrada rowStyles en el componente IgxGrid;

    Más adelante en este tema los cubriremos con más detalle.

    Using rowClasses

    Puede diseñar condicionalmente las filas de IgxGrid configurando la entrada rowClasses y definiendo reglas personalizadas.

    <!-- sample.component.html -->
    <igx-grid #grid [data]="data" [height]="'600px'" [width]="'100%'" [rowClasses]="rowClasses">
        ...
    </igx-grid>
    

    La entrada rowClasses acepta un objeto literal, que contiene pares clave-valor, donde la clave es el nombre de la clase CSS, mientras que el valor es una función de devolución de llamada que devuelve un valor booleano o booleano.

    // sample.component.ts
    
    public rowClasses = {
        activeRow: this.activeRowCondition
    };
    
    public activeRowCondition = (row: RowType) => this.grid?.navigation.activeNode?.row === row.index;
    
    // sample.component.scss
    
    ::ng-deep {
     .activeRow {
        border: 2px solid #fc81b8;
        border-left: 3px solid #e41c77;
     }
    }
    

    Utilice::ng-deep o ViewEncapsulation.None para forzar los estilos personalizados a través del componente actual y sus hijos.

    Demo

    Using rowStyles

    Las columnas ahora exponen la propiedad rowStyles que permite aplicar estilos condicionales a las filas de datos. Similar a rowClasses acepta un objeto literal donde las claves son propiedades de estilo y los valores son expresiones para evaluación. Además, puedes aplicar un peinado regular (sin condiciones).

    La firma de devolución de llamada tanto para rowStyles como para rowClasses es:

    (row: RowType) => boolean
    

    Definamos nuestros estilos:

    // component.ts
    public rowStyles = {
        background: (row: RowType) => (+row.data['Change'] < 0  && +row.data['Change On Year(%)'] < 0) ? '#FF000088' : '#00000000',
        border: (row: RowType) => (+row.data['Change'] < 0  && +row.data['Change On Year(%)'] < 0) ? '2px solid' : '1px solid',
        'border-color': (row: RowType) => (+row.data['Change'] < 0  && +row.data['Change On Year(%)'] < 0) ? '#FF000099' : '#E9E9E9'
    };
    
    <!-- sample.component.html -->
    <igx-grid #grid1 [data]="data | async" [height]="'500px'" width="100%"
            [autoGenerate]="false" [allowFiltering]="true" [rowStyles]="rowStyles">
        ...
    </igx-grid>
    

    Demo

    Grid Conditional Cell Styling

    Descripción general

    El componente IgxGrid en Ignite UI for Angular proporciona dos formas de aplicar estilos condicionales a las celdas según reglas personalizadas.

    • Configurando las cellClasses de entrada IgxColumnComponent en un objeto literal que contiene pares clave-valor. La clave es el nombre de la clase CSS, mientras que el valor es una función de devolución de llamada que devuelve un valor booleano o booleano. El resultado es una cómoda colocación del material en la celda.
    // component.ts file
    public beatsPerMinuteClasses = {
        downFont: this.downFontCondition,
        upFont: this.upFontCondition
    };
    ...
    
    private downFontCondition = (rowData: any, columnKey: any): boolean => {
        return rowData[columnKey] <= 95;
    }
    
    // component.scss file
    .upFont {
        color: red;
    }
    
    .downFont {
        color: green;
    }
    

    Using cellClasses

    Puede diseñar condicionalmente las celdas IgxGrid configurando la entrada IgxColumnComponent cellClasses y definiendo reglas personalizadas.

    <!-- sample.component.html -->
    <igx-column field="BeatsPerMinute" dataType="number" [cellClasses]="beatsPerMinuteClasses"></igx-column>
    

    La entrada cellClasses acepta un objeto literal, que contiene pares clave-valor, donde la clave es el nombre de la clase CSS, mientras que el valor es una función de devolución de llamada que devuelve un valor booleano o booleano.

    // sample.component.ts
    
    private upFontCondition = (rowData: any, columnKey: any): boolean => {
        return rowData[columnKey] > 95;
    }
    
    private downFontCondition = (rowData: any, columnKey: any): boolean => {
        return rowData[columnKey] <= 95;
    }
    
    public beatsPerMinuteClasses = {
        downFont: this.downFontCondition,
        upFont: this.upFontCondition
    };
    
    // sample.component.scss
    
    ::ng-deep {
        .upFont {
            color: green;
        }
    
        .downFont {
            color: red;
        }
    }
    

    Utilice::ng-deep o ViewEncapsulation.None para forzar los estilos personalizados a través del componente actual y sus hijos.

    Demo

    • Utilizando la entrada cellStyles​ ​IgxColumnComponent, que acepta un objeto literal donde las claves son propiedades de estilo y los valores son expresiones para evaluación.
    public styles = {
        'background': 'linear-gradient(180deg, #dd4c4c 0%, firebrick 100%)',
        'text-shadow': '1px 1px 2px rgba(25,25,25,.25)',
        'animation': '0.25s ease-in-out forwards alternate popin'
    };
    

    La firma de devolución de llamada para cellStyles y cellClasses ahora se cambia a:

    (rowData: any, columnKey: string, cellValue: any, rowIndex: number) => boolean
    

    Using cellStyles

    Las columnas ahora exponen la propiedad cellStyles que permite aplicar estilos condicionales a las celdas de las columnas. Al igual que cellClasses acepta un objeto literal donde las claves son propiedades de estilo y los valores son expresiones para evaluación. Además, puedes aplicar el peinado habitual con facilidad (sin condiciones).

    En el ejemplo anterior hemos creado:

    • Dos estilos diferentes que se aplicarán según el índice de la columna.
    • También cambiará el text color según las filas pares/impares.

    La firma de devolución de llamada para ambos cellStyles es:

    (rowData: any, columnKey: string, cellValue: any, rowIndex: number) => boolean
    

    Definamos nuestros estilos:

    // component.ts
    public oddColStyles = {
        background: 'linear-gradient(to right, #b993d6, #8ca6db)',
        color: (rowData, coljey, cellValue, rowIndex) => rowIndex % 2 === 0 ? 'white' : 'gray',
        animation: '0.75s popin'
    };
    
    public evenColStyles = {
        background: 'linear-gradient(to right, #8ca6db, #b993d6)',
        color: (rowData, coljey, cellValue, rowIndex) => rowIndex % 2 === 0 ? 'gray' : 'white',
        animation: '0.75s popin'
    };
    

    En ngOnInit agregaremos la configuración cellStyles para cada columna de la colección columns predefinidas, que se utiliza para crear las columnas IgxGrid dinámicamente.

    // component.ts
    public ngOnInit() {
        this.data = athletesData;
        this.columns = [
            { field: 'Id' },
            { field: 'Position' },
            { field: 'Name' },
            { field: 'AthleteNumber' },
            { field: 'CountryName' }
        ];
    
        this.applyCSS();
    }
    
    public applyCSS() {
        this.columns.forEach((column, index) => {
            column.cellStyles = (index % 2 === 0 ? this.evenColStyles : this.oddColStyles);
        });
    }
    
    public updateCSS(css: string) {
        this.oddColStyles = {...this.oddColStyles, ...JSON.parse(css)};
        this.evenColStyles = {...this.evenColStyles, ...JSON.parse(css)};
        this.applyCSS();
    }
    
    // component.html
    <igx-grid
        #grid1 [data]="data"
        primaryKey="ID"
        width="80%"
        height="300px">
        <igx-column *ngFor="let c of columns"
            [field]="c.field"
            [header]="c.field"
            [cellStyles]="c.cellStyles">
        </igx-column>
    </igx-grid>
    

    Definir una animación popin

    // component.scss
    @keyframes popin {
        0% {
            opacity: 0.1;
            transform: scale(.75, .75);
            filter: blur(3px) invert(1);
        }
    
        50% {
            opacity: .5;
            filter: blur(1px);
        }
    
        100% {
            transform: scale(1, 1);
            opacity: 1;
            filter: none;
        }
    }
    

    Demo

    Known issues and limitations

    • Si hay celdas vinculadas a la misma condición (de diferentes columnas) y una celda se actualiza, las otras celdas no se actualizarán según el nuevo valor, si se cumple la condición. Se debe realizar una verificación de la tubería para aplicar los cambios al resto de las celdas. El siguiente ejemplo muestra cómo hacerlo con un spread operator... en el evento onCellEdit. Esto copiará el objeto original con una nueva instancia y hará que se active la tubería pura.
    public backgroundClasses = {
        myBackground: (rowData: any, columnKey: string) => {
            return rowData.Col2 < 10;
        }
    };
    ...
    
    editDone(evt) {
        this.backgroundClasses = {...this.backgroundClasses};
    }
    
    
    <igx-grid #grid1 [data]="data" height="500px" width="100%" (onCellEdit)="editDone($event)">
      <igx-column field="Col1" dataType="number" [cellClasses]="backgroundClasses"></igx-column>
      <igx-column field="Col2" dataType="number" [editable]="true" [cellClasses]="backgroundClasses"></igx-column>
      <igx-column field="Col3" header="Col3" dataType="string" [cellClasses]="backgroundClasses"></igx-column>
    </igx-grid>
    

    API References

    Additional Resources

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