React Recursos da grade dinâmica
Os componentes de pivô e grade plana herdam de uma base comum e, portanto, compartilham algumas funcionalidades e recursos.
[!Note] Some features do not have meaningful behavior in the context of a pivot table and therefore cannot be enabled for
IgrPivotGrid. These include:
- CRUD operations
- Grouping
- Row/Column Pinning
- Resumos
- Paginação
O componente Pivot Grid tem recursos e funcionalidades adicionais relacionadas às suas dimensões, conforme descrito abaixo.
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.
const dimension: IgrPivotDimension = new IgrPivotDimension();
dimension.memberName = "SellerName";
dimension.enabled = true;
dimension.sortDirection = SortingDirection.Asc;
Dimensions Resizing
As dimensões da linha podem ser redimensionadas de forma semelhante ao redimensionamento da coluna - 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 a width propriedade disponível na definição da dimensão:
const dimension: IgrPivotDimension = new IgrPivotDimension();
dimension.memberName = "SellerName";
dimension.enabled = true;
dimension.width = "400px";
Dimensions Selection
O Pivot Grid suporta seleção única que é habilitada assim como na grade base. Por exemplo:
<IgrPivotGrid data={pivotData} pivotConfiguration={pivotConfiguration} rowSelection={GridSelectionMode.Single}>
</IgrPivotGrid>
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 IgrPivotGrid componente fornece uma superCompactMode entrada. É adequado para casos que exigem que muitas células estejam presentes na tela ao mesmo tempo. Se ativada, a opção ignora a--ig-size variável CSS para a grade dinâmica. Habilitar superCompactMode também define o--ig-size to small para cada componente filho (como IgrChip) que não tem a SuperCompactMode opção.
<IgrPivotGrid data={pivotData} pivotConfiguration={pivotConfiguration} superCompactMode={true}>
</IgrPivotGrid>
Additional Summary Column
Quando uma column dimensão define uma hierarquia, a Grade Dinâmica renderiza uma coluna de resumo/total adicional, que acumula as agregações de todas as colunas dentro do grupo. Quando o grupo for recolhido, apenas a coluna de resumo permanecerá. E quando o grupo é expandido, a coluna de resumo adicional aparece no final do grupo.
Interações
Keyboard Navigation
A navegação por teclado funciona IgrPivotGrid de forma semelhante à da entrada IgrGrid. A grade dinâmica é 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 apenas no 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 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] The chips from the Pivot Grid can not be moved to the Pivot Data Selector and items from the Pivot Data Selector can not be moved to the Pivot Grid.