Estilo condicional de grade React

    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.

    Mais adiante neste tópico, abordaremos os dois com mais detalhes.

    Using Row Classes

    Você pode estilizar condicionalmente asIgrGrid linhas definindo arowClasses entrada e definir regras personalizadas.

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

    ArowClasses entrada aceita um objeto literal, contendo pares-chave-valor, onde a chave é o nome da classe CSS, enquanto o valor é uma função de callback que retorna um valor booleano ou booleano.

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

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

    Demo

    Using Row Styles

    OIgrGrid controle expõe arowStyles propriedade que permite o estilo condicional das linhas de dados. De forma semelhante,rowClasses aceita um literal de objeto onde as chaves são propriedades de estilo e os valores são expressões para avaliação. Além disso, você pode aplicar um penteado normal (sem nenhuma condição).

    A assinatura de callback para ambosrowStyles erowClasses é:

    (row: IgrRowType) => boolean

    Vamos definir nossos 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

    Visão geral

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

    • Definindo aIgrColumn entradacellClasses para um literal de objeto contendo pares-chave-valor. A chave é o nome da classe CSS, enquanto o valor é uma função de callback que retorna um valor booleano ou booleano. O resultado é um estilo material conveniente da célula.

    Using Cell Classes

    Você pode estilizar condicionalmente asIgrGrid células definindo oIgrColumn cellClasses Insira e defina regras personalizadas.

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

    AcellClasses entrada aceita um objeto literal, contendo pares-chave-valor, onde a chave é o nome da classe CSS, enquanto o valor é uma função de callback que retorna um valor booleano ou 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 aIgrColumn entradacellStyles que aceita um objeto literal onde as chaves são propriedades de estilo e os valores são expressões para avaliação.

    A assinatura de callback para amboscellStyles ecellClasses agora foi alterada para:

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

    Using Cell Styles

    Colunas expõem acellStyles propriedade que permite o estilo condicional das células da coluna. De forma semelhante,cellClasses aceita um literal de objeto onde as chaves são propriedades de estilo e os valores são expressões para avaliação. Além disso, você pode aplicar o penteado normal com facilidade (sem nenhuma condição).

    Vamos definir nossos 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

    • Se houver células associadas à mesma condição (de colunas diferentes) e uma célula for atualizada, as outras células não serão atualizadas com base no novo valor, se a condição for atendida.
    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

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.