React Estilo condicional de grade hierárquica

    O recurso Ignite UI for React Estilo condicional em React grade hierárquica permite o estilo personalizado em um nível de linha ou célula. A IgrHierarchicalGrid 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.

    Hierarchical Grid Conditional Row Styling

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

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

    Using Row Classes

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

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

    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 IgrHierarchicalGrid 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: RowType) => row.data['HasGrammyAward'] ? '#eeddd3' : '#f0efeb',
    'border-left': (row: RowType) => row.data['HasGrammyAward'] ? '2px solid #dda15e' : null
};

const childRowStyles = {
    'border-left': (row: RowType) => row.data['BillboardReview'] > 70 ? '3.5px solid #dda15e' : null
};

    <IgrHierarchicalGrid autoGenerate={true} rowStyles={rowStyles}
        height="580px" width="100%">
        <IgrRowIsland childDataKey="Albums" autoGenerate={true} rowStyles={childRowStyles}>
        </IgrRowIsland>
</IgrHierarchicalGrid>

    Demo

    Hierarchical Grid Conditional Cell Styling

    Visão geral

    O IgrHierarchicalGrid 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 IgrHierarchicalGrid células definindo o IgrColumn cellClasses insira e defina regras personalizadas.

    <IgrColumn field="BeatsPerMinute" dataType="number" cellClasses={grammyNominationsCellClassesHandler}></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.

    const grammyNominationsCellClassesHandler = {
    downFont: (rowData: any, columnKey: any): boolean => rowData[columnKey] < 5,
    upFont: (rowData: any, columnKey: any): boolean => rowData[columnKey] >= 6
};

    .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 cellStylesHandler = {
    background: (rowData, columnKey, cellValue, rowIndex) => rowIndex % 2 === 0 ? "#EFF4FD" : null,
    color: (rowData, columnKey, cellValue, rowIndex) => {
        if (columnKey === "Debut") {
            return cellValue > 2000 ? "#28a745" : "#dc3545";
        }
        return undefined;
    }
}

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

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

    API References

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.