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

Algumas funcionalidades não possuem comportamento significativo no contexto de uma tabela dinâmica e, portanto, não podem ser ativadas.IgxPivotGrid Estes 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 pela configuração dimensional empivotConfiguration com a propriedade dafilter dimensão. Ele pode ser definido para um novoFilteringExpressionsTree 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 em ourows​columns podem ser ordenados via chip relacionado ou API. Essa funcionalidade é embutida e ativada 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 ordenação também pode ser aplicada inicialmente pelasortDirection propriedade da definição de dimensão.

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

Dimensions resizing

As dimensões das linhas podem ser redimensionadas de forma semelhante ao redimensionamento das colunas – por meio de um indicador de redimensionamento que pode ser encontrado na borda direita das células. Eles também podem ser dimensionados automaticamente clicando duas vezes no indicador de redimensionamento, ou usando a API relacionada -autoSizeRowDimension.

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

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

Note

A partir da versão18.0.0, o IgniteUI para Angular aswidth dimensões da linha também pode ser configurado paraauto.

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

OIgxPivotGrid componente fornece umsuperCompactMode @Input. É adequado para casos que exigem que muitas células estejam presentes na tela ao mesmo tempo. Se ativada, a opção ignora aig-size variável para a grade de pivô. AtivarsuperCompactMode também define aig-size variável paraig-size-small cada componente filho (semelhanteIgxChip) que não possui essasuperCompactMode opção.

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

Additional summary column

Quando umacolumn dimensão define uma hierarquia, a grade pivot renderiza coluna adicional de resumo/total, que acumula as agregações de todas as colunas dentro do grupo. Quando o grupo é colapsado, 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ão18.0.0, o IgniteUI para cabeçalhos de valores de dimensão de linha Angular pode ser ativado por meiopivotUI da opção:

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

Row Dimension Layout

EleIgxPivotGridComponent suporta duas formas de renderização por dimensão de linha. Isso pode ser controlado definindo apivotUI propriedade darowLayout opção.

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

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

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

Note que, noHorizontal modo, os agregados da dimensão das linhas pais não são visíveis a menos que a linha pai esteja colapsada. Para mostrar a dimensão pai em um resumo de linha, ahorizontalSummary propriedade pode ser ativada 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 dahorizontalSummariesPosition propriedade dapivotUI opção. Pode ser configurado para (Toppadrão) ou.Bottom​

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

Note

As opções relacionadas ao resumo de linhas -horizontalSummaryehorizontalSummariesPosition são aplicáveis apenas aoHorizontal modo layout.

Interações

Navegação pelo teclado

A navegação por teclado funcionaIgxPivotGrid de forma semelhante à que está em usoIgxGrid. A grade de pivô é dividida em três áreas -rows,columns,values. As áreas pararows ecolumns são consideradas cabeçalhas para fins de navegação, enquanto a área paravalues é o corpo. As setas do teclado permitem navegar apenas pelo elemento ativo 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 alterar sua ordem dentro da área por meio de arrastar e soltar. Os chips derows,column,filter (chips dimensionais) podem ser movidos de qualquer uma dessas áreas para qualquer outra e em qualquer lugar. Chips dessas áreas não podem ser movidos para avalues área e chips davalues área não podem ser movidos para nenhuma das áreas dimensionais.

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