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 de Ignite UI for Angular proporciona dos formas de aplicar estilos condicionales a las filas en función de reglas personalizadas.

• EstableciendorowClasses la entrada en el componente IgxGrid;
• EstableciendorowStyles la entrada en el componente IgxGrid;

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

Using rowClasses

Puedes estilizar condicionalmente las filas de IgxGrid configurando larowClasses entrada y definiendo reglas personalizadas.

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

LarowClasses entrada acepta un literal objeto que contiene pares clave-valor, donde la clave es el nombre de la clase CSS, mientras que el valor es una función de callback 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;
 }
}

Note

Usa::ng-deep oViewEncapsulation.None forzar los estilos personalizados hacia abajo a través del componente actual y sus hijos.

Demo

Using rowStyles

Las columnas ahora exponen larowStyles propiedad que permite el estilizado condicional de las filas de datos. De forma similar arowClasses acepta un literal objeto donde las claves son propiedades de estilo y los valores son expresiones para su evaluación. Además, puedes aplicar peinado normal (sin condiciones).

La firma de callback para ambosrowStyles yrowClasses 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 de Ignite UI for Angular proporciona dos formas de aplicar estilos condicionales a las celdas en función de reglas personalizadas.

• Estableciendo laIgxColumnComponent entradacellClasses a un literal de objeto que contiene pares clave-valor. La clave es el nombre de la clase CSS, mientras que el valor es una función de callback que devuelve un valor booleano o booleano. El resultado es un diseño material conveniente de la célula.

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

Puedes estilizar condicionalmente las celdas IgxGrid configurando laIgxColumnComponent cellClasses Introduzca y defina reglas personalizadas.

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

LacellClasses entrada acepta un literal objeto que contiene pares clave-valor, donde la clave es el nombre de la clase CSS, mientras que el valor es una función de callback 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;
    }
}

Note

Usa::ng-deep oViewEncapsulation.None forzar los estilos personalizados hacia abajo a través del componente actual y sus hijos.

Demo

• Usando laIgxColumnComponent entradacellStyles que acepta un objeto literal donde las claves son propiedades de estilo y los valores son expresiones para su 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 callback para amboscellStyles ycellClasses ahora se ha cambiado a:

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

Using cellStyles

Las columnas ahora exponen lacellStyles propiedad que permite el estilizado condicional de las celdas de columna. De forma similar acellClasses acepta un literal objeto donde las claves son propiedades de estilo y los valores son expresiones para su evaluación. Además, puedes aplicar peinados normales con facilidad (sin ninguna condición).

En el ejemplo anterior hemos creado:

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

La firma de callback para amboscellStyles 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'
};

EnngOnInit añadiremos lacellStyles configuración para cada columna de la colección predefinidacolumns, que se utiliza para crear dinámicamente las columnas IgxGrid.

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

Define unapopin animación

// 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 columnas diferentes) y una celda se actualiza, las otras celdas no se actualizarán basándose en el nuevo valor, si se cumple la condición. Debe realizarse una comprobación de tuberías para aplicar los cambios al resto de las celdas. El ejemplo de abajo muestra cómo hacerlo con unspread operator(...) evento encendidoonCellEdit. Esto copiará el objeto original con una nueva instancia y se disparará la tubería de plomo puro.

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

• ComponenteColumnaIgx
• Componente IgxGrid
• Estilos de componentes IgxGrid

Additional Resources

• Descripción general de la cuadrícula
• Virtualización y rendimiento
• Edición
• Paginación
• Filtración
• Clasificación
• resúmenes
• Columna en movimiento
• Fijación de columnas
• Cambio de tamaño de columna
• Ocultación de columnas
• Selección
• buscando
• Barra de herramientas
• Encabezados de varias columnas
• Tamaño

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

• Ignite UI for Angular Foros
• Ignite UI for Angular GitHub