[!Note] Please note that this control has been deprecated and replaced with the Grid component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support.

    Web Components Animações de coluna de grade

    A Tabela de Dados/Grade de Dados do Ignite UI for Web Components suporta Animação de Coluna durante eventos como Ocultação de Coluna ou Movimentação de Coluna. Quando a Animação da Coluna na grade de dados Web Components estiver definida, a animação correspondente será acionada para todas as células dessa coluna.

    Web Components Grid Column Animations Example

    Animation Properties

    Cada propriedade de animação de coluna é listada e descrita abaixo:

    • columnAddingAnimationMode: When a column is added, you have the option to have the column header and its cells slide in from the left, right, top, or bottom. There are also options to have it fade in as well as slide and fade in.
    • columnExchangingAnimationMode: When a column is exchanged, you have the option to have the exchanged column header and its cells slide to the left, right, top, or bottom. There are also options to have it fade as well as slide and fade.
    • columnHidingAnimationMode: When a column is hidden, you have the option to have the column header and its cells slide out to the left, right, top, or bottom. There are also options to have it fade out as well as slide and fade out.
    • columnMovingAnimationMode: When a column is moved, you have the option to have the column header and its cells slide over.
    • columnPropertyUpdatingAnimationMode: When a column's property changes, you have the option to have that property change animate by interpolating or deeply interpolating its change.
    • columnShowingAnimationMode: When a column is added, you have the option to have the column header and its cells slide in from the left, right, top, or bottom. There are also options to have it fade in as well as slide and fade in.

    Code Snippet

    A seguir, demonstramos a implementação de cada uma das animações de coluna descritas neste tópico:

    <igc-data-grid id="grid"
      height="100%"
      width="100%"
      column-addingAnimation-mode="SlideToLeft"
      column-exchanging-animation-mode="SlideToRight"
      column-hiding-animation-mode="SlideToTopAndFadeOut"
      column-moving-animation-mode="SlideOver"
      column-property-updating-animation-mode="Interpolate"
      column-showing-animation-mode="SlideFromBottomAndFadeIn">
</igc-data-grid>

    API References