React Animações de coluna de grade

    O Ignite UI for React Data Table / Data Grid suporta Column Animation durante eventos como Column Hiding ou Column Moving. Quando Column Animation na React data grid é definida, a animação correspondente será disparada para todas as células naquela coluna.

    React 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:

    <IgrDataGrid
    height="100%"
    width="100%"
    dataSource={this.data}
    columnAddingAnimationMode="SlideToLeft"
    columnExchangingAnimationMode="SlideToRight"
    columnHidingAnimationMode="SlideToTopAndFadeOut"
    columnMovingAnimationMode="SlideOver"
    columnPropertyUpdatingAnimationMode="Interpolate"
    columnShowingAnimationMode="SlideFromBottomAndFadeIn" />

    API References