Estilo condicional React Grid

The Ignite UI for React Conditional Styling feature in React Grid allows custom styling on a row or cell level. The IgrGrid 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 IgrGrid component in Ignite UI for React provides two ways to conditional styling of rows based on custom rules.

By setting rowClasses input on the IgrGrid component;
By setting rowStyles input on the IgrGrid component;

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

Using Row Classes

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

<IgrGrid id="grid" height="600px" width="100%" rowClasses={rowClasses}>
</IgrGrid>

The rowClasses input accepts an object literal, containing key-value pairs, where the key is the name of the CSS class, while the value is either a callback function that returns a boolean, or boolean value.

const rowClasses = {
    activeRow: (row: IgrRowType) => row.index === 0
}

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

Demo

Using Row Styles

The IgrGrid 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: IgrRowType) => boolean

Definamos nuestros estilos:

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

<IgrGrid id="grid" height="600px" width="100%" rowStyles={rowStyles}>
<IgrGrid>

Demo

Grid Conditional Cell Styling

Descripción general

The IgrGrid component in Ignite UI for React provides two ways to conditional styling of cells based on custom rules.

By setting the IgrColumn 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 IgrGrid cells by setting the IgrColumn cellClasses input and define custom rules.

<IgrColumn field="BeatsPerMinute" dataType="number" cellClasses={beatsPerMinuteClasses}></IgrColumn>

The cellClasses input accepts an object literal, containing key-value pairs, where the key is the name of the CSS class, while the value is either a callback function that returns a boolean, or boolean value.

const upFontCondition = (rowData: any, columnKey: any): boolean => {
    return rowData[columnKey] > 95;
}

const downFontCondition = (rowData: any, columnKey: any): boolean => {
    return rowData[columnKey] <= 95;
}

const beatsPerMinuteClasses = {
    downFont: downFontCondition,
    upFont: upFontCondition
};

.upFont {
    color: green !important;
}

.downFont {
    color: red !important;
}

Demo

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

The callback signature for both cellStyles and cellClasses is now changed to:

(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).

Definamos nuestros estilos:

const webGridCellStyles = {
    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"
            }
        }
    }
}

<IgrColumn cellStyles={webGridCellStyles}></IgrColumn>

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.

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

const editDone = (event: IgrGridEditEventArgs) => {
    backgroundClasses = {...backgroundClasses};
}

<IgrGrid id="grid1" height="500px" width="100%" onCellEdit={editDone}>
  <IgrColumn id="Col1" field="Col1" dataType="number" cellClasses={backgroundClasses}></IgrColumn>
  <IgrColumn id="Col2" field="Col2" dataType="number" editable={true} cellClasses={backgroundClasses}></IgrColumn>
  <IgrColumn id="Col3" field="Col3" header="Col3" dataType="string" cellClasses={backgroundClasses}></IgrColumn>
</IgrGrid>

API References

Additional Resources

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