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 pela esquerda, direita, topo ou baixo. Também há opções para fazer o fade in, deslizar e fazer fade in.
    • columnExchangingAnimationMode: Quando uma coluna é trocada, você tem a opção de fazer com que o cabeçalho da coluna trocado e suas células deslizem para a esquerda, direita, topo ou baixo. Também há opções para fazer o desbote, além de deslizar e desvanecer.
    • 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, topo ou baixo. Também há opções para fazer o fade para o desbote, além de deslizar e desligar.
    • columnMovingAnimationMode: Quando uma coluna é movida, você tem a opção de fazer o cabeçalho da coluna e suas células deslizarem para cima.
    • columnPropertyUpdatingAnimationMode: Quando a propriedade de uma coluna muda, você tem a opção de fazer essa mudança se animar interpolando ou interpolando profundamente sua alteração.
    • columnShowingAnimationMode: Quando uma coluna é adicionada, você tem a opção de fazer o cabeçalho da coluna e suas células deslizarem pela esquerda, direita, topo ou baixo. Também há opções para fazer o fade in, deslizar e fazer fade in.

    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