Estilo condicional de grade React

O recurso Ignite UI for React Estilo condicional em React Grid permite o estilo personalizado em um nível de linha ou célula. A IgrGrid funcionalidade Estilo condicional é usada para enfatizar ou realçar visualmente os dados que atendem a determinados critérios, tornando mais fácil para os usuários identificar informações ou tendências importantes na grade.

Grid Conditional Row Styling

O IgrGrid componente no Ignite UI for React fornece duas maneiras de estilizar condicionalmente linhas com base em regras personalizadas.

By setting rowClasses input on the IgrGrid component;
Ao definir rowStyles a IgrGrid entrada no componente;

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

Using Row Classes

Você pode estilizar condicionalmente as IgrGrid linhas definindo a rowClasses entrada e definir regras personalizadas.

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

A rowClasses entrada aceita um literal de objeto, contendo pares chave-valor, em que a chave é o nome da classe CSS, enquanto o valor é uma função de retorno de chamada 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

O IgrGrid controle expõe a propriedade que permite o rowStyles estilo condicional das linhas de dados. Semelhante a rowClasses ele, aceita um literal de objeto em que as chaves são propriedades de estilo e os valores são expressões para avaliação. Além disso, você pode aplicar um estilo regular (sem quaisquer condições).

The callback signature for both rowStyles and rowClasses is:

(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

O IgrGrid componente em Ignite UI for React fornece duas maneiras de estilizar condicionalmente de células com base em regras personalizadas.

Definindo a IgrColumn entrada cellClasses para um literal de objeto contendo pares de valores-chave. A chave é o nome da classe CSS, enquanto o valor é uma função de retorno de chamada que retorna um valor booleano ou booleano. O resultado é um estilo de material conveniente da célula.

Using Cell Classes

Você pode estilizar condicionalmente as IgrGrid células definindo o IgrColumn cellClasses insira e defina regras personalizadas.

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

A cellClasses entrada aceita um literal de objeto, contendo pares chave-valor, em que a chave é o nome da classe CSS, enquanto o valor é uma função de retorno de chamada que retorna um valor booleano ou 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

Usando a IgrColumn entrada cellStyles que aceita um literal de objeto em que as chaves são propriedades de estilo e os valores são expressões para avaliação.

A assinatura de retorno de chamada para ambos cellStyles e cellClasses agora é alterada para:

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

Using Cell Styles

As colunas expõem a propriedade que permite o cellStyles estilo condicional das células da coluna. Semelhante a cellClasses ele, aceita um literal de objeto em que as chaves são propriedades de estilo e os valores são expressões para avaliação. Além disso, você pode aplicar o estilo regular com facilidade (sem quaisquer condições).

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.

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

Nossa comunidade é ativa e sempre acolhedora para novas ideias.