[!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 Animaciones de columnas de cuadrícula

    La tabla de datos Ignite UI for Web Components / cuadrícula de datos admite la animación de columnas durante eventos como la ocultación de columnas o el movimiento de columnas. Cuando se establece Animación de columna en la cuadrícula de datos de Web Components, la animación correspondiente se activará para todas las celdas de esa columna.

    Web Components Grid Column Animations Example

    Animation Properties

    Cada propiedad de animación de columna se enumera y describe a continuación:

    • 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 continuación se demuestra la implementación de cada una de las animaciones de columna descritas en este tema:

    <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