[!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 Grid Column Animations

    The Ignite UI for Web Components Data Table / Data Grid supports Column Animation during events like Column Hiding or Column Moving. When Column Animation on the Web Components data grid is set, the corresponding animation will fire for all of the cells in that column.

    Web Components Grid Column Animations Example

    Animation Properties

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

    • columnAddingAnimationMode: Quando uma coluna é adicionada, você tem a opção de fazer o cabeçalho da coluna e suas células deslizarem da esquerda, direita, de cima ou de baixo. Também há opções para fazê-lo aparecer gradualmente, bem como deslizar e aparecer gradualmente.
    • columnExchangingAnimationMode: Quando uma coluna é trocada, você tem a opção de fazer o cabeçalho da coluna trocada e suas células deslizarem para a esquerda, direita, para cima ou para baixo. Também há opções para fazê-lo desaparecer, bem como deslizar e desaparecer.
    • columnHidingAnimationMode: Quando uma coluna está oculta, você tem a opção de fazer o cabeçalho da coluna e suas células deslizarem para a esquerda, direita, para cima ou para baixo. Também há opções para fazê-lo desaparecer, bem como deslizar e desaparecer.
    • columnMovingAnimationMode: quando uma coluna é movida, você tem a opção de fazer com que o cabeçalho da coluna e suas células deslizem.
    • columnPropertyUpdatingAnimationMode: quando a propriedade de uma coluna muda, você tem a opção de animar essa mudança de propriedade interpolando ou interpolando profundamente sua mudança.
    • columnShowingAnimationMode: Quando uma coluna é adicionada, você tem a opção de fazer o cabeçalho da coluna e suas células deslizarem da esquerda, direita, de cima ou de baixo. Também há opções para fazê-lo aparecer gradualmente, bem como deslizar e aparecer gradualmente.

    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