Estilo condicional da grade de árvore React

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

    Tree Grid Conditional Row Styling

    O IgrTreeGrid 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 IgrTreeGrid linhas definindo a rowClasses entrada e definir regras personalizadas.

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

    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 IgrTreeGrid 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['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

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

    <IgrColumn field="UnitPrice" header="Unit Price" dataType="currency" cellClasses={unitPriceCellClasses}>
    </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 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 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 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.