Web Components Grid Conditional Styling

    The Ignite UI for Web Components Conditional Styling feature in Web Components Grid allows custom styling on a row or cell level. The IgcGridComponent Conditional Styling functionality is used to visually emphasize or highlight data that meets certain criteria, making it easier for users to identify important information or trends within the grid.

    Grid Conditional Row Styling

    The IgcGridComponent component in Ignite UI for Web Components provides two ways to conditional styling of rows based on custom rules.

    Further in this topic we will cover both of them in more details.

    Using Row Classes

    You can conditionally style the IgcGridComponent rows by setting the rowClasses input and define custom rules.

    <igc-grid id="grid" height="600px" width="100%">
</igc-grid>

    constructor() {
    var grid = this.grid = document.getElementById('grid') as IgcGrid;
    grid.rowClasses = this.rowClasses;
}

    A rowClasses entrada aceita um literal de objeto, contendo pares chave-valor, em que a chave é o nome da classe CSS, enquanto o valor é uma função de retorno de chamada que retorna um valor booleano ou booleano.

    public rowClasses = {
    activeRow: (row: IgcRowType) => row.index === 0
}

    .activeRow {
    border: 2px solid #fc81b8;
    border-left: 3px solid #e41c77;
}

    Demo

    Using Row Styles

    The IgcGridComponent control exposes the rowStyles property which allows conditional styling of the data rows. Similar to rowClasses it accepts an object literal where the keys are style properties and the values are expressions for evaluation. Also, you can apply regular styling (without any conditions).

    The callback signature for both rowStyles and rowClasses is:

    (row: IgcRowType) => boolean

    Vamos definir nossos estilos:

    public rowStyles = {
    'background': (row: IgcRowType) => (+row.data['Change'] < 0 && +row.data['AnnualChange'] < 0) ? '#FF000088' : '#00000000',
    'border': (row: IgcRowType) => (+row.data['Change'] < 0 && +row.data['AnnualChange'] < 0) ? '2px solid' : '1px solid',
    'border-color': (row: IgcRowType) => (+row.data['Change'] < 0 && +row.data['AnnualChange'] < 0) ? '#FF000099' : '#E9E9E9'
};

    <igc-grid id="grid1" height="500px" width="100%"
        auto-generate="false" allow-filtering="true">
</igc-grid>

    constructor() {
    var grid1 = this.grid1 = document.getElementById('grid1') as IgcGridComponent;
    grid1.rowStyles = this.rowStyles;
}

    Demo

    Grid Conditional Cell Styling

    Visão geral

    The IgcGridComponent component in Ignite UI for Web Components provides two ways to conditional styling of cells based on custom rules.

    • By setting the IgcColumnComponent input cellClasses to an object literal containing key-value pairs. The key is the name of the CSS class, while the value is either a callback function that returns a boolean, or boolean value. The result is a convenient material styling of the cell.

    Using Cell Classes

    You can conditionally style the IgcGridComponent cells by setting the IgcColumnComponent cellClasses input and define custom rules.

    <igc-column id="beatsPerMin" field="BeatsPerMinute" data-type="Number"></igc-column>

    constructor() {
    var beatsPerMin = this.beatsPerMin = document.getElementById('beatsPerMin') as IgcColumnComponent;
    beatsPerMin.cellClasses = this.beatsPerMinuteClasses;
}

    A cellClasses entrada aceita um literal de objeto, contendo pares chave-valor, em que a chave é o nome da classe CSS, enquanto o valor é uma função de retorno de chamada que retorna um valor booleano ou booleano.

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

    .upFont {
    color: green !important;
}

.downFont {
    color: red !important;
}

    Demo

    • By using the IgcColumnComponent input cellStyles which accepts an object literal where the keys are style properties and the values are expressions for evaluation.

    A assinatura de retorno de chamada para ambos cellStyles e cellClasses agora é alterada para:

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

    Using Cell Styles

    Columns expose the cellStyles property which allows conditional styling of the column cells. Similar to cellClasses it accepts an object literal where the keys are style properties and the values are expressions for evaluation. Also, you can apply regular styling with ease (without any conditions).

    Vamos definir nossos estilos:

    public webGridCellStylesHandler = {
    background: (rowData, columnKey, cellValue, rowIndex) => rowIndex % 2 === 0 ? "#EFF4FD" : null,
    color: (rowData, columnKey, cellValue, rowIndex) => {
        if (columnKey === "Position") {
            switch (cellValue) {
                case "up": return "#28a745";
                case "down": return "#dc3545";
                case "current": return "#17a2b8"
            }
        }
    }
}

    <igc-column id="col1">
</igc-column>

    constructor() {
    var col1 = document.getElementById('col1') as IgcColumnComponent;
    col1.cellStyles = this.webGridCellStylesHandler;
}

    Demo

    Known issues and limitations

    • If there are cells bind to the same condition (from different columns) and one cell is updated, the other cells won't be updated based on the new value, if the condition is met.

    A check should be performed in order to apply the changes to the rest of the cells. The example below shows how to do that.

    public backgroundClasses = {
    myBackground: (rowData: any, columnKey: string) => {
        return rowData.Col2 < 10;
    }
};

public editDone(evt) {
    this.Col1.cellClasses = {...this.backgroundClasses};
}

    <igc-grid id="grid1" height="500px" width="100%" >
  <igc-column id="Col1" field="Col1" data-type="number"></igx-column>
  <igc-column id="Col2" field="Col2" data-type="number" editable="true"></igx-column>
  <igc-column id="Col3" field="Col3" header="Col3" data-type="string"></igx-column>
<igc-grid>

    constructor() {
    var grid = this.grid = document.getElementById('grid1') as IgcGrid;
    var Col1 = this.Col1 = document.getElementById('Col1') as IgcColumnComponent;
    var Col2 = this.Col2 = document.getElementById('Col2') as IgcColumnComponent;
    var Col3 = this.Col3 = document.getElementById('Col3') as IgcColumnComponent;
    grid.data = this.data;
    grid.onCellEdit = this.editDone;
    Col1.cellClasses = this.backgroundClasses;
    Col2.cellClasses = this.backgroundClasses;
    Col3.cellClasses = this.backgroundClasses;
}

    API References

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.