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 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.

    const dimension: IgrPivotDimension = {
    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:

    const igrPivotDimension2: IgrPivotDimension = {
    memberName: "SellerName",
    enabled: true,
    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="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

    OIgrPivotGrid componente fornece umasuperCompactMode 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 de Pivô. AtivarsuperCompactMode também define o--ig-size parasmall cada componente filho (tipoIgrChip) que não tem essaSuperCompactMode opção.

    <IgrPivotGrid data={pivotData} pivotConfiguration={pivotConfiguration} superCompactMode={true}>
</IgrPivotGrid>

    Additional Summary Column

    Quando umacolumn dimensão define uma hierarquia, a Grade Pivot renderiza colunas adicionais de resumo/total, que acumulam 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.

    Interações

    Keyboard Navigation

    A navegação por teclado funcionaIgrPivotGrid de forma semelhante à que está em usoIgrGrid. A Grade Pivot é 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] 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.

    API References

    Additional Resources