Recursos da grade de pivô Angular

As classes de componentes de grade dinâmica e plana herdam de uma base comum e, portanto, compartilham algumas funcionalidades e recursos.

Note

Alguns recursos não têm comportamento significativo no contexto de uma tabela dinâmica e, portanto, não podem ser habilitados para IgxPivotGrid. Eles incluem:

• Operações CRUD
• Agrupamento
• Fixação de linha/coluna
• Resumos
• Paginação

O componente Pivot Grid tem recursos e funcionalidades adicionais relacionadas às suas dimensões, conforme descrito abaixo.

Dimensions filtering

Todas as dimensões (filtros, linhas, colunas) podem ser filtradas por meio da UI do chip ou da API. Essa funcionalidade é incorporada e habilitada por padrão.

Note

Você pode usar a dimensão de filtragem para filtrar valores de dados que não fazem parte da visualização dinâmica.

A interface de filtragem pode ser aberta por meio do ícone de filtro de chips de dimensão e permite a filtragem no estilo Excel dos valores de dimensão exclusivos.

Note

Se não houver espaço suficiente para todos os chips de filtragem, a grade de pivô mostrará os que foram cortados em um menu suspenso. Os usuários finais podem acessá-los e manipulá-los lá.

As dimensões também podem ser filtradas inicialmente por meio da configuração de dimensão em pivotConfiguration com a propriedade filter da dimensão. Ela pode ser definida como uma nova FilteringExpressionsTree com a condição de filtro relacionada, por exemplo:

public filterExpTree = new FilteringExpressionsTree(FilteringLogic.And);

constructor() {
    this.filterExpTree.filteringOperands = [
        {
            condition: IgxStringFilteringOperand.instance().condition('equals'),
            fieldName: 'SellerName',
            searchVal: 'Stanley'
        }
    ];
}

public pivotConfigHierarchy: IPivotConfiguration = {
    filters: [
        {
            memberName: 'SellerName',
            enabled: true,
            filter: this.filterExpTree
        }
    ]
}

Dimensions sorting

Valores de dimensão nas rows ou columns podem ser classificados por meio do chip relacionado ou da API. Essa funcionalidade é incorporada e habilitada por padrão.

A dimensão é classificada com um clique no chip relacionado e, como resultado, os valores da dimensão são classificados em ordem crescente/decrescente.

A classificação também pode ser aplicada inicialmente por meio da propriedade sortDirection da definição de dimensão.

public pivotConfigHierarchy: IPivotConfiguration = {
    rows: [
        {
            memberName: 'SellerName',
            enabled: true,
            sortDirection: SortingDirection.Asc
        }
    ]
}

Dimensions resizing

As dimensões de linha podem ser redimensionadas de forma similar ao redimensionamento de coluna - por meio de um indicador de redimensionamento que pode ser encontrado na borda direita das células. Elas também podem ser redimensionadas automaticamente clicando duas vezes no indicador de redimensionamento ou usando a API relacionada -autoSizeRowDimension.

Um tamanho diferente também pode ser definido inicialmente com a propriedade width disponível na definição de dimensão:

public pivotConfigHierarchy: IPivotConfiguration = {
    rows: [
        {
            memberName: 'Country',
            enabled: true,
            width: '400px'
        }
    ]
}

Note

A partir da versão 18.0.0 do IgniteUI para Angular a width das dimensões da linha também pode ser definida como auto.

Dimensions selection

O Pivot Grid suporta seleção única que é habilitada assim como na grade base. Por exemplo:

<igx-pivot-grid #grid1 [rowSelection]="'single'" [data]="data" [pivotConfiguration]="pivotConfigHierarchy">
</igx-pivot-grid>

Caso haja várias dimensões de linha ou coluna que criem grupos que abrangem várias linhas/colunas, a seleção é aplicada a todas as células que pertencem ao grupo selecionado.

Super Compact Mode

O componente IgxPivotGrid fornece um superCompactMode @Input. Ele é adequado para casos que exigem que muitas células estejam presentes na tela ao mesmo tempo. Se habilitada, a opção ignora a variável ig-size para a grade de pivô. Habilitar superCompactMode também define a variável ig-size para ig-size-small para cada componente filho (como IgxChip) que não tem a opção superCompactMode.

<igx-pivot-grid [superCompactMode]="true"></igx-pivot-grid>

Additional summary column

Quando uma dimensão column define uma hierarquia, a grade dinâmica renderizará uma coluna de resumo/total adicional, que acumula as agregações de todas as colunas dentro do grupo. Quando o grupo é recolhido, apenas a coluna de resumo permanecerá. E quando o grupo é expandido, a coluna de resumo adicional aparece no final do grupo.

Row Dimensions Headers

A partir da versão 18.0.0 os cabeçalhos de valores de dimensão de linha do IgniteUI para Angular podem ser habilitados por meio da opção pivotUI:

<igx-pivot-grid [pivotUI]="{ showRowHeaders: true }">
</igx-pivot-grid>

Row Dimension Layout

O IgxPivotGridComponent suporta duas formas de renderização de dimensão de linha. Isso pode ser controlado definindo a propriedade rowLayout da opção pivotUI.

  <igx-pivot-grid [pivotUI]="pivotUI">
  </igx-pivot-grid>

public pivotUI: IPivotUISettings = { rowLayout: PivotRowLayoutType.Horizontal };

O layout padrão da grade é Vertical. Neste modo, a hierarquia de dimensões se expande verticalmente. A alternativa seria Horizontal. Neste modo, os filhos de uma dimensão de linha única quando expandidos são mostrados horizontalmente no mesmo layout de várias linhas pai. No exemplo abaixo, você pode alternar entre os dois modos para compará-los.

Observe que no modo Horizontal, os agregados de dimensão da linha pai não são visíveis a menos que a linha pai esteja recolhida. Para mostrar a dimensão pai em um resumo de linha, a propriedade horizontalSummary pode ser habilitada para a dimensão relacionada.

rows: [
    {
        memberFunction: () => 'All Products',
        memberName: 'AllProducts',
        enabled: true,
        horizontalSummary: true,
        width: "150px",
        childLevel: {
            //...
        }
    }
]

Além disso, a posição do resumo pode ser alterada por meio da propriedade horizontalSummariesPosition da opção pivotUI. Ela pode ser definida como Top (padrão) ou Bottom.

public pivotUI: IPivotUISettings = { rowLayout: PivotRowLayoutType.Horizontal, horizontalSummariesPosition: PivotSummaryPosition.Bottom };

Note

As opções relacionadas ao resumo de linha -horizontalSummary e horizontalSummariesPosition são aplicáveis somente ao modo de layout Horizontal.

Interações

Navegação pelo teclado

A navegação pelo teclado no IgxPivotGrid funciona de forma semelhante à do IgxGrid. A grade de pivô é dividida em três áreas -rows, columns, values. As áreas para rows e columns são consideradas cabeçalhos para fins de navegação, enquanto a área para values é o corpo. As setas do teclado permitem navegar no elemento ativo somente dentro da área atual.

Dimensions drag & drop

As dimensões são representadas por chips, que podem ser arrastados e soltos. Todos os chips podem mudar sua ordem dentro de sua área por arrastar e soltar. Os chips de rows, column, filter (chips de dimensão) podem ser movidos de qualquer uma dessas áreas para qualquer outra e em qualquer lugar. Os chips dessas áreas não podem ser movidos para a área values e os chips da área values não podem ser movidos para nenhuma das áreas de dimensão.

Note

Os chips da Grade Dinâmica não podem ser movidos para o Seletor de Dados Dinâmicos e os itens do Seletor de Dados Dinâmicos não podem ser movidos para a Grade Dinâmica.

API References

• Componente IgxPivotGrid
• Componente IgxPivotDataSelector

Additional Resources

• Visão geral da grade de pivô Angular
• Agregações personalizadas Angular Pivot Grid

Nossa comunidade é ativa e sempre acolhedora para novas ideias.

• Ignite UI for Angular Fóruns
• Ignite UI for Angular GitHub