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.

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

    Using Row Classes

    Puedes estilizar condicionalmente lasIgrGrid filas estableciendo larowClasses entrada y definiendo reglas personalizadas.

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

    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.

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

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

    Demo

    Using Row Styles

    ElIgrGrid control expone 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: 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.

    • Estableciendo laIgrColumn 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.

    Using Cell Classes

    Puedes estilizar condicionalmente lasIgrGrid celdas fijando elIgrColumn cellClasses Introduzca y defina reglas personalizadas.

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

    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.

    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

    • Usando laIgrColumn entradacellStyles que acepta un objeto literal donde las claves son propiedades de estilo y los valores son expresiones para su evaluación.

    La firma de callback para amboscellStyles ycellClasses ahora se ha cambiado a:

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

    Using Cell Styles

    Las columnas exponen lacellStyles propiedad que permite un 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).

    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.