Estilo condicional de grade React

    O recurso Ignite UI for React Condicional Styling no React Grid permite estilização personalizada em nível de fileira ou célula. AIgrGrid funcionalidade de Estilização Condicional é usada para enfatizar visualmente ou destacar dados que atendem a certos critérios, facilitando para os usuários identificarem informações ou tendências importantes dentro da grade.

    Grid Conditional Row Styling

    OIgrGrid componente em Ignite UI for React oferece duas formas de estilizar condicionalmente as linhas com base em regras personalizadas.

    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

    OIgrGrid componente em Ignite UI for React oferece duas formas de estilizar condicionalmente as células com base em regras personalizadas.

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