Estilo condicional da grade de árvore React

O recurso Ignite UI for React Condicional Styling na React Tree Grid permite estilização personalizada em nível de linha ou célula. AIgrTreeGrid 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.

Tree Grid Conditional Row Styling

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

DefinindorowClasses entrada noIgrTreeGrid componente;
DefinindorowStyles entrada noIgrTreeGrid componente;

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

Using Row Classes

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

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

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

OIgrTreeGrid 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['Title'] === 'CEO' ? '#6c757d' :
        row.data['Title'].includes('President') ?'#adb5bd' :
        row.data['Title'].includes('Director') ? '#ced4da' :
        row.data['Title'].includes('Manager') ? '#dee2e6' :
        row.data['Title'].includes('Lead') ? '#e9ecef' :
        row.data['Title'].includes('Senior') ? '#f8f9fa' : null,
    'border-left': (row: IgrRowType) => row.data['Title'] === 'CEO' || row.data['Title'].includes('President') ? '2px solid' : null,
    'border-color': (row: IgrRowType) => row.data['Title'] === 'CEO' ? '#495057' : null,
    'color': (row: IgrRowType) => row.data['Title'] === 'CEO' ? '#fff' : null
};

<IgrTreeGrid autoGenerate={true} primaryKey="ID" foreignKey="ParentID" data={data} rowStyles={rowStyles}>
</IgrTreeGrid>

Demo

Tree Grid Conditional Cell Styling

Visão geral

OIgrTreeGrid 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 asIgrTreeGrid células definindo oIgrColumn cellClasses Insira e defina regras personalizadas.

<IgrColumn field="UnitPrice" header="Unit Price" dataType="currency" cellClasses={unitPriceCellClasses}>
</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 upPriceCondition = (rowData: any, columnKey: any): boolean => {
    return rowData[columnKey] > 5;
}

const downPriceCondition = (rowData: any, columnKey: any): boolean => {
    return rowData[columnKey] <= 5;
}

const unitPriceCellClasses = {
    downPrice: downPriceCondition,
    upPrice: upPriceCondition
};

.upPrice {
    color: red !important;
}

.downPrice {
    color: green !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 webTreeGridCellStyles = {
    background: (rowData, columnKey, cellValue, rowIndex) => rowIndex % 2 === 0 ? "#EFF4FD" : null,
    color: (rowData, columnKey, cellValue, rowIndex) => {
        if (columnKey === "UnitPrice") {
            if (cellValue > 10) return "#dc3545";
            if (cellValue < 5) return "#28a745";
            if (cellValue >= 5 && cellValue <= 10) return "#17a2b8";
        }
    }
}

<IgrColumn cellStyles={webTreeGridCellStyles}></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};
}

<IgrTreeGrid 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>
</IgrTreeGrid>

API References

Additional Resources

Nossa comunidade é ativa e sempre acolhedora para novas ideias.