React estilo condicional de cuadrícula

    La función Ignite UI for React Conditional Styling en React Grid permite un estilo personalizado a nivel de fila o celda. La funcionalidad de estilo condicional IgrGrid se utiliza para enfatizar o resaltar visualmente datos que cumplen con ciertos criterios, lo que facilita a los usuarios identificar información o tendencias importantes dentro de la cuadrícula.

    Grid Conditional Row Styling

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

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

    Using Row Classes

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

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

    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.

    const rowClasses = {
        activeRow: (row: IgrRowType) => row.index === 0
    }
    
    .activeRow {
        border: 2px solid #fc81b8;
        border-left: 3px solid #e41c77;
    }
    

    Demo

    Using Row Styles

    El control IgrGrid expone 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).

    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

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

    • Configurando las cellClasses de entrada IgrColumn 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.

    Using Cell Classes

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

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

    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.

    function upFontCondition(rowData: any, columnKey: any): boolean {
        return rowData[columnKey] > 95;
    }
    
    function 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

    • Utilizando la entrada IgrColumn​ ​cellStyles que acepta un objeto literal donde las claves son propiedades de estilo y los valores son expresiones para evaluación.

    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 Cell Styles

    Las columnas 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).

    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.
    let backgroundClasses = {
        myBackground: (rowData: any, columnKey: string) => {
            return rowData.Col2 < 10;
        }
    };
    
    function editDone(grid, evt) {
        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.